16. Nov 2020
Lesedauer 9 Min.
Webkartenkönig D3js
JavaScript und die Bibliothek D3js
Eine interaktive Deutschlandkarte erstellen und mit Daten hinterlegen.
Autor
Wer die Besucher seiner Webseite mit dynamischen interaktiven Landkarten im Webbrowser beeindrucken möchte, sollte sich mit Data-Driven Documents (kurz D3) beschäftigen. D3js – siehe Bild 1 – ist eine JavaScript-Bibliothek, die es erlaubt, die DOM-Elemente von Webseiten zu verändern. Gesteuert werden die Änderungen anhand von Daten, die in CSV- oder JSON-Dateien vorliegen [1]. Im Zusammenspiel von D3js mit den Webtechnologien HTML5, SVG und CSS ergeben sich Möglichkeiten, dynamische und interaktive Landkarten im Webbrowser darzustellen, ohne dafür ein proprietäres Framework zu benutzen. Bild 2 zeigt einen Einblick in die Möglichkeiten von D3js.
Logoder Bibliothek D3js(Bild 1)
Autor
Beispielemöglicher Karten(Bild 2)
Autor
Die Bibliothek kann mithilfe der nachfolgenden Anweisung direkt online angebunden werden:
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://d3js.org/d3.v5.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
Alternativ laden Sie sie von der Herstellerseite als ZIP-Datei und entpacken sie in das Verzeichnis der Internetseite.
Das Beispielprojekt
Ziel dieses Workshops ist es, eine Karte mit den Arbeitslosenquoten der deutschen Bundesländer zu erstellen. Das fertige Ergebnis sehen Sie in Bild 3 und können es unter [2] direkt ausprobieren.
Bundesländermit Arbeitslosenquoten im Browser(Bild 3)
Autor
Zum besseren Verständnis von D3js bleiben im ersten Beispiel die für die Darstellung von Karten erforderlichen SVG-Elemente und die asynchrone Verarbeitung der einzulesenden Daten zunächst außen vor. Gestartet wird vorerst damit, in einer HTML-Datei eine mit dem <ul>-Element erstellte Aufzählungsliste unter Verwendung von D3js mit Einträgen zu füllen. Der dafür erforderliche HTML- und JavaScript-Code sieht so aus:
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./d3.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
Was D3-gesteuerte Diagramme brauchen:
<span class="hljs-tag"><<span class="hljs-name">ul</span>></span><span class="hljs-tag"></<span class="hljs-name">ul</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"> </span>
<span class="javascript"> d3.select(<span class="hljs-string">"ul"</span>) </span>
<span class="javascript"> .selectAll(<span class="hljs-string">"li"</span>) </span>
<span class="javascript"> .data([<span class="hljs-string">"HTML"</span>,<span class="hljs-string">"SVG"</span>,<span class="hljs-string">"CSS"</span>]) </span>
<span class="javascript"> .join(<span class="hljs-string">"li"</span>) </span>
<span class="javascript"> .text(<span class="hljs-function"><span class="hljs-params">d</span> =></span> d); </span>
<span class="javascript"> </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
Zunächst wird in der HTML-Datei das <ul>-Element definiert, welches im DOM-Baum des Dokuments als Eltern-Element für die einzelnen noch zu erzeugenden <li>-Kind-Elemente der Aufzählungsliste dient.Mit der Anweisung d3.select(”ul”) wird das Eltern-Element für die nachfolgenden Operationen festgelegt. Die Anweisung selectAll(”li”) ist zunächst etwas verwirrend, da im DOM-Baum etwas ausgewählt wird, was zu Beginn noch gar nicht vorhanden ist. Das hängt damit zusammen, dass der D3js-Bibliothek nicht mitgeteilt wird, wie etwas getan werden soll, sondern was man sich als Ergebnis wünscht. Damit die Bibliothek weiß, welche Daten es mit welchen DOM-Elementen synchronisieren soll, gibt es die data- und join-Aufrufe. Während die data-Methode ein Array mit den einzufügenden Aufzählungselementen enthält, gibt der join-Aufruf an, dass die <li>-Kind-Elemente im DOM-Baum mit den einzelnen Elementen des Daten-Arrays gefüllt werden sollen. Der dem join-Aufruf nachgeordneten text-Methode wird als Callback-Funktion beziehungsweise Lambda-Ausdruck das jeweilige Element des Daten-Arrays zugewiesen. Bild 4 zeigt das Ergebnis im Browser.
Von D3js erzeugteAufzählungsliste(Bild 4)
Autor
Bevor das Erstellen von Landkarten mit SVG-Elementen klappt, ist es erforderlich, dass sich Daten auch von außerhalb des Quelltextes zuführen lassen. Ziel dieses Workshops ist eine Deutschlandkarte, welche neben den Bundesländern auch die Millionenstädte Berlin, Hamburg, München und Köln zeigt. Dafür wird eine GeoJSON-formatierte Datei [3] benötigt.
GeoJSON-Daten und deren Projektion
Neben den eigentlichen GPS-Koordinaten, also den Länderumrissen als Sammlungen von Punkten (Polygone) gemäß der Simple-Feature-Access-Spezifikation [4] mit Längen- und Breitengrad notiert, enthält solch eine Datei abhängig vom jeweiligen Herausgeber auch noch Metainformationen wie etwa den Namen des Landes oder den Landestyp. Bild 5 zeigt einen Auszug der verwendeten Geo-JSON-Datei.
GeoJSON-Dateimit den Koordinaten der Bundesländer(Bild 5)
Autor
Grundsätzlich gibt es verschiedene Möglichkeiten, die Oberfläche einer Kugel auf eine zweidimensionale Karte zu projizieren. Eine absolut längen-, flächen- und winkeltreue Kartenprojektionsmethode gibt es allerdings nicht. Insbesondere bei der Abbildung größerer Erdteile in der Nähe von Nord- und Südpol kommt es teilweise zu erheblichen Verzerrungen. Daher stellt die Bibliothek mehrere Funktionen zur Projektion zur Verfügung, wie d3.geoNaturalEarth1 oder auch d3.geoMercator. Weil diese Projektionen dazu geeignet sind, die gesamte Erdkarte darzustellen, würde Deutschland auf der SVG-Projektionsfläche nicht mittig erscheinen. Daher wird mit center([10,51]) der Längen- und Breitengrad der Mitte Deutschlands angegeben und noch eine Skalierung hinzugefügt. Der komplette Ausdruck, um eine Instanz der Projektionsfunktion zu erzeugen, lautet daher:
const projection =
d3.geoMercator().center(
[<span class="hljs-number">10</span>,<span class="hljs-number">51</span>]).scale(<span class="hljs-number">2000</span>);
Die Karte erstellen
Die eigentliche Karte wird mit SVG-Path-Elementen dargestellt. Diese besitzen ein Attribut d (für data), die als Attributwerte die Zeichenkommandos für die komma- oder leerzeichengetrennten Koordinaten innerhalb des SVG-Elements enthalten. Hier ein simples Beispiel:
<span class="hljs-tag"><<span class="hljs-name">path</span> <span class="hljs-attr">d</span>=<span class="hljs-string">"M50,50L100,100"</span> <span class="hljs-attr">stroke</span>=<span class="hljs-string">"black"</span>></span><span class="hljs-tag"></<span class="hljs-name">path</span>></span>
Dieser Pfad zeichnet eine Linie von links oben nach rechts unten. Da die Konturen eines Bundeslandes in der Regel mit einigen Hundert solcher Kommandos gezeichnet werden, ist es äußerst praktisch, dass die Bibliothek D3js mit folgendem Aufruf eine Instanz einer Pfad-Generatorfunktion erzeugen und nach dem erfolgreichen Laden der GeoJSON-Datei verwenden kann:
<span class="hljs-attribute">const pathGenerator</span> =
d3.geoPath().projection(projection);
Damit später im Rahmen des Zoomens und Schwenkens der Karte alle Pfadelemente, Markierungen und Texte gemeinsam verschoben werden können, hat sich folgendes Verfahren als nützlich erwiesen: Alle Elemente werden nicht direkt dem SVG-Element unterstellt, sondern in einem SVG-Group-Element <g> gesammelt, welches sozusagen dazwischengeschaltet wird. Das Group-Element hat leider keine x- und y-Attribute, weshalb es bei Bedarf per transform-Attribut mit der translate-Funktion verschoben werden muss.
Asynchroner Zugriff und Promise
Wie bereits erwähnt erfolgt der Zugriff über die Bibliothek D3js asynchron, sodass die Programmlogik umgestaltet werden muss. So darf erst dann mit einem select-Aufruf auf die DOM-Knoten zugegriffen werden, wenn die externen Daten erfolgreich eingelesen worden sind. Da JavaScript aus Sicherheitsgründen nicht einfach auf lokale Dateien zugreifen darf, muss die zu importierende GeoJSON-Datei auf einem Webserver liegen (extern oder lokal). Weil die Antwortzeiten externer Server schlecht vorhersagbar sind, stellen die D3js-Entwickler den Zugriff auf die Datei als sogenanntes Promise zur Verfügung. In JavaScript ist ein Promise ein Stellvertreter-Objekt für einen Wert, der noch nicht bekannt ist. Das Ergebnis ist über Callback-Funktionen abrufbar, welche über die then- und catch-Methoden des Promise-Objekts registriert werden. Listing 1 zeigt den erforderlichen JavaScript-Code ausschnittsweise.Listing 1: GeoJSON-Daten einlesen und verarbeiten
<span class="hljs-keyword">const</span> g = svg.append(<span class="hljs-string">'g'</span>); <br/><span class="hljs-built_in">Promise</span>(d3.json(<span class="hljs-string">'http://www.cssenior.de/D3jsMap/</span><br/><span class="hljs-string"> 4_niedrig.geo.json'</span>) <br/>.then(<span class="hljs-function"><span class="hljs-params">data</span> =&gt;</span> { <br/> <span class="hljs-keyword">const</span> paths = g.selectAll(<span class="hljs-string">'path'</span>) <br/> .data(data.features) <br/> .join(<span class="hljs-string">'path'</span>) <br/> .attr(<span class="hljs-string">'class'</span>, <span class="hljs-string">'country'</span>) <br/> .attr(<span class="hljs-string">'d'</span>, d =&gt; pathGenerator(d)) <br/> .style(<span class="hljs-string">'fill'</span>, <span class="hljs-string">'GhostWhite'</span>) <br/> .append(<span class="hljs-string">'title'</span>) <br/> .text(<span class="hljs-function"><span class="hljs-params">d</span> =&gt;</span> d.properties.name) <br/><br/>}).catch(<span class="hljs-function"><span class="hljs-params">onRejected</span> =&gt;</span> { <br/> alert(<span class="hljs-string">'GeoJSON-Datei fehlt.'</span>); <br/> <span class="hljs-built_in">console</span>.error(onRejected.message); <br/>}));
Anders als im Beispiel zu Beginn wird hier – sofern das asynchrone Laden der GeoJSON-Datei erfolgreich verläuft – die Verknüpfung zu den Daten über das Objekt data.features hergestellt. In Verbindung mit dem join-Aufruf werden für jedes Land die SVG-Path-Elemente erstellt. Jedes der 16 Länder wird durch ein Objekt vom Typ feature repräsentiert und enthält die in Bild 5 gezeigten Unterobjekte. Die wichtigsten Daten in Form der GPS-Koordinaten der einzelnen Landesgrenzen werden dann mit nachfolgender Anweisung per Method Chaining der bereits erwähnten Pfad-Generatorfunktion zugeführt:
.attr(<span class="hljs-string">'d'</span>, d => pathGenerator(d))
Damit auf mausgesteuerten Endgeräten die Landesbezeichnung als Tooltipp-Text angezeigt werden kann, wenn der Mauszeiger über einem Land schwebt, muss dem jeweiligen path-Element noch ein title-Element mit dem Landesnamen als Elementinhalt übermittelt werden.
Städte als Orientierung
Zur besseren Orientierung gibt es noch ein Array aus Objekten mit Namen und Koordinaten der vier deutschen Millionenstädte, welches dafür verwendet wird deren Position auf der Karte zu markieren. Die GPS-Koordinaten der Millionenstädte liegen innerhalb der vier Objekte als Array mit zwei Elementen für den Längen- und Breitengrad vor. Auch hier hilft die Instanz der Projektionsfunktion projection sehr, da sie die x- und y-Koordinaten für die Position auf dem SVG-Element als Array mit zwei Elementen zurückliefert. Listing 2 zeigt den dafür nötigen Quellcode, der am Ende der then-Methode des Promise-Objekts eingefügt werden kann.Listing 2: Orientierung anhand der Millionenstädte
<span class="hljs-type">MillionCities</span> = [ <br/> {<span class="hljs-type">Stadt</span>: <span class="hljs-string">"Berlin"</span>, <span class="hljs-type">Koordinaten</span>: <br/> [<span class="hljs-number">13.408333</span>,<span class="hljs-number">52.518611</span>], <span class="hljs-type">Radius</span>: <span class="hljs-number">4</span>}, <br/> {<span class="hljs-type">Stadt</span>: <span class="hljs-string">"Hamburg"</span>, <span class="hljs-type">Koordinaten</span>: <br/> [<span class="hljs-number">9.986079</span>,<span class="hljs-number">53.554038</span>], <span class="hljs-type">Radius</span>: <span class="hljs-number">3</span>}, <br/> {<span class="hljs-type">Stadt</span>: <span class="hljs-string">"München"</span>, <span class="hljs-type">Koordinaten</span>: <br/> [<span class="hljs-number">11.575556</span>,<span class="hljs-number">48.137222</span>], <span class="hljs-type">Radius</span>: <span class="hljs-number">3</span>}, <br/> {<span class="hljs-type">Stadt</span>: <span class="hljs-string">"Köln"</span>, <span class="hljs-type">Koordinaten</span>: <br/> [<span class="hljs-number">6.956944</span>,<span class="hljs-number">50.938056</span>], <span class="hljs-type">Radius</span>: <span class="hljs-number">2</span>} <br/>]; <br/>g.selectAll('circle') <br/> .<span class="hljs-class"><span class="hljs-keyword">data</span>(<span class="hljs-type">MillionCities</span>) </span><br/><span class="hljs-class"> .join('<span class="hljs-title">circle'</span>) </span><br/><span class="hljs-class"> .attr('<span class="hljs-title">class'</span>, '<span class="hljs-type">MillionCity</span>').attr(</span><br/><span class="hljs-class"> '<span class="hljs-title">r'</span>, <span class="hljs-title">d</span> =&gt; <span class="hljs-title">d</span>.<span class="hljs-type">Radius</span>) </span><br/><span class="hljs-class"> .attr('<span class="hljs-title">cx'</span>, <span class="hljs-title">d</span> =&gt; <span class="hljs-title">projection</span>(</span><br/><span class="hljs-class"> <span class="hljs-title">d</span>.<span class="hljs-type">Koordinaten</span>)[0]).attr(</span><br/><span class="hljs-class"> '<span class="hljs-title">cy'</span>, <span class="hljs-title">d</span> =&gt; <span class="hljs-title">projection</span>(<span class="hljs-title">d</span>.<span class="hljs-type">Koordinaten</span>)[1]) </span><br/><span class="hljs-class"> .append('<span class="hljs-title">title'</span>).text(<span class="hljs-title">d</span> =&gt; <span class="hljs-title">d</span>.<span class="hljs-type">Stadt</span>); </span><br/><br/><span class="hljs-class">g.selectAll('<span class="hljs-title">text'</span>) </span><br/><span class="hljs-class"> .<span class="hljs-keyword">data</span>(<span class="hljs-type">MillionCities</span>) </span><br/><span class="hljs-class"> .join('<span class="hljs-title">text'</span>) </span><br/><span class="hljs-class"> .attr('<span class="hljs-title">x'</span>, <span class="hljs-title">d</span> =&gt; <span class="hljs-title">projection</span>(</span><br/><span class="hljs-class"> <span class="hljs-title">d</span>.<span class="hljs-type">Koordinaten</span>)[0]).attr(</span><br/><span class="hljs-class"> '<span class="hljs-title">y'</span>, <span class="hljs-title">d</span> =&gt; <span class="hljs-title">projection</span>(<span class="hljs-title">d</span>.<span class="hljs-type">Koordinaten</span>)[1]) </span><br/><span class="hljs-class"> .attr('<span class="hljs-title">font</span>-<span class="hljs-title">family'</span>, '<span class="hljs-type">Arial</span> <span class="hljs-type">Narrow</span>').attr(</span><br/><span class="hljs-class"> '<span class="hljs-title">font</span>-<span class="hljs-title">size'</span>,'0.8<span class="hljs-title">em'</span>).text(<span class="hljs-title">d</span> =&gt; <span class="hljs-title">d</span>.<span class="hljs-type">Stadt</span>); </span>
Was jetzt noch fehlt, sind die Arbeitslosenquoten der Bundesländer. Diese sollen von einer TSV-Datei geliefert werden, also einer schlichten Textdatei mit durch Tabulatoren getrennten Spalten für die einzelnen Felder. Die ersten Zeilen der Datei AlQuoten.tsv lauten daher wie folgt:
nr name quote
<span class="hljs-number">0</span> Baden-Württemberg <span class="hljs-number">4.4</span>
<span class="hljs-number">1</span> Bayern <span class="hljs-number">3.9</span>
<span class="hljs-number">2</span> Berlin <span class="hljs-number">10.8</span>
Wichtig hierbei ist, dass die TSV-Datei alphabetisch nach Bundesländernamen sortiert ist, weil auch die GeoJSON-Datei, wie aus Bild 5 ersichtlich ist, die Eigenschaften und Geometriedaten der Länder in derselben Reihenfolge auflistet. Selbstverständlich sollte bei der Pflege der Datei AlQuoten.tsv streng auf deren referenzielle Integrität geachtet werden, damit zu jedem Bundesland die richtige Quote zugeordnet werden kann.Die referenzielle Integrität ist auch der Grund dafür, dass das für das Einlesen der GeoJSON-Datei verwendete Promise-Objekt in seinem Aufruf etwas verändert werden muss. Eine Weiterverarbeitung der asynchron gelieferten Daten mit dem Promise-Objekt ergibt erst dann Sinn, wenn beide Datenströme vollständig beim Client angekommen sind. Das Promise-Objekt stellt dies sicher, indem die Methode Promise.all mit einem Array auch den TSV- und JSON-Funktionsaufrufen als Parameter übergeben wird. Logischerweise benötigt auch die then-Methode ein Array mit zwei Ergebnisobjekten als Parameter. Weil die Arbeitslosenquoten aber ebenso wie die Geometriedaten alphabetisch sortiert ankommen, genügt für deren Weiterverarbeitung gleich zu Beginn der then-Methode ein einfaches eindimensionales Array, das mit den Programmzeilen aus Listing 3 gefüllt wird.
Listing 3: Programmstruktur und Promise-Aufrufe
Promise.all([ <br/> d3.tsv(<span class="hljs-string">'http://www.cssenior.de/D3jsMap/</span><br/><span class="hljs-string"> AlQuoten.tsv'</span>), <br/> d3.json(<span class="hljs-string">'http://www.cssenior.de/D3jsMap/</span><br/><span class="hljs-string"> 4_niedrig.geo.json'</span>) <br/>]).<span class="hljs-keyword">then</span>(<span class="hljs-function"><span class="hljs-params">([quoten,data])</span> =&gt;</span> { <br/> quoten.forEach(d =&gt; { <br/> d.nr = +d.nr; <br/> d.quote = +(d.quote.replace(<span class="hljs-string">","</span>, <span class="hljs-string">"."</span>)); <br/> AlQuoten.push(d.quote); <br/> }); <br/> <span class="hljs-regexp">//</span> ... <br/> <span class="hljs-regexp">//</span> ... weiter wie bekannt <br/> <span class="hljs-regexp">//</span> ... <br/>}).<span class="hljs-keyword">catch</span>(onRejected =&gt; { <br/> <span class="hljs-keyword">if</span> (onRejected.message === <span class="hljs-string">"404 Not Found"</span>) { <br/> alert(<span class="hljs-string">"TSV- oder GeoJSON-Datei fehlt."</span>); <br/> } <span class="hljs-keyword">else</span> { <br/> <span class="hljs-built_in">console</span>.error(onRejected.sourceURL + <br/> <span class="hljs-string">" Zeile: "</span> + onRejected.line + <br/> <span class="hljs-string">" Spalte: "</span> + onRejected.column + <span class="hljs-string">": "</span> + <br/> onRejected.message); <br/> alert(<span class="hljs-string">"Allgemeiner Fehler, bitte in der </span><br/><span class="hljs-string"> JavaScript-Konsole nachsehen."</span>); <br/> } <br/>}); <span class="hljs-regexp">//</span> Ende Promise.all Bundesländer einfärben
Um die einzelnen Bundesländer abhängig von ihrer Arbeitslosenquote zu färben, sollte man sich darüber klar werden, dass die Arbeitslosenquote quasi die x-Achse eines (fiktiven) Balkendiagramms darstellt, auch wenn sie in der Karte nicht sofort als solche erkennbar ist. Jede Achse hat auch eine Skalierung. Die wichtigste Aufgabe der Skalierung ist daher folgende: Abstrakte Dimensionen von Daten werden auf eine sichtbare Variable wie eine bestimmte Balkenlänge oder Färbung abgebildet. Typischerweise denken wir bei Dimensionen an räumliche Dinge, etwa eine Position im dreidimensionalen Raum. Aber eine abstrakte Dimension muss nicht räumlich sein, sie kann auch nominell sein, wie die Ländernamen. Trotzdem muss man sich im Beispiel eines Balkendiagramms Gedanken um die Skalierung der y-Achse machen, da eine größere Anzahl an Balken auf der y-Achse niedrigere Balkenhöhen und -abstände zur Folge haben muss. Auch wenn es bei einer farblichen Codierung der x-Achse nicht direkt um räumliche Dimensionen geht, so ist dies indirekt dennoch so: Alle Farben eines Farbmodells, die durch eine farbgebende Methode tatsächlich ausgegeben werden können, werden im dreidimensionalen Farbraum dargestellt. Jede farbgebende Methode (Drucker, Monitore, Lackierung) hat ihren eigenen Farbraum.Der Farbraum einer farbgebenden Methode umfasst möglichst alle Farben, die innerhalb des Farbmodells darstellbar sind. Zwangsläufig hat jede farbgebende Methode nur begrenzte Möglichkeiten: So hat jeder Monitor eine maximale Helligkeit. Computerspieler kommen beispielsweise damit in Berührung, wenn sie zu Beginn des Spiels gebeten werden, eine Kalibrierung durchzuführen, indem sie ihr System so einstellen, dass sie möglichst alle abgebildeten Grautöne des eingeblendeten Farbbalkens noch unterscheiden können.Deshalb gliedert sich die Skalierung jeder Achse in zwei Bestandteile:- die Domain, welche alle darzustellenden abstrakten Daten (quantitativ oder namentlich) enthält,
- die Range, welche die visuelle Variable (Position auf der Achse, Balkenlänge, verfügbarer Farbraum) enthält.
Arbeitslosenquotenals quotenabhängig gefärbtes Balkendiagramm(Bild 6)
Autor
Die Bibliothek D3js hat für diese Zwecke mehrere Farbschemata definiert, welche die darzustellende Range repräsentieren; in diesem Fall wurde d3.schemeBlues verwendet, welches neun Abstufungen bietet.Zulässige Werte für die Farbabstufungen liegen im Bereich zwischen drei und neun. Die Funktion zur Erzeugung der Farbskalierungs-Instanz muss auch mit den Minimal- und Maximalwerten der auf der y-Achse befindlichen nominellen Dimension versorgt werden, also der niedrigsten und höchsten Arbeitslosenquote aller Bundesländer, welche die Domain bilden:
<span class="hljs-symbol">const</span> color =
<span class="hljs-built_in">d3</span>.scaleQuantize(
[<span class="hljs-built_in">d3</span>.min(AlQuoten), <span class="hljs-built_in">d3</span>.max(AlQuoten)],
<span class="hljs-built_in">d3</span>.schemeBlues[<span class="hljs-number">9</span>])<span class="hljs-comment">; </span>
Nun kann die Funktion der Farbskalierungs-Instanz an der entsprechenden Stelle in Listing 1 mit der jeweiligen Arbeitslosenquote aus dem bereits gefüllten eindimensionalen Array AlQuoten verwendet werden, weil das Stil-Attribut fill der SVG-Pfad-Elemente nicht nur statische Farbnamen als Attributwerte empfangen, sondern auch Funktionen als Parameter verwerten kann:
.style(<span class="hljs-string">'fill'</span>, <span class="hljs-function"><span class="hljs-params">(d,i)</span> =></span> color(AlQuoten[i]))
Um dem Tooltipp mit dem Bundesland-Namen noch die Arbeitslosenquote mitzugeben, ist dort noch die nachfolgende Zeile erforderlich:
.append(<span class="hljs-string">'title'</span>).text(<span class="hljs-function"><span class="hljs-params">(d,i)</span> =></span>
d.properties.name + <span class="hljs-string">': '</span> +
AlQuoten[i].toLocaleString() + <span class="hljs-string">' %'</span>)
Jetzt fehlt noch die Legende, welche die zu den Farben passenden Arbeitslosenquoten aufschlüsselt. Freundlicherweise stellt Mike Bostock auf [5] die Datei legend.js zur Verfügung, welche die Legende mit einem relativ einfachen Funktionsaufruf erstellt, sofern man die Datei mit <script src=“./legend.js“></script> ins Projektverzeichnis kopiert und eingebunden hat.Das Erstellen der Legende erledigt dann der folgende Funktionsaufruf, der am Ende der then-Methode des Promise-Objekts eingefügt wird:
<span class="hljs-selector-tag">g</span><span class="hljs-selector-class">.append</span>(<span class="hljs-string">"g"</span>)<span class="hljs-selector-class">.attr</span>(
<span class="hljs-string">"transform"</span>, <span class="hljs-string">"translate(660,20)"</span>)
<span class="hljs-selector-class">.append</span>(() => legend({
color,
<span class="hljs-attribute">title</span>: <span class="hljs-string">"Juli 2020: Arbeitslosenquote in %"</span>,
<span class="hljs-attribute">width</span>: <span class="hljs-number">260</span>, <span class="hljs-attribute">tickFormat</span>: <span class="hljs-string">".1f"</span>
}));
Last, but not least gibt es noch den Zoom-Aufruf, welcher ein neues Zoom-Verhalten erstellt. Das zurückgelieferte Verhalten zoom ist sowohl ein Objekt als auch eine Funktion und wird üblicherweise mittels selection.call auf selektierte Elemente angewendet:
svg.call(d3.zoom().scaleExtent(
[<span class="hljs-number">1</span>, <span class="hljs-number">128</span>]).<span class="hljs-literal">on</span>(<span class="hljs-string">'zoom'</span>, <span class="hljs-function"><span class="hljs-params">()</span> =></span>
{
g.attr(<span class="hljs-string">'transform'</span>, d3.event.transform);
})); Fazit und Ausblick
Mit dem bisher erworbenen Wissen sind Sie grundsätzlich dafür gerüstet, mit D3js und JavaScript eigene Karten mit besonderer Aussagekraft im Webbrowser darzustellen und an Ihre Bedürfnisse anzupassen, beispielsweise durch das Einblenden spezifischer Daten als Tooltipp und durch das Erzeugen von SVG-Elementen wie Rechtecken, Kreisen, Linien, Textelementen oder gar Firmenlogos.Fussnoten
- D3js, https://d3js.org
- Beispiel Arbeitslosenzahlen, http://www.dotnetpro.de/SL2012D3js1
- GeoJSON, http://www.dotnetpro.de/SL2012D3js2
- Simple-Feature-Access, http://www.dotnetpro.de/SL2012D3js3
- Farblegenden, http://www.dotnetpro.de/SL2012D3js4
