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

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":[[[-87.359296,35.00118], [-85.606675,34.984749],[-85.431413,34.124869], [-85.184951,32.859696],[-85.069935,32.580372], [-84.960397,32.421541],[-85.004212,32.322956], [-84.889196,32.262709],[-85.058981,32.13674]... ]] } }...

5 coordinates [-85.606675,34.984749] 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 http://bl.ocks.org/mbostock/3711652

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: http://bl.ocks.org/mbostock/4060606 http://bl.ocks.org/mbostock/4060606 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: http://1.usa.gov/XWUSrY http://1.usa.gov/XWUSrY Geocoding service (Städenamen zu Lat/Lon): http://www.gpsvisualizer.com/geocoder/ http://www.gpsvisualizer.com/geocoder/

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: http://www.naturalearthdata.com/http://www.naturalearthdata.com/ 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: http://teczno.com/squareshttp://teczno.com/squares 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