geo madness with neo4j and the web
TRANSCRIPT
Geo Madness with Neo4J and
the Web
Kees de Kooter
SRM
RDM
MEMBER_OF
SMIT
MEMBER_OF
IHC
MEMBER_OF
ACMESUPPLIER_OF
SUPPLIER_OF
SUPPLIER_OF
SRM
RDM
MEMBER_OF
SMIT
MEMBER_OF
IHC
MEMBER_OF
ACMESUPPLIER_OF
SUPPLIER_OF
SUPPLIER_OF
MATCH (c:Company)-[:MEMBER_OF]->(n:Community)
WHERE n.id = 7
RETURN c, n LIMIT 10
MATCH (c:Company)
WHERE c.name =~ "(i?).*haven.*"
RETURN c
ORDER BY c.name LIMIT 20
GeoJSON
TopoJSON
KML
SVG
WebGL
Canvas2D
GML
GeoJSON
TopoJSON
KML
SVG
WebGL
Canvas2D
GML
var map = L.map('leaflet-map', {});
L.tileLayer(‘http://..mapbox.com/../{z}/{x}/{y}.png’, {}).addTo(map);
Tiles Layer
{
"type": "Feature",
"properties": {
"id": 11031,
"address": "Raadhuisstraat 33”,
"city": "Rotterdam"
},
"geometry": {
"type": "Point",
"coordinates": [4.256114038, 51.82034259]
}
}
GeoJSON - Point
companyLayer = L.geoJson(geoData, {
pointToLayer: function (feature, latlng) {
var marker = L.circleMarker(latlng, regularStyle);
return marker;
},
onEachFeature: function (feature, layer) {
layer.on('click', function (event) {
}
}
});
“Company Layer”
var svg = d3.select(
map.getPanes().overlayPane)
.append('svg');
var networkLayer = svg.append('g')
.attr('class', 'leaflet-zoom-hide');
“Network Layer”
var transform = d3.geo.transform(
{point: projectPoint});
var path = d3.geo.path().projection(transform)
.pointRadius(function (feature) {
return feature.properties.primary ?
largePointRadius : smallPointRadius;
});
Points!
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[4.37196,51.9017],
[4.48687,51.9054]
]
}
}
GeoJSON - Line
defs.append('linearGradient') .attr('id', 'networkLineGradientWest') .attr('spreadMethod', 'pad') .selectAll('stop').data([ {offset: '10%', color: colorRed}, {offset: '50%', color: colorGrey}, {offset: '90%', color: colorBlue} ]) .enter().append('stop') .attr('offset', function (d) { return d.offset; }) .attr('stop-color', function (d) { return d.color; });
Gradients!
feature
.transition()
.duration(2000)
.style('opacity', 1);
Animation!
(function repeat() { element = element.transition() .duration(300) .style('stroke-width', 12) .transition() .duration(300) .style('stroke-width', 2) .ease('sine') .each('end', repeat);})();
More animation!
And lots more…• company editor • network editor • login dialog • chart • filtering • LinkedIn data • Gravatars • splash screen • slide in animations
AngularJS
Demo!
Take Home
Graph databases are awesome!
Maps are great fun!