Interaktive Karten mit d3.js - Versionsgeschichte

Steff am 19. Oktober 2018 um 13:16 Uhr

2018-10-19T13:16:34Z

Steff am 12. Oktober 2018 um 09:07 Uhr

2018-10-12T09:07:27Z

Steff am 12. Oktober 2018 um 09:02 Uhr

2018-10-12T09:02:00Z

Steff am 12. Oktober 2018 um 08:58 Uhr

2018-10-12T08:58:40Z

Steff: /* Beispieldateien */

2018-10-12T08:20:32Z

Beispieldateien

Steff am 12. Oktober 2018 um 08:20 Uhr

2018-10-12T08:20:14Z

93.208.102.183: 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…“

2018-10-12T08:10:28Z

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…“

Neue Seite

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)

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

← Nächstältere Version		Version vom 19. Oktober 2018, 13:16 Uhr
Zeile 1:		Zeile 1:
		+	Siehe auch
		+
		+	[[D3.js - Daten visualisieren]]
		+
	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.		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.

@@ Zeile 11: / Zeile 11: @@
   [[:File:ne_10m_admin_1_states_provinces_lakes.zip]]
   [[:File:ne_10m_admin_0_countries_lakes.zip]]
 == Geodaten konvertieren - Tools installieren ==

← Nächstältere Version		Version vom 12. Oktober 2018, 09:02 Uhr
Zeile 106:		Zeile 106:
	ogr2ogr -f GeoJSON -where "ADM0_A3 = 'JPN' and SCALERANK <= 6" cities.json ne_10m_populated_places.shp		ogr2ogr -f GeoJSON -where "ADM0_A3 = 'JPN' and SCALERANK <= 6" cities.json ne_10m_populated_places.shp
	topojson -p name=NAME -p state=ADM1NAME -p name -p state -o cities_jpn.topo.json cities.json		topojson -p name=NAME -p state=ADM1NAME -p name -p state -o cities_jpn.topo.json cities.json
		+
		+	== Visualisierung mit d3 ==
		+	Jetzt können die Daten mit d3.js visualisiert werden.
		+
		+	Das Beispiel nutzt hauptsächlich die d3 geo library. Der Code ist einfach gehalten und kann deutlich verbessert werden.
		+	<syntaxhighlight lang="html5">
		+	<script src="//d3js.org/d3.v3.min.js"></script>
		+	<script src="//d3js.org/topojson.v1.min.js"></script>
		+	<script>
		+	var m_width = $("#map").width(),
		+	width = 938,
		+	height = 500,
		+	country,
		+	state;
		+
		+	var projection = d3.geo.mercator()
		+	.scale(150)
		+	.translate([width / 2, height / 1.5]);
		+
		+	var path = d3.geo.path()
		+	.projection(projection);
		+
		+	var svg = d3.select("#map").append("svg")
		+	.attr("preserveAspectRatio", "xMidYMid")
		+	.attr("viewBox", "0 0 " + width + " " + height)
		+	.attr("width", m_width)
		+	.attr("height", m_width * height / width);
		+
		+	svg.append("rect")
		+	.attr("class", "background")
		+	.attr("width", width)
		+	.attr("height", height)
		+	.on("click", country_clicked);
		+
		+	var g = svg.append("g");
		+
		+	d3.json("/json/countries.topo.json", function(error, us) {
		+	g.append("g")
		+	.attr("id", "countries")
		+	.selectAll("path")
		+	.data(topojson.feature(us, us.objects.countries).features)
		+	.enter()
		+	.append("path")
		+	.attr("id", function(d) { return d.id; })
		+	.attr("d", path)
		+	.on("click", country_clicked);
		+	});
		+
		+	function zoom(xyz) {
		+	g.transition()
		+	.duration(750)
		+	.attr("transform", "translate(" + projection.translate() + ")scale(" + xyz[2] + ")translate(-" + xyz[0] + ",-" + xyz[1] + ")")
		+	.selectAll(["#countries", "#states", "#cities"])
		+	.style("stroke-width", 1.0 / xyz[2] + "px")
		+	.selectAll(".city")
		+	.attr("d", path.pointRadius(20.0 / xyz[2]));
		+	}
		+
		+	function get_xyz(d) {
		+	var bounds = path.bounds(d);
		+	var w_scale = (bounds[1][0] - bounds[0][0]) / width;
		+	var h_scale = (bounds[1][1] - bounds[0][1]) / height;
		+	var z = .96 / Math.max(w_scale, h_scale);
		+	var x = (bounds[1][0] + bounds[0][0]) / 2;
		+	var y = (bounds[1][1] + bounds[0][1]) / 2 + (height / z / 6);
		+	return [x, y, z];
		+	}
		+
		+	function country_clicked(d) {
		+	g.selectAll(["#states", "#cities"]).remove();
		+	state = null;
		+
		+	if (country) {
		+	g.selectAll("#" + country.id).style('display', null);
		+	}
		+
		+	if (d && country !== d) {
		+	var xyz = get_xyz(d);
		+	country = d;
		+
		+	if (d.id == 'USA' \|\| d.id == 'JPN') {
		+	d3.json("/json/states_" + d.id.toLowerCase() + ".topo.json", function(error, us) {
		+	g.append("g")
		+	.attr("id", "states")
		+	.selectAll("path")
		+	.data(topojson.feature(us, us.objects.states).features)
		+	.enter()
		+	.append("path")
		+	.attr("id", function(d) { return d.id; })
		+	.attr("class", "active")
		+	.attr("d", path)
		+	.on("click", state_clicked);
		+
		+	zoom(xyz);
		+	g.selectAll("#" + d.id).style('display', 'none');
		+	});
		+	} else {
		+	zoom(xyz);
		+	}
		+	} else {
		+	var xyz = [width / 2, height / 1.5, 1];
		+	country = null;
		+	zoom(xyz);
		+	}
		+	}
		+
		+	function state_clicked(d) {
		+	g.selectAll("#cities").remove();
		+
		+	if (d && state !== d) {
		+	var xyz = get_xyz(d);
		+	state = d;
		+
		+	country_code = state.id.substring(0, 3).toLowerCase();
		+	state_name = state.properties.name;
		+
		+	d3.json("/json/cities_" + country_code + ".topo.json", function(error, us) {
		+	g.append("g")
		+	.attr("id", "cities")
		+	.selectAll("path")
		+	.data(topojson.feature(us, us.objects.cities).features.filter(function(d) { return state_name == d.properties.state; }))
		+	.enter()
		+	.append("path")
		+	.attr("id", function(d) { return d.properties.name; })
		+	.attr("class", "city")
		+	.attr("d", path.pointRadius(20 / xyz[2]));
		+
		+	zoom(xyz);
		+	});
		+	} else {
		+	state = null;
		+	country_clicked(country);
		+	}
		+	}
		+
		+	$(window).resize(function() {
		+	var w = $("#map").width();
		+	svg.attr("width", w);
		+	svg.attr("height", w * height / width);
		+	});
		+	</script>
		+	</syntaxhighlight>

