D3 für die Ungeduldigen

Kapitel 1. Einführung

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

D3.js (oder einfach D3, für Data-Driven Documents) ist eine JavaScript-Bibliothek zur Manipulation des Document Object Model (DOM)-Baums, um Informationen visuell darzustellen. Sie hat sich zu einem De-facto-Standard für Informationsgrafiken im Web entwickelt.

Trotz seiner Beliebtheit hat D3 den Ruf, eine steile Lernkurve zu haben. Ich glaube nicht, dass das daran liegt, dass D3 kompliziert ist (das ist es nicht), und auch nicht daran, dass es eine große API hat (die gibt es zwar, aber die API ist gut strukturiert und extrem gut gestaltet). Ich glaube vielmehr, dass viele der Schwierigkeiten, die neue Benutzer haben, auf falsche Annahmen zurückzuführen sind. Da D3 verwendet wird, um beeindruckende Grafiken zu erstellen, ist es einfach - ja sogar natürlich - es als "Grafikbibliothek" zu betrachten, die den Umgang mit grafischen Primitiven erleichtert und High-Level-Unterstützung für gängige Plot-Typen bietet. Wenn man mit dieser Erwartung an D3 herantritt, ist man unangenehm überrascht, wie viel Aufwand nötig ist, um etwas so Elementares wie die Farbe eines Elements einzustellen - und was soll das überhaupt mit der "Auswahl"? Warum kann ich nicht einfach ein leinwandähnliches Element auswählen und damit fertig sein?

Der Fehler liegt darin, dass D3 keine Grafikbibliothek ist, sondern eine JavaScript-Bibliothek zur Manipulation des DOM-Baums! Die Grundbausteine sind nicht Kreise und Rechtecke, sondern Knoten und DOM-Elemente; und die typische Tätigkeit besteht nicht darin, eine grafische Form auf eine Leinwand zu malen, sondern ein Element mit Hilfe von Attributen zu gestalten. Die "aktuelle Position" wird nicht durch eine xy-Koordinate auf einer Leinwand angegeben, sondern durch eine Auswahl von Knoten in einem DOM-Baum.

Das führt zu dem, was meiner Meinung nach die zweite große Herausforderung für viele neue Nutzer ist: D3 ist eine Webtechnologie und stützt sich auf eine Reihe anderer Webtechnologien: die DOM-API und das Ereignismodell, Cascading Style Sheet (CSS)-Selektoren und -Eigenschaften, das JavaScript-Objektmodell und natürlich Scalable Vector Graphics (SVG). In vielen Fällen bietet D3 nur eine relativ dünne Schicht um diese Technologien herum, und sein eigenes Design spiegelt häufig die zugrunde liegenden APIs wider. Das sorgt für eine große und etwas heterogene Umgebung. Wenn du bereits mit dem gesamten Stapel moderner Webtechnologien, der als HTML5 bekannt ist, vertraut bist, wirst du dich wie zu Hause fühlen, aber wenn du damit nicht vertraut bist, kann das Fehlen einer klaren, einheitlichen Abstraktionsschicht sehr verwirrend sein.

Zum Glück musst du dich nicht mit all diesen zugrundeliegenden Technologien eingehend beschäftigen: D3 macht sie benutzerfreundlicher und bietet ein beträchtliches Maß an Vereinheitlichung und Abstraktion. Der einzige Bereich, in dem es definitiv nicht ausreicht, es zu "beflügeln", ist SVG. Du musst SVG gut verstehen - nicht nur die Darstellungselemente, sondern auch die strukturellen Elemente, die bestimmen, wie Informationen in einem Diagramm organisiert werden. Ich habe versucht, die notwendigen Informationen in Anhang B zusammenzustellen. Wenn du mit SVG nicht vertraut bist, empfehle ich dir, diesen Anhang durchzuarbeiten, bevor du den Rest des Buches liest - du wirst froh darüber sein!

