Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Geomapping. Themen Heute GeoJSON Paths Projections Features Daten beschaffen Projekte weiter bringen.

Ähnliche Präsentationen


Präsentation zum Thema: "Geomapping. Themen Heute GeoJSON Paths Projections Features Daten beschaffen Projekte weiter bringen."—  Präsentation transkript:

1 Geomapping

2 Themen Heute GeoJSON Paths Projections Features Daten beschaffen Projekte weiter bringen

3 JSON, GeoJSON GeoJSON: JSON-basierter Standard um Geodaten für web applications zu kodieren Kein ganz anderes Format – nur eine spezifische Verwendung von JSON Bitte laden Sie die zip-Datei und starten Sie das Beispiel 01 mit Hilfe von XAMPP

4 Bsp: us-states.json "type":"FeatureCollection", "features":[ { "type":"Feature", "id":"01", "properties":{"name":"Alabama"}, "geometry":{ "type":"Polygon”, "coordinates":[[[ , ], [ , ],[ , ], [ , ],[ , ], [ , ],[ , ], [ , ],[ , ]... ]] } }...

5 coordinates [ , ] LongitudeLatitude 1.!2.! (nicht lat/lon – GeoJSON lon/lat) Vertikalhorizontal

6 JSON, GeoJSON GeoJSON: JSON-basierter Standard um Geodaten für web applications zu kodieren Kein ganz anderes Format – nur eine spezifische Verwendung von JSON Latitude Longitude bilden gemeinsam ein Netz, das die ganze Welt umschließt Lon/Lat müssen für den Bildschirm gemapped werden (zu x/y Werten)

7 Paths: Los geht‘s... 1.path generator: var path = d3.geo.path(); -> translating GeoJSON coordinates in SVG path codes 2.Load data: d3.json("us-states.json", function(json) { svg.selectAll("path").data(json.features).enter().append("path").attr("d", path); });

8 Load data d3.json("us-states.json", function(json) { Argument 1: Pfad zur Argument 2 Datei als stringcallback function (asynchron)

9 Handling data loading Errors d3.json("us-states.json", function(error, data) { if (error)... else.... dataset = data; // Wenn geladen eine Kopie speichern generateVis(); // Vis erstellen...

10 Bind data to path Ein Pfad für jedes feature der Daten: svg.selectAll("path").data(json.features).enter().append("path").attr("d", path);d (path data attribute) wird auf den path generator verwiesen

11 Projections Problem: die Welt ist nicht 2D – der Bildschirm schon Eine Projektion ist ein Algorithmus der das Problem mit einem Kompromiss löst

12 Projections in d3 1.var projection = d3.geo.albersUsa().translate([w/2, h/2]);.scale([500]); 2.var path = d3.geo.path().projection(projection);

13 Dateviz mit maps Choropleth: Punkte hinzufügen (Beispiel aus Ordner ansehen)

14 Punkte hinzufügen Städte und zusätzliche Informationen als Kontextinformation angeben Beispiel für zusätzliche Daten: Geocoding service (Städenamen zu Lat/Lon):

15 Daten für Punkte laden und darstellen

16 Durchmesser durch Daten ändern

17 Geodaten beschaffen und parsen Erste Wahl: GeoJSON file Alternative: Shapefiles (bekannt aus GIS), eine Quelle: Zip Datei (alle Dateien erstmal aufheben, benötigt wird.shp) – Auflösung (resolution) aussuchen (immer Vektordaten, deshalb sind damit nicht pixel sondern kartographischer Detailgrad gemeint) Falsche Auflösung simplifizieren: Siehe Simplify the Shapes – Zu GeoJSON konvertieren: Siehe Convert to GEOJSON

18 Links Lon/Lat: Paths: https://github.com/mbostock/d3/wiki/Geo- Paths https://github.com/mbostock/d3/wiki/Geo- Paths Projections: https://github.com/mbostock/d3/wiki/Geo- Projections https://github.com/mbostock/d3/wiki/Geo- Projections


Herunterladen ppt "Geomapping. Themen Heute GeoJSON Paths Projections Features Daten beschaffen Projekte weiter bringen."

Ähnliche Präsentationen


Google-Anzeigen