geo madness with neo4j and the web

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!

maritimecluster.org

kees@angular.nu

Take Home

Graph databases are awesome!

Maps are great fun!