Für wen dieses Buch ist

Dieses Buch richtet sich an Programmierer und Wissenschaftler, die D3 zu ihrem Werkzeugkasten hinzufügen wollen. Ich gehe davon aus, dass du als Programmierer einigermaßen geübt bist und gerne mit Daten und Grafiken arbeitest. Gleichzeitig erwarte ich nicht, dass du mehr als ein flüchtiges Wissen über moderne professionelle Webentwicklung hast.

Hier ist, was du bereits haben solltest:

• Kenntnisse von mindestens einer oder zwei Programmiersprachen (aber nicht unbedingt JavaScript) und das Selbstvertrauen, die Syntax einer neuen Sprache aus der Sprachreferenz zu übernehmen.

• Vertrautheit mit modernen Programmierkonzepten, d.h. nicht nur mit Schleifen, Konditionalen und gängigen Datenstrukturen, sondern auch mit Schließungen und Funktionen höherer Ordnung.

• Grundlegendes Verständnis von XML und der hierarchischen Struktur, die es den Dokumenten auferlegt. Ich gehe davon aus, dass du das DOM kennst und weißt, wie es die Elemente einer Webseite als Knoten in einem Baum behandelt. Ich gehe aber nicht davon aus, dass du mit der ursprünglichen DOM-API oder einem ihrer modernen Nachfolger (wie jQuery) vertraut bist.

• Einfache HTML- und CSS-Kenntnisse (du solltest in der Lage sein, die Tags <body> und <p> zu erkennen und zu verwenden) sowie eine gewisse Vertrautheit mit der CSS-Syntax und -Mechanismen.

Aber vor allem habe ich einen ungeduldigen Leser vor Augen: Er ist kompetent und fähig, aber frustriert, weil er oder sie schon einmal versucht hat, sich mit D3 vertraut zu machen. Wenn das deine Situation beschreibt, ist dieses Buch genau das Richtige für dich!

Warum D3?

Warum sollte D3 für Programmierer und Wissenschaftler interessant sein - oder eigentlich für jeden, der nicht in erster Linie Webentwickler ist? Die folgenden Gründe sind hervorzuheben:

• D3 bietet eine bequeme Möglichkeit, Grafiken über das Web bereitzustellen. Wenn du mit Daten und Visualisierungen arbeitest, kennst du das: Du erstellst deine Zahlen in einem Plotprogramm deiner Wahl, speicherst die Ergebnisse als PNG oder PDF und erstellst dann eine Webseite mit<img> Tags, damit andere Leute deine Arbeit sehen können. Wäre es nicht schön, wenn du deine Zahlen in einem Schritt erstellen und veröffentlichen könntest?

• Noch wichtiger ist, dass D3 es einfach und bequem macht, animierteund interaktive Grafiken zu erstellen. Dieser Punkt kann gar nicht oft genug betont werden: Die wissenschaftliche Visualisierung kann von Animationen und Interaktivität genauso profitieren wie jeder andere Bereich - aber dieses Ziel war in der Vergangenheit notorisch schwer zu erreichen. Häufig waren dazu komplizierte und unpassende Technologien (hast du dich schon mal an der Xlib-Programmierung versucht?) oder spezielle und oft teure kommerzielle Pakete erforderlich. Mit D3 kannst du diese Herausforderungen hinter dir lassen und dich für deine Visualisierungsbedürfnisse in die Gegenwart begeben.

• Abgesehen von der Grafik ist D3 ein zugängliches, leicht zu erlernendes und einfach zu verwendendes Framework für die allgemeine DOM-Bearbeitung. Wenn du nur gelegentlich das DOM manipulieren musst, ist D3 vielleicht alles, was du brauchst, ohne dass du alle anderen Frameworks und APIs für die Webprogrammierung beherrschen musst. Das Design der Bibliothek selbst ist auch deshalb interessant, weil sie "out of the box" Möglichkeiten für gängige Datenmanipulationen und Visualisierungsaufgaben bietet.

