geo madness with neo4j and the web
TRANSCRIPT
![Page 1: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/1.jpg)
Geo Madness with Neo4J and
the Web
Kees de Kooter
![Page 2: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/2.jpg)
![Page 3: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/3.jpg)
![Page 4: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/4.jpg)
SRM
RDM
MEMBER_OF
SMIT
MEMBER_OF
IHC
MEMBER_OF
ACMESUPPLIER_OF
SUPPLIER_OF
SUPPLIER_OF
![Page 5: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/5.jpg)
![Page 6: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/6.jpg)
![Page 7: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/7.jpg)
![Page 8: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/8.jpg)
SRM
RDM
MEMBER_OF
SMIT
MEMBER_OF
IHC
MEMBER_OF
ACMESUPPLIER_OF
SUPPLIER_OF
SUPPLIER_OF
![Page 9: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/9.jpg)
MATCH (c:Company)-[:MEMBER_OF]->(n:Community)
WHERE n.id = 7
RETURN c, n LIMIT 10
![Page 10: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/10.jpg)
![Page 11: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/11.jpg)
MATCH (c:Company)
WHERE c.name =~ "(i?).*haven.*"
RETURN c
ORDER BY c.name LIMIT 20
![Page 12: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/12.jpg)
![Page 13: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/13.jpg)
![Page 14: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/14.jpg)
![Page 15: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/15.jpg)
GeoJSON
TopoJSON
KML
SVG
WebGL
Canvas2D
GML
![Page 16: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/16.jpg)
GeoJSON
TopoJSON
KML
SVG
WebGL
Canvas2D
GML
![Page 17: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/17.jpg)
var map = L.map('leaflet-map', {});
L.tileLayer(‘http://..mapbox.com/../{z}/{x}/{y}.png’, {}).addTo(map);
Tiles Layer
![Page 18: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/18.jpg)
![Page 19: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/19.jpg)
{
"type": "Feature",
"properties": {
"id": 11031,
"address": "Raadhuisstraat 33”,
"city": "Rotterdam"
},
"geometry": {
"type": "Point",
"coordinates": [4.256114038, 51.82034259]
}
}
GeoJSON - Point
![Page 20: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/20.jpg)
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”
![Page 21: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/21.jpg)
![Page 22: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/22.jpg)
var svg = d3.select(
map.getPanes().overlayPane)
.append('svg');
var networkLayer = svg.append('g')
.attr('class', 'leaflet-zoom-hide');
“Network Layer”
![Page 23: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/23.jpg)
var transform = d3.geo.transform(
{point: projectPoint});
var path = d3.geo.path().projection(transform)
.pointRadius(function (feature) {
return feature.properties.primary ?
largePointRadius : smallPointRadius;
});
Points!
![Page 24: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/24.jpg)
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "LineString",
"coordinates": [
[4.37196,51.9017],
[4.48687,51.9054]
]
}
}
GeoJSON - Line
![Page 25: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/25.jpg)
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!
![Page 26: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/26.jpg)
![Page 27: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/27.jpg)
feature
.transition()
.duration(2000)
.style('opacity', 1);
Animation!
![Page 28: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/28.jpg)
(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!
![Page 29: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/29.jpg)
And lots more…• company editor • network editor • login dialog • chart • filtering • LinkedIn data • Gravatars • splash screen • slide in animations
![Page 30: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/30.jpg)
AngularJS
![Page 31: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/31.jpg)
Demo!
![Page 33: Geo Madness with Neo4J and the Web](https://reader033.vdocuments.us/reader033/viewer/2022042821/55d2ce8cbb61eb946f8b4578/html5/thumbnails/33.jpg)
Take Home
Graph databases are awesome!
Maps are great fun!