D3.js - d3.geo API: Unterschied zwischen den Versionen

Aus Wikizone
Wechseln zu: Navigation, Suche
 
(12 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt)
Zeile 1: Zeile 1:
 +
Siehe auch:
 +
[[d3.js]]
 +
[[HTML5 - Geolocation]]
 
== Links ==
 
== Links ==
−
http://enjalot.github.io/intro-d3/maptime/geo/#data //
+
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...
 +
 
 +
== Erweiterungen ==
 +
=== 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 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 Topojson Lib um topojson in geojson umzuwandeln.
  
 
== Beispiele ==
 
== Beispiele ==
 +
http://bl.ocks.org/mapsam/6081504 (Basic Topojson)
 +
http://bl.ocks.org/piwodlaiwo/cbce7d163349da5c615a08b6e7a12d69 (Schöne Weltkarte mit Tooltips in D3v4)
 +
https://bl.ocks.org/piwodlaiwo (Viele Beispiele vom Autor des obigen Beispiels)
 +
Rotate & Zoom
 +
https://www.jasondavies.com/maps/rotate/ (RotateTheWorld Basics)
 +
https://beta.observablehq.com/@mbostock/d3-versor-dragging (RotateTheWorld + besseres Dragging mit Versors Plugin)
 +
https://bl.ocks.org/vasturiano/825ea5fe26c1dd9172efc3dc849e6fe3 (+Zoom)
 +
 +
== Troubleshooting ==
 +
=== Mein GeoJSON File funktioniert nicht - Fehler beim Projizieren ===
 +
Wenn die Syntax korrekt ist, kann es sein dass die Daten bereits eine Projektion beinhalten. Das heißt die Längen und Breitengrade der Weltkugel wurden bereits in Punkte auf einer flachen Karte umgerechnet. Man kann das an den Werten erkennen. Bereits projizierte Daten müssen in D3 nicht mehr über ein projection Objekt umgerechnet werden. Allerdings muss die Projektion aller Daten passen.
 +
 +
=== 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
 +
<pre>
 +
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');
 +
}
 +
</pre>

Aktuelle Version vom 25. Oktober 2018, 07:58 Uhr

Siehe auch: 

d3.js
HTML5 - Geolocation

Links[Bearbeiten]

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...

Erweiterungen[Bearbeiten]

TopoJSON[Bearbeiten]

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 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 Topojson Lib um topojson in geojson umzuwandeln.

Beispiele[Bearbeiten]

http://bl.ocks.org/mapsam/6081504 (Basic Topojson)
http://bl.ocks.org/piwodlaiwo/cbce7d163349da5c615a08b6e7a12d69 (Schöne Weltkarte mit Tooltips in D3v4)
https://bl.ocks.org/piwodlaiwo (Viele Beispiele vom Autor des obigen Beispiels)
Rotate & Zoom
https://www.jasondavies.com/maps/rotate/ (RotateTheWorld Basics)
https://beta.observablehq.com/@mbostock/d3-versor-dragging (RotateTheWorld + besseres Dragging mit Versors Plugin)
https://bl.ocks.org/vasturiano/825ea5fe26c1dd9172efc3dc849e6fe3 (+Zoom)

Troubleshooting[Bearbeiten]

Mein GeoJSON File funktioniert nicht - Fehler beim Projizieren[Bearbeiten]

Wenn die Syntax korrekt ist, kann es sein dass die Daten bereits eine Projektion beinhalten. Das heißt die Längen und Breitengrade der Weltkugel wurden bereits in Punkte auf einer flachen Karte umgerechnet. Man kann das an den Werten erkennen. Bereits projizierte Daten müssen in D3 nicht mehr über ein projection Objekt umgerechnet werden. Allerdings muss die Projektion aller Daten passen.

Mehrere JSON Dateien laden[Bearbeiten]

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');
}
Abgerufen von „https://wiki.stephanschlegel.de/index.php?title=D3.js_-_d3.geo_API&oldid=23458“