Vor allem aber glaube ich, dass D3 eine Technologie ist, die ganz allgemein die Bandbreite der Lösungen erweitert, die ihren Nutzern zur Verfügung stehen. Die interessantesten Anwendungen von D3 sind vielleicht diejenigen, die noch nicht erfunden wurden.

Was in diesem Buch steht

Dieses Buch versucht, eine umfassende, aber dennoch prägnante Einführung in D3 zu sein, die die meisten wichtigen Teile der Funktionalität in ausreichender Tiefe abdeckt.

• Es versucht, eine bequeme One-Stop-Ressource zu sein, indem es sowohl die API-Referenzdokumentation als auch Hintergrundinformationen zu zusätzlichen Themen enthält, die dem typischen Leser vielleicht nicht vertraut sind (wie SVG, JavaScript und das DOM, aber auch Farbräume oder das HTML Canvas-Element).

• Das Buch legt den Schwerpunkt auf Mechanismen und Designkonzepte und nicht auf vorgefertigte Rezepte. Es wird davon ausgegangen, dass die Leser/innen D3 so gründlich lernen wollen, dass sie es für ihre eigenen, möglicherweise neuartigen und unvorhergesehenen Zwecke anwenden können.

Die Hoffnung ist, dass dieses Buch dich darauf vorbereitet, Dinge mit D3 zu tun, an die ich nie gedacht hätte!

... und was nicht ist

Dieses Buch beschränkt sich absichtlich nur auf D3, seine Fähigkeiten und Mechanismen. Das bedeutet, dass es eine Reihe von Auslassungen gibt:

• Keine ausführlichen Fallstudien oder kochbuchähnlichen Rezepte

• Keine Einführungen in Datenanalyse, Statistik oder visuelle Gestaltung

• Keine Erwähnung von anderen JavaScript-Frameworks als D3

• Keine Diskussion über moderne Webentwicklung im Allgemeinen

Ich möchte die letzten beiden Punkte hervorheben. In diesem Buch geht es ausschließlich um D3, ohne Bezug zu anderen JavaScript-Frameworks oder -Bibliotheken. Das ist durchaus beabsichtigt: Ich wollte D3 auch denjenigen Lesern zugänglich machen, die mit dem reichhaltigen, aber heterogenen Ökosystem von JavaScript nicht vertraut sind. Aus demselben Grund werden in diesem Buch auch keine anderen Themen der modernen Webentwicklung behandelt. Du wirst insbesonderekeine Diskussion über Browserkompatibilität und verwandte Themen finden. Wir gehen davon aus, dass du in der Regel einen modernen, aktuellen, JavaScript-fähigen Browser verwendest, der SVG darstellen kann.¹

Ein weiteres Versäumnis betrifft die D3-Unterstützung für geografische und raumbezogene Informationen. Obwohl dieses Thema wichtig ist, scheint es ausreichend gut enthalten zu sein, so dass es nicht allzu schwierig sein sollte, es aus der D3-Referenzdokumentation zu lernen, sobald die D3-Grundlagen bekannt sind.

Wie man dieses Buch liest

Dieses Buch ist eine fortlaufende, progressive Erzählung, bei der neues Material systematisch von Kapitel zu Kapitel eingeführt wird. Trotzdem können vor allem die späteren Kapitel in beliebiger Reihenfolge gelesen werden, nachdem die notwendigen Grundlagen in der ersten Hälfte des Buches gelegt wurden. Hier ist mein Vorschlag für die Reihenfolge:

1. Wenn du nicht bereits eine solide Grundlage in SVG hast, empfehle ich dir dringend, Anhang B zu lesen. Ohne dieses Wissen macht alles andere nicht viel Sinn.

2. Jeder sollte Kapitel 2 lesen, um sich mit den Themen vertraut zu machen, die wir besprechen werden.

