Interaktive Karten mit d3.js: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
(Die Seite wurde neu angelegt: „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…“)
 
Zeile 5: Zeile 5:
 
  http://www.naturalearthdata.com/ (Geodaten)
 
  http://www.naturalearthdata.com/ (Geodaten)
 
  http://www.gdal.org/ (Geospatial Data Abstraction Library - GDAL, Tools zum Arbeiten mit Geodaten)
 
  http://www.gdal.org/ (Geospatial Data Abstraction Library - GDAL, Tools zum Arbeiten mit Geodaten)
 +
 +
== Beispieldateien ==
 +
[[:File:ne_10m_populated_places.zip]]
 +
[[:File:ne_10m_admin_1_states_provinces_lakes.zip]]
 +
[[:File:ne_10m_admin_0_countries_lakes.zip]]
  
 
== Geodaten konvertieren - Tools installieren ==
 
== Geodaten konvertieren - Tools installieren ==
Zeile 31: Zeile 36:
 
Konvertierung von .shp nach .json:
 
Konvertierung von .shp nach .json:
 
  ogr2ogr -f GeoJSON meinJsonFile.json meinShapeFile.shp
 
  ogr2ogr -f GeoJSON meinJsonFile.json meinShapeFile.shp
 +
 +
Wir machen das Beispiel aus dem in den Links genannten Tutorial.
 +
 +
Beginnend mit dem Country Shapefile. Im ne_10m_admin_0_countries_lakes Verzeichnis:
 +
 +
ogr2ogr -f GeoJSON countries.json ne_10m_admin_0_countries_lakes.shp
 +
Dies erzeugt ein GeoJSON File "countries.json" from the shapefile. Wenn man sich die Datei anschaut sieht man eine Menge Zahlen und Attriubute wie:
 +
ADMIN, SU_A3, NAME
 +
Außerdem alle Länder inklusive der Antarktis
 +
 +
'''Exclude Antarctica'''
 +
 +
Als Übung entfernen wir die Antarktis. In ogr2ogr kann man ähnlich wie in SQL Conditional Statements nutzen:
 +
 +
ogr2ogr -f GeoJSON -where "SU_A3 <> 'ATA'" countries.json ne_10m_admin_0_countries_lakes.shp
 +
entfernt die Antarktis.
 +
 +
''' Attribute wählen '''
 +
 +
Das GeoJSON file ist unteranderem so groß, da es eine Menge Attribute enthält. Viele davon benötigen wir nicht. WEnn wir im nächsten Schritt '''nach Topjson''' umwandeln suchen wir uns nur die nötigsten heraus: '''SU_A3 und NAME'''
 +
 +
topojson --id-property SU_A3 -p name=NAME -p name -o countries.topo.json countries.json
 +
 +
 +
The first -p converts attribute name from uppercase to lowercase, and the second -p picks up 'name' as an attribute. Topojson has less than 10% of the GeoJSON file size, but it still has 2.5MB, which is heavy for web applications. We need to reduce the file size further.

Version vom 12. Oktober 2018, 09:20 Uhr

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)

Beispieldateien

File:ne_10m_populated_places.zip File:ne_10m_admin_1_states_provinces_lakes.zip File:ne_10m_admin_0_countries_lakes.zip

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

Wir machen das Beispiel aus dem in den Links genannten Tutorial.

Beginnend mit dem Country Shapefile. Im ne_10m_admin_0_countries_lakes Verzeichnis:

ogr2ogr -f GeoJSON countries.json ne_10m_admin_0_countries_lakes.shp

Dies erzeugt ein GeoJSON File "countries.json" from the shapefile. Wenn man sich die Datei anschaut sieht man eine Menge Zahlen und Attriubute wie:

ADMIN, SU_A3, NAME

Außerdem alle Länder inklusive der Antarktis

Exclude Antarctica

Als Übung entfernen wir die Antarktis. In ogr2ogr kann man ähnlich wie in SQL Conditional Statements nutzen:

ogr2ogr -f GeoJSON -where "SU_A3 <> 'ATA'" countries.json ne_10m_admin_0_countries_lakes.shp

entfernt die Antarktis.

Attribute wählen

Das GeoJSON file ist unteranderem so groß, da es eine Menge Attribute enthält. Viele davon benötigen wir nicht. WEnn wir im nächsten Schritt nach Topjson umwandeln suchen wir uns nur die nötigsten heraus: SU_A3 und NAME

topojson --id-property SU_A3 -p name=NAME -p name -o countries.topo.json countries.json


The first -p converts attribute name from uppercase to lowercase, and the second -p picks up 'name' as an attribute. Topojson has less than 10% of the GeoJSON file size, but it still has 2.5MB, which is heavy for web applications. We need to reduce the file size further.