Interaktive Karten mit d3.js

D3.js ist ein Tool zur Visualisierung von Daten. Man kann auch interaktive Karten damit erstellen. Der Prozess von Gis Shape Files bis zur fertigen Karte wird hier erklärt.

Links:

http://www.tnoda.com/blog/2013-12-07 (Vorbild für dieses Tutorial)
http://www.naturalearthdata.com/ (Geodaten)
http://www.gdal.org/ (Geospatial Data Abstraction Library - GDAL, Tools zum Arbeiten mit Geodaten)

Geodaten konvertieren - Tools installieren

Wir gehen von Shapefiles aus (.shp / Quelle s.o.). Damit man die Daten für eine WebApp nutzen kann wandeln wir sie in GeoJSON Daten um. Diese wiederum in TopoJSON um die Größe zu veringern (Kurven werden dadurch etwas weniger detailiert).

Größenvergleich ausgehend von Shapefile mit ca. 9MB

Shapefile: 9MB
GeoJSON: 25 MB
Topojson: 2,5 MB

Tipp: Viele Daten gibt es mittlerweile direkt als GeoJSON. So spart man sich den ersten Schritt.

.shp -> geojson

Geht mit dem Command Line Tool ogr2ogr aus der GDAL (siehe Links)

Installation unter MacOS (mit brew):

brew install gdal

GeoJSON -> Topojson

Für die Konvertierung nach Topojson gibt es das topojson Tool. Es läßt sich über node.js installieren: Installation

sudo npm install -g topojson

Konvertieren und vereinfachen

Konvertierung von .shp nach .json:

ogr2ogr -f GeoJSON meinJsonFile.json meinShapeFile.shp