3. Kapitel 3 ist Pflichtlektüre. Auswahlen sind das wichtigste Organisationskonzept in D3. Selektionen sind nicht nur ein Griff in den DOM-Baum, sondern sie verwalten auch die Verbindung zwischen DOM-Elementen und dem Datensatz. So gut wie jedes D3-Programm beginnt mit einer Selektion, und es ist unerlässlich, sie und ihre Möglichkeiten zu verstehen, wenn du mit D3 arbeitest.

4. Streng genommen ist das Kapitel 4 über Ereignisbehandlung, Interaktivität und Animationen optional. Aber da diese Themen zu den spannendsten Möglichkeiten von D3 gehören, wäre es schade, sie auszulassen.

5. Kapitel 5 ist wichtig, weil es einige grundlegende D3-Designkonzepte (wie Komponenten und Layouts) erklärt und allgemein nützliche Techniken (wie SVG-Transformationen und benutzerdefinierte Komponenten) vorstellt.

6. Die übrigen Kapitel können weitgehend in beliebiger Reihenfolge gelesen werden, je nachdem, wann der Bedarf für das jeweilige Thema entsteht. Besonders hinweisen möchte ich auf Kapitel 7 und seine ausführliche Beschreibung der unscheinbaren, aber äußerst vielseitigen Skalenobjekte sowie auf die vielfältigen Funktionen zur Array-Verarbeitung in Kapitel 10.

Konventionen

In diesem Abschnitt werden einige spezielle Konventionen erklärt, die im weiteren Verlauf des Buches verwendet werden.

Konventionen der D3 API

Die D3-API verwendet einige einheitliche Konventionen, die ihre Benutzerfreundlichkeit erheblich verbessern. Einige dieser Konventionen sind gängige JavaScript-Idiome und nicht spezifisch für D3, aber möglicherweise für Nicht-JavaScript-Programmierer nicht geläufig. Indem sie explizit an einer Stelle aufgeführt werden, müssen spätere Diskussionen nicht mit überflüssigen Informationen überfrachtet werden.

• D3 ist in erster Linie eine Zugriffsebene auf den DOM-Baum. In der Regel versucht D3 nicht, die zugrundeliegenden Technologien zu kapseln, sondern bietet stattdessen bequeme, aber generische Zugriffsmöglichkeiten auf sie. D3 führt zum Beispiel keine eigenen "Kreis"- oder "Rechteck"-Abstraktionen ein, sondern gibt dem Programmierer direkten Zugriff auf die SVG-Funktionen zur Erstellung grafischer Formen. Der Vorteil dieses Ansatzes ist, dass D3 sehr anpassungsfähig ist und nicht an eine bestimmte Technologie oder Version gebunden ist. Der Nachteil ist, dass die Programmierer/innen neben D3 auch die zugrunde liegenden Technologien kennen müssen, da D3 selbst keine vollständige Abstraktionsschicht bietet.

• Da JavaScript keine formalen Funktionssignaturen erzwingt, sind alle Funktionsargumente technisch gesehen optional. Viele D3-Funktionen verwenden die folgende Redewendung: Wenn sie mit entsprechenden Argumenten aufgerufen werden, fungieren diese Funktionen als Setter (setzen die entsprechende Eigenschaft auf den angegebenen Wert); wenn sie ohne Argumente aufgerufen werden, fungieren diese Funktionen als Getter (geben den aktuellen Wert der Eigenschaft zurück). Um eine Eigenschaft vollständigzu entfernen, rufst du den entsprechenden Setter auf und gibst als Argument nullan.

• Wenn Funktionen als Setter aufgerufen werden, geben sie in der Regel eine Referenz auf das aktuelle Objekt zurück und ermöglichen so eine Methodenverkettung. (Dieses Idiom ist so intuitiv und konsistent, dass es nur noch selten explizit erwähnt wird).

