D3.js - d3.geo API

Siehe auch:

d3.js

Links

http://enjalot.github.io/intro-d3/maptime/geo/#data //
http://bl.ocksplorer.org/#/search/d3.geo
http://enjalot.github.io/intro-d3/maptime/examples/
https://github.com/d3/d3-geo (d3/d3-geo Erweiterung)
https://medium.com/@aendrew/creating-topojson-using-d3-v4-10838d1a9538 Ausführlicher Artikel zu Geodatenvisualisierung und zu div. Tools. Kommandozeilen Chaining um alle Schritte vom .shp bis topojson zu automatisieren. Online Tools...

= TopoJSON

Link

https://cdnjs.com/libraries/topojson (schneller Download)
https://unpkg.com/topojson@3.0.2/dist/topojson.min.js
https://github.com/topojson (Main Repository, Alle Tools)

TopoJSON ist eigentlich eine Erweiterung von GeoJSON, mit der man Topologien effektiver Kodieren kann. Es gibt verschiedene Tools zum umwandeln zwischen Topo und GeoJSON, vereinfachen von Daten, Mergen, Client und Serverversionen... Für D3JS nutzt man die Lib um topojson in geojson umzuwandeln.

Beispiele

http://bl.ocks.org/mapsam/6081504 (Basic Topojson)

Troubleshooting

Mehrere JSON Dateien laden

Hier sollte man zuerst die Daten über einen Queue laden. Wenn nicht kann man z.B. die Projection nicht zuverlässig anwenden. Problematisch ist die synchrone Ausführung aller d3 Renderings. Wenn in einem eine Projektion definiert wird kann es z.B. sein dasss diesen bei der Ausführung des anderen Objekts noch nicht verfügbar ist.

http://bl.ocks.org/rgdonohue/ede89ea3aff7c876fdcc (geojson)
http://bl.ocks.org/mapsam/6090056 (topojson)
https://github.com/d3/d3-queue

queue()
	.defer(d3.json, 'states.json')
	.defer(d3.json, 'cities.json')
	.await(ready);

function ready(error, states, cities) {

	svg.append('path')
		.datum(topojson.feature(states, states.objects.usStates))
			.attr('d', path)
			.attr('class', 'states');

	svg.selectAll('.cities')
		.data(cities.features)
		.enter()
		.append('path')
		.attr('d', path.pointRadius(5))
		.attr('class', 'cities');
}