@@ Zeile 5: / Zeile 5: @@
   http://www.naturalearthdata.com/ (Geodaten)
   http://www.gdal.org/ (Geospatial Data Abstraction Library - GDAL, Tools zum Arbeiten mit Geodaten)
 == Beispieldateien ==
@@ Zeile 32: / Zeile 33: @@
   sudo npm install -g topojson
-== Konvertieren und vereinfachen ==
+== Konvertieren und Vereinfachen ==
-Konvertierung von .shp nach .json:
+=== Konvertierung von .shp nach .json===
   ogr2ogr -f GeoJSON meinJsonFile.json meinShapeFile.shp
@@ Zeile 46: / Zeile 47: @@
 Außerdem alle Länder inklusive der Antarktis
-'''Exclude Antarctica'''
+=== Antarktis ausschließen ===
 Als Übung entfernen wir die Antarktis. In ogr2ogr kann man ähnlich wie in SQL Conditional Statements nutzen:
@@ Zeile 53: / Zeile 54: @@
 entfernt die Antarktis.
-''' Attribute wählen '''
+=== Umwandlung nach Topojson Attribute auswä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'''
+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.
+'''Hinweis zu Topojson:''' Topojson ist eine GeoJSON Erweiterung. Im Prinzip arbeiten wir also immer noch mit GeoJSON Daten, das Datenformat ist jedoch komplexer. Topojson kann Daten in vielen Fällen stark reduzieren. Das funktioniert vor allem bei angrenzenden Formen (z.B. Bundesländer) In anderen Fällen wie z.B. unorganisierten Punktdaten (z.B. Städte) bringt es nichts. Topojson hat noch einige weitere Funktionen, die mit reinen GeoJSON Daten nicht möglich sind.

@@ Zeile 7: / Zeile 7: @@
 == Beispieldateien ==
-[[:File:ne_10m_populated_places.zip]]
+ [[:File:ne_10m_populated_places.zip]]
-[[:File:ne_10m_admin_1_states_provinces_lakes.zip]]
+ [[:File:ne_10m_admin_1_states_provinces_lakes.zip]]
-[[:File:ne_10m_admin_0_countries_lakes.zip]]
+ [[:File:ne_10m_admin_0_countries_lakes.zip]]
 == Geodaten konvertieren - Tools installieren ==