• Anstelle eines Wertes können viele D3-Setter eine -Accessor-Funktionals Argument nehmen, die einen Wert zurückgeben soll, der zum Setzen der betreffenden Eigenschaft verwendet wird. Die Parameter, die von Accessor-Funktionen erwartet werden, sind nicht überall in D3 gleich, aber eine Reihe von zusammenhängenden D3-Funktionen wird Accessor-Funktionen immer auf einheitliche Weise aufrufen. Die Details der Accessor-Argumente sind bei den jeweiligen D3-Funktionen dokumentiert.

• Einige wichtige D3-Funktionen sind als Funktionsobjekte implementiert. Sie erfüllen ihre Hauptaufgabe, wenn sie als Funktion aufgerufen werden, sind aber auch Objekte mit Mitgliedsfunktionen und internem Status (Beispiele sindSkalenobjekte, siehe Kapitel 7, sowieGeneratoren und Komponenten, siehe Kapitel 5). Es ist ein gängiges Muster, ein solches Objekt zu instanziieren, es mit seinen Mitgliedsfunktionen zu konfigurieren und es schließlich aufzurufen, um seinen Zweck zu erfüllen. Häufig wird für den letzten Aufruf keine explizite Funktionsaufrufsyntax verwendet, sondern eine der JavaScript-Methoden für "synthetische" Funktionsaufrufe: Das Funktionsobjekt wird an eine andere Funktion (z. B. call()) übergeben, die die erforderlichen Argumente liefert und schließlich das Funktionsobjekt selbst auswertet.

Konventionen für die API-Referenztabellen

Überall im Buch findest du Tabellen, die Teile der D3-API in einem Referenzformat zeigen. Die Einträge in diesen Tabellen sind nach Relevanz sortiert, damit verwandte Funktionen zusammen bleiben.

• D3-Funktionen werden entweder über das globale d3 Objekt oder als Mitgliedsfunktionen eines D3-Objekts aufgerufen; einige Funktionen sind auf beide Arten verfügbar. Wenn eine Funktion über ein Objekt aufgerufen wird, wird dieses Objekt als Empfänger des Methodenaufrufs bezeichnet. Innerhalb der Mitgliedsfunktion ist der Empfänger das Objekt, auf das die Variable thiszeigt.

• Alle API-Referenztabellen geben den Typ des Empfängers in der Überschrift an. Die Tabellen verweisen nicht explizit auf den Prototyp des Objekts.

• Funktionssignaturen versuchen, den Typ jedes Arguments anzugeben, aber viele Funktionen akzeptieren so viele verschiedene Argumenttypen, dass eine eindeutige Notation nicht sinnvoll ist. Lies die Beschreibung im Text, um alle Details zu erfahren. Wo sie verwendet werden, weisen Klammern auf ein Array hin. Optionale Funktionsargumente werden nicht explizit angegeben.

Konventionen für die Code-Beispiele

Die Code-Beispiele sollen die Funktionen und Mechanismen von D3 veranschaulichen. Um den jeweiligen Punkt so deutlich wie möglich herauszustellen, sind die Beispiele auf das Wesentliche reduziert. Ich habe auf die meisten "Feinheiten" verzichtet, z. B. auf ansprechende Farben oder semantisch interessante Datensätze. Die Farben sind in der Regel primär, und die meisten Datensätze sind klein und einfach.

Andererseits ist jedes Beispiel in sich vollständig, kann so ausgeführt werden, wie es ist, und erzeugt den zugehörigen Graphen. Von wenigen Ausnahmen abgesehen, zeige ich keine Codefragmente. Ich habe festgestellt, dass es besser ist, einfache Beispiele vollständig darzustellen, als nur die "interessanten Teile" eines längeren Beispiels zu zeigen. Auf diese Weise besteht nicht die Gefahr, dass der Gesamtzusammenhang verloren geht. Alles ist ausführbar und kann nach Belieben erweitert und verschönert werden.

Namenskonventionen

