Eine Karte in Perfektion: Mit D3.js schöne Webkarten erstellen
Veröffentlicht: 2022-03-11Data Driven Documents oder D3.js ist „eine JavaScript-Bibliothek zur Manipulation von Dokumenten auf der Grundlage von Daten“. Oder einfacher ausgedrückt: D3.js ist eine Datenvisualisierungsbibliothek. Es wurde von Mike Bostock mit der Idee entwickelt, die Lücke zwischen der statischen Anzeige von Daten und interaktiven und animierten Datenvisualisierungen zu schließen.
D3 ist eine leistungsstarke Bibliothek mit einer Vielzahl von Verwendungsmöglichkeiten. In diesem Tutorial werde ich eine besonders überzeugende Anwendung von D3 besprechen: das Erstellen von Karten. Wir gehen auf die allgemeinen Herausforderungen beim Erstellen einer nützlichen und informativen Webkarte ein und zeigen, wie D3.js in jedem Fall fähigen JavaScript-Entwicklern alles gibt, was sie brauchen, damit Karten schön aussehen und sich gut anfühlen.
Wofür wird D3.js verwendet?
D3.js kann beliebige Daten an ein Document Object Model (DOM) binden und dann durch die Verwendung von JavaScript, CSS, HTML und SVG Transformationen auf das Dokument anwenden, die von diesen Daten gesteuert werden. Das Ergebnis kann eine einfache HTML-Ausgabe oder interaktive SVG-Diagramme mit dynamischem Verhalten wie Animationen, Übergängen und Interaktion sein. Alle Datentransformationen und Renderings werden clientseitig im Browser durchgeführt.
Im einfachsten Fall kann D3.js verwendet werden, um ein DOM zu manipulieren. Hier ist ein einfaches Beispiel, bei dem D3.js verwendet wird, um einem leeren Dokumenttext ein Absatzelement mit „Hello World“-Text hinzuzufügen:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Hello World</title> <script src="http://d3js.org/d3.v3.min.js"></script> </head> <body> <script type="text/javascript"> d3.select("body").append("p").text("Hello World"); </script> </body> </html>Die Stärke von D3.js liegt jedoch in seiner Fähigkeit zur Datenvisualisierung. Beispielsweise können damit Diagramme erstellt werden. Es kann verwendet werden, um animierte Diagramme zu erstellen. Es kann sogar verwendet werden, um verschiedene verbundene Diagramme zu integrieren und zu animieren.
D3 für Webkarten und Visualisierung geografischer Daten
Aber D3.js kann für viel mehr als nur DOM-Manipulationen oder zum Zeichnen von Diagrammen verwendet werden. D3.js ist extrem leistungsfähig, wenn es um den Umgang mit geografischen Informationen geht. Das Bearbeiten und Präsentieren von geografischen Daten kann sehr schwierig sein, aber das Erstellen einer Karte mit D3.js ist recht einfach.
Hier ist ein D3.js-Beispiel, das eine Weltkarte basierend auf den Daten zeichnet, die in einem JSON-kompatiblen Datenformat gespeichert sind. Sie müssen nur die Größe der Karte und die zu verwendende geografische Projektion definieren (dazu später mehr), ein SVG-Element definieren, es an das DOM anhängen und die Kartendaten mit JSON laden. Das Kartenstyling erfolgt über CSS.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 World Map</title> <style> path { stroke: white; stroke-width: 0.5px; fill: black; } </style> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://d3js.org/topojson.v0.min.js"></script> </head> <body> <script type="text/javascript"> var width = 900; var height = 600; var projection = d3.geo.mercator(); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var path = d3.geo.path() .projection(projection); var g = svg.append("g"); d3.json("world-110m2.json", function(error, topology) { g.selectAll("path") .data(topojson.object(topology, topology.objects.countries) .geometries) .enter() .append("path") .attr("d", path) }); </script> </body> </html>Geografische Daten für D3
Beachten Sie für dieses D3.js-Lernprogramm, dass die Kartenerstellung am besten mit Daten funktioniert, die in JSON-Formaten formatiert sind, insbesondere mit den GeoJSON- und TopoJSON-Spezifikationen.
GeoJSON ist „ein Format zum Codieren einer Vielzahl von geografischen Datenstrukturen“. Es wurde entwickelt, um diskrete Geometrieobjekte darzustellen, die in Feature-Sammlungen von Name/Wert-Paaren gruppiert sind.
TopoJSON ist eine Erweiterung von GeoJSON, die Topologien codieren kann, bei denen Geometrien „aus gemeinsamen Liniensegmenten, die Bögen genannt werden, zusammengefügt werden“. TopoJSON eliminiert Redundanzen, indem relationale Informationen zwischen geografischen Merkmalen gespeichert werden, nicht nur räumliche Informationen. Infolgedessen ist die Geometrie viel kompakter und kombinierter, wenn Geometrien Features gemeinsam haben. Dies führt zu einer um 80 % kleineren typischen TopoJSON-Datei als ihr GeoJSON-Äquivalent.
So werden beispielsweise bei einer Karte mit mehreren aneinander grenzenden Ländern die gemeinsamen Teile der Grenzen zweimal in GeoJSON gespeichert, einmal für jedes Land auf beiden Seiten der Grenze. In TopoJSON ist es nur eine Zeile.
Kartenbibliotheken: Google Maps und Leaflet.js
Heute sind die beliebtesten Kartenbibliotheken Google Maps und Leaflet. Sie wurden entwickelt, um schnell und einfach „slippy maps“ ins Web zu bringen. „Slippy Maps“ ist ein Begriff, der sich auf moderne JavaScript-basierte Webkarten bezieht, die das Zoomen und Schwenken auf der Karte ermöglichen.
Leaflet ist eine großartige Alternative zu Google Maps. Es ist eine Open-Source-JavaScript-Bibliothek, die entwickelt wurde, um mobilfreundliche interaktive Karten zu erstellen, wobei Einfachheit, Leistung und Benutzerfreundlichkeit im Vordergrund standen. Leaflet ist am besten, wenn es die große Auswahl an rasterbasierten Karten nutzt, die im Internet verfügbar sind, und bietet die Einfachheit der Arbeit mit gekachelten Karten und deren Präsentationsmöglichkeiten.
Leaflet kann mit großem Erfolg in Kombination mit den Datenbearbeitungsfunktionen von D3.js und zur Verwendung von D3.js für vektorbasierte Grafiken verwendet werden. Ihre Kombination bringt das Beste aus beiden Bibliotheken heraus.
Google Maps sind schwieriger mit D3.js zu kombinieren, da Google Maps nicht Open Source ist. Es ist möglich, Google Maps und D3 zusammen zu verwenden, aber dies ist meistens darauf beschränkt, Daten mit D3.js über Google Maps-Hintergrundkarten zu legen. Eine tiefere Integration ist ohne Hacking nicht wirklich möglich.
Projektionen - Jenseits des sphärischen Mercators
Die Frage, wie Karten der 3-dimensionalen sphärischen Erde auf 2-dimensionale Oberflächen projiziert werden können, ist ein altes und komplexes Problem. Die Auswahl der besten Projektion für eine Karte ist eine wichtige Entscheidung für jede Webkarte.
In unserem einfachen D3.js-Tutorial zur Weltkarte oben haben wir das sphärische Mercator-Projektionskoordinatensystem verwendet, indem wir d3.geo.mercator() . Diese Projektion wird auch als Web Mercator bezeichnet. Diese Projektion wurde von Google populär gemacht, als sie Google Maps einführten. Später übernahmen auch andere Webdienste die Projektion, nämlich OpenStreetMap, Bing Maps, Here Maps und MapQuest. Dies hat Spherical Mercator zu einer sehr beliebten Projektion für Online-Slippy-Maps gemacht.
Alle Mapping-Bibliotheken unterstützen die sphärische Mercator-Projektion von Haus aus. Wenn Sie andere Projektionen verwenden möchten, müssen Sie beispielsweise die Proj4js-Bibliothek verwenden, die jede Transformation von einem Koordinatensystem in ein anderes durchführen kann. Im Fall von Leaflet gibt es ein Proj4Leaflet-Plugin. Im Fall von Google Maps gibt es, nun ja, nichts.
D3.js bringt kartografische Projektionen auf eine ganz neue Ebene mit integrierter Unterstützung für viele verschiedene geografische Projektionen. D3.js modelliert geografische Projektionen als vollständige geometrische Transformationen, was bedeutet, dass D3.js, wenn gerade Linien auf Kurven projiziert werden, konfigurierbares adaptives Resampling anwendet, um Linien zu unterteilen und Projektionsartefakte zu eliminieren. Das Extended Geographic Projections D3-Plugin erhöht die Anzahl der unterstützten Projektionen auf über 40. Es ist sogar möglich, eine ganz neue benutzerdefinierte Projektion mit d3.geo.projection und d3.geo.projectionMutator zu erstellen.
Rasterkarten
Wie bereits erwähnt, liegt eine der Hauptstärken von D3.js in der Arbeit mit Vektordaten. Um Rasterdaten zu verwenden, besteht die Möglichkeit, D3.js mit Leaflet zu kombinieren. Aber es gibt auch eine Option, alles nur mit D3.js zu machen, indem man d3.geo.tile verwendet, um rutschige Karten zu erstellen. Selbst mit nur D3.js allein machen die Leute erstaunliche Dinge mit Rasterkarten.
Vektormanipulation im laufenden Betrieb
Eine der größten Herausforderungen in der klassischen Kartographie ist die Kartenverallgemeinerung. Sie möchten möglichst detaillierte Geometrie haben, aber diese Daten müssen an den Maßstab der angezeigten Karte angepasst werden. Eine zu hohe Datenauflösung verlängert die Downloadzeit und verlangsamt das Rendern, während eine zu niedrige Auflösung Details und topologische Beziehungen ruiniert. Rutschige Karten, die Vektordaten verwenden, können bei der Kartenverallgemeinerung zu einem großen Problem werden.
Eine Möglichkeit besteht darin, die Karte im Voraus zu verallgemeinern: verschiedene Datensätze in unterschiedlichen Auflösungen zu haben und dann den entsprechenden Datensatz für den aktuell ausgewählten Maßstab anzuzeigen. Doch das vervielfacht Datensätze, erschwert die Datenpflege und ist fehleranfällig. Die meisten Mapping-Bibliotheken sind jedoch auf diese Option beschränkt.
Die bessere Lösung ist die Kartenverallgemeinerung im laufenden Betrieb. Und hier kommt wieder D3.js mit seinen leistungsstarken Datenbearbeitungsfunktionen. D3.js ermöglicht die Linienvereinfachung im Browser.
Ich will mehr!
D3.js ist nicht leicht zu beherrschen und hat eine steile Lernkurve. Es ist notwendig, mit vielen Technologien vertraut zu sein, nämlich mit JavaScript-Objekten, der jQuery-Verkettungssyntax, SVG und CSS und natürlich mit der API von D3. Obendrein muss man ein bisschen Designgeschick haben, um am Ende schöne Grafiken zu erstellen. Glücklicherweise hat D3.js eine große Community und es gibt viele Ressourcen, in die sich die Leute einarbeiten können. Ein guter Ausgangspunkt für das Erlernen von D3 sind diese Tutorials.
Wenn Sie gerne lernen, indem Sie Beispiele untersuchen, hat Mike Bostock mehr als 600 D3.js-Beispiele auf seiner Webseite geteilt. Alle D3.js-Beispiele verfügen über ein Git-Repository zur Versionskontrolle und sind forkbar, klonbar und kommentierbar.
Wenn Sie CartoDB verwenden, werden Sie erfreut sein zu hören, dass CartoDB D3-Karten zum Kinderspiel macht.
Und als kleinen Bonus am Ende ist hier eines meiner Lieblingsbeispiele, das die erstaunlichen Dinge zeigt, zu denen D3 fähig ist:
- earth, eine globale animierte 3D-Windkarte der ganzen Welt, die mit D3.js erstellt wurde. Earth ist eine Visualisierung der globalen Wetterbedingungen, basierend auf Wettervorhersagen, die von Supercomputern der National Centers for Environmental Prediction, NOAA / National Weather Service erstellt und in JSON konvertiert wurden. Sie können angezeigte Daten wie Höhen für die Windgeschwindigkeitsmesswerte anpassen, überlagerte Daten ändern und sogar die Erdprojektion ändern.