In den Beispielen werden die folgenden Namenskonventionen für Variablen verwendet:

• Abkürzungen mit Anfangsbuchstaben für einzelne Objekte: c für "Kreis",p für Punkt und so weiter. Füge ein "s" für Sammlungen hinzu: cs wird eine Reihe von Kreisen sein, ps eine Reihe von Punkten.

• Häufig vorkommende Größen haben ihre eigene Notation: Pixel werden mit px bezeichnet, Skalenobjekte mit sc. Generatoren und Komponenten sind Funktionsobjekte, die etwas "machen" und werden daher mkr genannt.

• Der Buchstabe d wird allgemein verwendet, um in anonymen Funktionen "das aktuelle Ding" zu bezeichnen. Wenn du mit D3-Auswahlen arbeitest, ist d normalerweise ein einzelner Datenpunkt, der an ein DOM-Element gebunden ist; wenn du mit Arrays arbeitest, ist d ein Array-Element (wie in ds.map( d => +d )).

• Die Datensätze werden data oder ds genannt.

• Auswahlen, die entweder ein <svg> oder ein <g> Element darstellen, sind üblich und werden, wenn sie einer Variablen zugewiesen werden, als svg oder g bezeichnet.

Organisation der Quelldateien

Ab Kapitel 3 verwende ich die Konvention, dass die Seite für jede Codeauflistung bereits ein <svg> Element mit einem eindeutigen id und mit korrekt gesetzten width und height Attributen enthält. Der Beispielcode wählt dann dieses SVG-Element über sein id Attribut aus und weist diese Auswahl oft einer Variablen für zukünftige Referenzen zu:

var svg = d3.select( "#fig" );

Dadurch wird die Mehrdeutigkeit eines allgemeineren Selektors (wied3.select( "svg" )) vermieden und es ist einfach, mehrere Beispiele in eine einzige HTML-Seite einzubinden.

Zu jeder Grafik gehört eine JavaScript-Funktion, die die SVG-Elemente, aus denen die Abbildung besteht, dynamisch erstellt. Konventionell beginnen die Funktionsnamen mit make... und werden mit dem Wert des id Attributs des Ziel-SVG-Elements fortgesetzt.

Mit Ausnahme der Beispiele in Kapitel 2 gibt es pro Kapitel eine HTML-Seite und eine JavaScript-Datei. (Von seltenen Ausnahmen abgesehen, füge ich JavaScript-Code nicht direkt in eine HTML-Seite ein.)

Plattform, JavaScript und Browser

Um die Beispiele auszuführen, brauchst du einen lokalen oder gehosteten Webserver (siehe Anhang A). Die Beispiele sollten in jedem modernen, JavaScript-fähigen Browser funktionieren. Derzeit gibt es mehrere Versionen von JavaScript.² Mit drei Ausnahmen verwenden die Codebeispiele nur "klassisches" JavaScript (ES5, veröffentlicht 2009/2011) ohne weitere Frameworks oder Bibliotheken. Die drei Funktionen, die eine neuere Version von JavaScript (ES6, veröffentlicht 2015) erfordern, sind:

• Die prägnante Fat-Prow-Notation für anonyme Funktionen (sieheAnhang C), die in allen Beispielen verwendet wird.

• Destrukturierungszuweisung ([a, b] = [b, a]), die an einigen Stellen verwendet wird.

• Mehrere Beispiele greifen auf Remote-Ressourcen zu, indem sie D3-Wrapper für die Fetch-API verwenden (siehe Kapitel 6); diese hängen von dem JavaScriptPromise Objekt ab.

¹ Das ist ganz im Sinne von D3 selbst. Auf der D3-Website heißt es: "D3 ist keine Kompatibilitätsschicht, wenn dein Browser also keine Standards unterstützt, hast du Pech gehabt"(https://github.com/d3/d3/wiki).

² Siehe https://en.wikipedia.org/wiki/ECMAScript.