BigData mit JavaScript visualisieren: D3.js für die Darstellung großer Datenmengen einsetzen

Stichwortverzeichnis

Datendarstellung im Web mit D3

Der etwas sperrige Name der Bibliothek ist eigentlich Programm und die beste Erklärung für die Funktion – er steht für Data Driven Documents, also für Dokumente (HTML-Seiten), die sich selbst immer wieder neu auf Basis von Daten zusammenstellen. Um diese Daten lebendig darzustellen, werden HTML, SVG und CSS eingesetzt. Auf Basis dieser Gedanken gibt Ihnen die Bibliothek die Möglichkeit, erstaunliche Visualisierungen von Daten zu erstellen, ohne sich an eine proprietäre Bibliothek zu binden. Denn »D3« setzt auf den Möglichkeiten moderner Browser auf und kombiniert die Teile der Visualisierung mit einem datengesteuerten Zugang, um das Document Object Model (DOM) zu verändern.

Die Bibliothek erlaubt Ihnen, beliebige Daten mit dem DOM zu verknüpfen und danach datengesteuerte Änderungen auf dieses Dokument anzuwenden. D3 stellt Ihnen hier viele Möglichkeiten zur Verfügung: Sie können aus einem Array mit Zahlenwerten einfach eine Tabelle in HTML, aber auch ein interaktives Balkendiagramm in SVG erzeugen.

D3 ist kein Framework, das Ihnen jedes nur denkbare und mögliche Feature zur Verfügung stellt. Es kümmert sich im Wesentlichen um die Wurzel des Problems mit der Verarbeitung von Daten: das effiziente Handhaben von Dokumenten, die auf Basis von Daten erstellt wurden. Damit vermeiden Sie einen proprietären Zugang der Datenpräsentation. Aber Sie erhalten eine außerordentliche Flexibilität und alle Möglichkeiten vorhandener Standards im Web.

Die Bibliothek ist sehr schnell, da sie nur einen sehr kleinen Overhead besitzt. Dadurch ist es Ihnen möglich, auch große Datenmengen zu verarbeiten und eine dynamische Herangehensweise für die Animation und Interaktion mit den Daten zu wählen.

Durch dieses offene Konzept können Sie sehr leicht wiederverwendbaren Quellcode schreiben. Das zeigt sich gut in der Vielzahl von Komponenten und Plug-ins, die für D3 verfügbar sind.

Besonders wichtig ist es aber, dass D3 keine neue grafische Bibliothek ist. Alle Möglichkeiten moderner Browser für Übergänge, Darstellungen und Formatierungen werden jederzeit und sofort unterstützt. Die Bibliothek ist prinzipiell für die Verbindung von HTML-Dokumenten und Daten gedacht. Das Layout der Daten erfolgt wie gewohnt mithilfe von CSS-Dateien.

1.1Eigenheiten und Syntaxregeln

Trotz aller Einfachheit, die D3 mitbringt, gibt es ein paar Eigenheiten oder besser Syntaxregeln und Vorgaben, um mit der Bibliothek erfolgreich arbeiten zu können. In diesem Abschnitt werden wir sie kennenlernen und später immer wieder einsetzen.

1.1.1Auswahl von Elementen im DOM

HTML-Dokumente auf Basis der W3C-DOM-API zu verändern, kann sehr anstrengend sein. Die Namen der Methoden sind lang, und der Zugang der API zum DOM zwingt Sie direkt zu einzelnen Befehlssequenzen und auch zum Mitverfolgen der einzelnen Zustände der Elemente. Schauen wir uns ein einfaches Beispiel an: Sie möchten die Textfarbe aller Absätze in einem Dokument auf Grün ändern:

01 var absaetze = document.getElementsByTagName(p);

02 for (var i=0; i

03  var absatz = absaetze.item(i);

04  absatz.style[color] = green;

05 }

Listing 1: Textfarbe für alle Absätze mit der DOM-API ändern.

D3 verwendet hingegen einen selbsterklärenden Ansatz, um mit einem beliebigen Satz von Knoten (Nodes) des DOM zu arbeiten. Die Bibliothek verwendet für diese Zusammenstellung von DOM-Elementen die Bezeichnung Selection. Sie können den vorherigen Code damit in einer Zeile zusammenfassen.

01 d3.selectAll(p).style(color, green);

Listing 2: Textfarbe für alle Absätze mit color ändern.

Natürlich können Sie nicht nur einen Satz von Elementen, sondern auch einzelne DOM-Knoten ansprechen. Mit der folgenden Zeile ändern Sie die Hintergrundfarbe der Webseite.

01 d3.select(body).style(background-color, aqua);

Listing 3: Hintergrundfarbe für das body-Element mit D3 ändern.

Selektoren sind durch die W3C-Selectors-API definiert und werden von allen modernen Browsern unterstützt. Dadurch kann es bei älteren Browsern, besonders beim Internet Explorer 9 und früher, zu Problemen kommen. Damit Sie diese Abwärtskompatibilität zur Verfügung stellen, können Sie beispielsweise die Bibliothek Sizzle1 einsetzen.

Die vorherigen Beispiele nutzen einen sehr einfachen Ansatz und wählen die Knoten mit ihrem Tag-Namen (p bzw. body) aus. Aber Elemente können mit vielen verschiedenen Attributen, beispielsweise mit dem Klassennamen, der ID oder weiteren Eigenschaften, ausgewählt werden.

Ähnlich wie andere Bibliotheken, z. B. jQuery oder Prototype, besitzt auch D3 zahlreiche Methoden, um die Knoten zu verändern. Sie können Attribute und Stile ändern, Event-Listener binden, Knoten hinzufügen oder sortieren und auch den Inhalt eines Elements anpassen. Eigentlich sollten diese Möglichkeiten für fast alle Aufgaben ausreichen. Aber trotzdem können Sie das DOM und seine Elemente auch noch direkt verändern, denn jede Selection ist ein einfaches Array aus Knoten des Document Object Model.

1.1.2Dynamische Eigenschaften

Wenn Sie bereits mit anderen Bibliotheken gearbeitet haben, kommt Ihnen dies alles schon bekannt vor. Aber einen grundlegenden Unterschied gibt es dennoch. In D3 können Stile, Attribute und andere Eigenschaften als Funktionen auf Basis der Daten definiert werden und nicht als einfache Konstanten wie in den anderen Bibliotheken.

Trotz ihrer offensichtlichen Einfachheit können diese Funktionen sehr mächtig sein. Nehmen wir nur die Funktion d3.geo.path(). Sie nimmt geografische Koordinaten an und projiziert sie als Pfad in einem svg-Element. D3 kennt viele Funktionen dieser Art, aber auch sogenannte Primitives für eine grafische Präsentation. Diese Primitives stellen Linien, Diagramme und einfache geometrische Formen schnell und leicht dar.

Nehmen Sie nochmals das Beispiel mit der Textfarbe aus dem vorherigen Abschnitt und ändern Sie jetzt die Farbe auf einen zufälligen Wert:

01 d3.selectAll(p).style(color, function() {

02   return rgb( + parseInt(Math.random() * 255) + , 255, 128);

03 });

Listing 4: Textfarbe für alle p-Elemente mit einer Funktion zufällig ändern.

Eine zufällige Textfarbe ist natürlich nicht so schlau, denn im Design können wir solche Ansätze nicht verwenden. Viel sinnvoller ist es, hier eine Art Zebrapapier zu erzeugen – also abwechselnd einen dunklen und einen hellen Hintergrund für eine Textzeile darzustellen:

01 d3.selectAll(p).style(background-color, function(d, i) {

02   if (i % 2) {

03    return #CCCCCC;

04   } else {

05    return #666666;

06   }

07 });

Listing 5: Hintergrundfarbe für alle p-Elemente abwechselnd festlegen.

Berechnete Eigenschaften sind oft an vorhandene Daten bzw. Werte gebunden. Daten in D3 werden immer als Wertearray definiert, und jeder Wert wird als erstes Argument (d) an die Funktion übergeben. Als Standard werden die Elemente in der Reihenfolge des Index gebunden. Damit ist gemeint, dass der erste Knoten in der Selection an das erste Element im Datenarray und der zweite Knoten an das zweite Element im Array und so weiter und so fort gebunden wird.

Stellen wir uns ein Array mit Zahlen vor:

01 daten = new Array(14, 8, 5, 24, 42, 15);

Listing 6: Array mit sechs Werten definieren.

Jetzt können Sie dieses Array verwenden, um den Absätzen verschiedene dynamische Schriftgrößen zuzuordnen.

01 d3.selectAll(p)

02   .data[(14, 8, 5, 24, 42, 15)]

03   .style(font-size, function(d) {return d + px;

04 });

Listing 7: Schriftgröße für alle p-Elemente dynamisch auf Basis eines Arrays festlegen.

Ein großer Vorteil von D3 ist die Datenanbindung. Ist diese einmal im Dokument hergestellt, kann sie in der Folge weggelassen werden. D3 wird die vorher gebundenen Daten wiederfinden, und damit können Sie die Eigenschaften immer erneut verwenden, ohne sie wieder an das Dokument binden zu müssen.

1.1.3Enter und Exit

Mit diesen beiden Selections können Sie Knoten für neu hinzugekommene Daten anlegen, aber auch jene löschen, deren Daten nicht mehr vorhanden sind oder benötigt werden.

Sobald Sie Daten an eine Selection binden, wird jedes Element des Arrays mit einem Knoten der Auswahl verbunden. Sind jedoch weniger Knoten als Arrayelemente vorhanden, sind diese Extraelemente die enter-Selection. Sie können sie realisieren, indem Sie die neuen Elemente einfach an die Auswahl anhängen. Schauen wir uns das wieder an einem einfachen Beispiel an.

01 d3.select(body).selectAll(p)

02   .data[(14, 8, 5, 24, 42, 15)]

03   .enter().append(p)

04   .text(function(d) {

05     return Ich habe das Element + d + !;

06   });

Listing 8: Elemente der enter-Selection hinzufügen.

Die Standardauswahl ist jene für das Ändern der Knoten, also das Ergebnis für den Datenoperator. Wenn Sie also die enter- und exit-Selection vergessen, werden nur die Nodes, für die Daten existieren, ausgewählt. Eine übliche Herangehensweise ist das Aufteilen der Daten in drei Teile: die Knoten für ein Update, die Knoten für neue Daten und jene Knoten, die entfernt werden sollen.

01 //Vorhandene Knoten aktualisieren

02 var p = d3.select(body).selectAll(p)

03   .data[(14, 8, 5, 24, 42, 15)]

04   .text(String);

05 //Neue Knoten hinzufuegen

06 p.enter().append(p)

07   .text(String);

08 //Veraltete Knoten entfernen

09 p.exit().remove();

Listing 9: Aufteilen der Knoten in drei logische Gruppen.

Wenn Sie diese drei Fälle in Ihrem Quellcode gesondert behandeln, können Sie das Verhalten für die einzelnen Knoten sehr genau definieren. Damit haben Sie eine bessere Performance und auch viel mehr Kontrolle über später zu programmierende Übergänge bzw. Interaktionen.

Der Ansatz von D3 ist das Verändern von Dokumenten auf Basis von Daten, und damit ist auch das Hinzufügen bzw. Löschen von Knoten gemeint. Mit der Bibliothek können Sie ein vorhandenes Dokument als Antwort auf eine Benutzeraktion, nach einer gewissen Zeit oder auch asynchron von einer fremden Datenquelle anpassen. Aber auch eine Mischversion ist denkbar.

Sie können das Dokument komplett am Server erstellen und dem Browser des Anwenders übergeben. Der Anwender kann dann das Dokument mit der Bibliothek D3 aktualisieren.

1.1.4Transitions

Durch die Sichtweise auf die Daten erweitert D3 die in modernen Browsern vorhandenen Übergänge zu animierten Darstellungen. Ein Übergang (in Englisch als transition bezeichnet) ist prinzipiell nichts anderes als eine zeitlich definierte Änderung der Elementformatierung. Diese Übergänge können mit Funktionen wie elastic, linear, bounce oder anderen festgelegt und gesteuert werden.

Übergänge bzw. Animationen werden entweder durch eine Änderung der Datenbasis oder durch die Interaktion des Anwenders mit dem Dokument ausgelöst. In beiden Fällen unterstützt D3 Zahlen und auch Texte, wie sie etwa für die Schriftgröße oder die Position eines Elements benötigt werden.

Wenn wir beispielsweise die Hintergrundfarbe eines Dokuments zu Rot überblenden wollen, benötigen wir folgenden Code:

01 d3.select(body)

02   .style(background-color, red);

Listing 10: Die Hintergrundfarbe eines Dokuments ändern.

1.2Plug-ins von D3.js

Die Bibliothek D3 lässt sich sehr einfach erweitern. Dazu werden sogenannte Plug-ins verwendet. Hierzu ist jedoch nicht, wie bei »normaler« Software, eine zusätzliche Installation notwendig, stattdessen wird für ein Plug-in einfach ein zusätzlicher JavaScript-Code eingesetzt.

Meistens wird dieser Code als externe Datei direkt nach der Bibliothek im head-Element einer Seite eingebunden und erweitert damit D3.

01

02

03   

04     

05     

    src=/js/d3/bullet.js>

06   

07   

08     …

09   

10

Listing 11: Plug-in für D3 aktivieren.

Für einen guten Überblick über vorhandene Plug-ins ist die Webseite von D3 auf GitHub² ein guter Startpunkt.

1.3Das Document Object Model

Jedes HTML-Dokument beruht genau auf dieser Definition des World Wide Web Consortium (kurz W3C). Und gerade für die Arbeit mit JavaScript und auch mit Daten – die Grundlage von D3 – benötigen Sie ein fundamentales Verständnis des DOM.

Die Definition dieser Schnittstelle, um auf XML- und HTML-Dokumente zuzugreifen, geht bereits auf den Anfang des World Wide Web zurück. Durch das Festlegen von Klassen (mit ihren Methoden und Eigenschaften) können Computerprogramme den Inhalt, die Struktur und auch das Layout der Dokumente jederzeit und dynamisch anpassen.

Folgender HTML-Code definiert eine Tabelle mit dem Element table und verschiedenen Unterelementen:

01

02   

03     

04   Vorname

05     

06     Name

07   

08   

09     Clemens

10     Gull

11   

12   

13     Florence

14     Gautier

15   

16

Listing 12: Eine Tabelle in HTML.

Der obige Ausschnitt aus einem HTML-Dokument, um ein table-Element zu definieren, ist Ihnen sicher vertraut. Das DOM bildet das Element und alle Unterelemente in einer Baumstruktur ab, wie es in der folgenden Abbildung gut zu erkennen ist.

Bild 1.1: Die Elementstruktur innerhalb des DOM.

Sie erkennen sehr gut die Baumstruktur und dass alle Elemente (diese werden auch Knoten oder in Englisch Nodes genannt) miteinander in Beziehung stehen.

1.3.1Beziehungen von Knoten

Aus der obigen Abbildung ergeben sich verschiedene Beziehungen der Knoten untereinander. Zusätzlich greifen hier auch noch die Definitionen des W3C ein. Die vorliegende Struktur wird im Objektmodell durch die folgenden Beziehungen charakterisiert:

Der Wurzelknoten (root node) hat drei Kindknoten (children).

Der Wurzelknoten ist das Element table.

Die Kindknoten sind je ein tr-Element.

Aus der Sicht eines tr-Elements ist das table-Element der Elternknoten (parent node)

Knoten mit einem gemeinsamen Elternknoten, beispielsweise die drei tr-Elemente, werden als Geschwisterknoten (siblings) bezeichnet.

Jeder Knoten ist über einen beliebigen Knoten erreichbar. Es gibt also keinen einzigen Knoten, der nicht in der Baumstruktur verknüpft ist.

1.3.2Arten von Knoten

Das W3C hat jeden einzelnen Typ von Knoten genau definiert. Die wichtigsten und für uns notwendigen sind:

Der Dokumentknoten stellt das gesamte Dokument als Baumstruktur dar.

Der Dokumentfragmentknoten ist ein Teil eines Dokuments, so wie vorher das table-Element).

Ein Elementknoten entspricht genau einem Element im Dokument. Im vorherigen Beispiel kann das ein td-Element sein.

Ein Attributknoten enthält bzw. repräsentiert genau eine Eigenschaft eines Elementknotens.

Dies sind spezielle Knoten, denn sie werden nicht in der Baumstruktur abgebildet und sind damit auch keine Kindknoten der einzelnen Elemente. Sie sind vielmehr Attribute bzw. Eigenschaften von Knoten.

Der Inhalt eines Elements wird als Textknoten dargestellt.

1.3.3Verarbeitung von Knoten

Üblicherweise wird ein HTML-Dokument von einem Webserver zu einem Webbrowser beim Anwender übertragen. Der Browser übernimmt das Dokument und verarbeitet es Zeile für Zeile. Dadurch kann der Browser das DOM erstellen, da er die Zeilen überprüft und die Elemente in die Knotenstruktur einfügt.

Wenn der Browser an der letzten Zeile bzw. am letzten Element des Dokuments angekommen ist, wird das DOM bzw. die Baumstruktur vollständig abgebildet. Erst jetzt kann mit der API auf die Inhalte und die Struktur des DOM zugegriffen werden.

Diese Zugriffe können eine Navigation zwischen den einzelnen Knoten sowie das Neuerstellen, Bewegen oder auch Löschen von Knoten oder das Formatieren und Ändern von Inhalten sein.

¹Diese Bibliothek ist online unter http://sizzlejs.com/ verfügbar.

²Sie finden die Seite unter https://github.com/d3.

Visualisierung von Daten

Meiner Meinung nach hat lernen etwas mit machen zu tun. Daher ist es am besten, wenn wir sofort ins kalte Wasser springen und versuchen, Daten zu visualisieren und die Bibliothek D3.js einzusetzen. Natürlich werden wir nicht mit dem schwierigsten beginnen, sondern uns langsam vorarbeiten.

Für das Arbeiten mit Webseiten benötigen wir eine Entwicklungsumgebung. Welche Sie dazu einsetzen, bleibt vollständig Ihnen überlassen. Ich verwende gern Aptana Studio³ oder auch Eclipse⁴. Denn diese beiden Produkte sind einerseits kostenlos im Web verfügbar und andererseits auf den beiden großen Betriebssystemen Microsoft Windows und Mac OS X analog zu bedienen.

2.1Vorbereitung für die Übungen

Bevor Sie mit dem Programmieren beginnen, benötigen Sie noch eine Kleinigkeit.

Natürlich können wir mit einer Internetverbindung immer auf die aktuelle Bibliothek von D3.js zurückgreifen, es ist für Sie im Moment jedoch einfach praktischer, alle Teile der Anwendung lokal auf Ihrem Computer zu haben. Dadurch sind Sie erstens schneller, da Sie keine Internetverbindung nutzen müssen, und zweitens sind Sie unabhängig, denn wenn die Netzverbindung nicht funktioniert, können Sie trotzdem weiterarbeiten. Daher sollten Sie sich jetzt die Bibliothek unter der Webadresse http://d3js.org herunterladen.

Bild 2.1: Download der Bibliothek unter http://d3js.org.

Auch ist jetzt der Zeitpunkt gekommen, eine Verzeichnisstruktur auf der Festplatte zu erstellen, damit Sie alle einzelnen Übungen einfach und schnell anlegen und durchführen können. Wie in der folgenden Abbildung zu sehen ist, benötigen wir vier Unterverzeichnisse:

/css

/data

/images

/js

Bild 2.2: Die Verzeichnisstruktur für die Übungen zu D3.

Nachdem Sie die Bibliothek heruntergeladen haben, müssen Sie das Archiv entpacken und den Inhalt in das Verzeichnis /js kopieren. Damit sollte die Struktur des Projekts wie in der folgenden Abbildung aussehen.

Bild 2.3: Grundstruktur des HTML-Dokuments und des Übungsprojekts.

Nun können wir mit der ersten Übung beginnen.

2.2Erstellen eines Balkendiagramms

Für den Anfang legen Sie sich im Hauptverzeichnis des Projekts eine HTML-Datei mit dem Namen uebung01.html an. Da Sie in HTML 5 arbeiten, können Sie auch gleich die grundlegende Struktur für ein HTML-Dokument erstellen, so wie Sie es im folgenden Listing sehen:

01

02

03   

04     utf-8>

05     

06     

07   

08   

09

10   

11

Listing 13: Die Grundstruktur des HTML-Dokuments für die erste Übung.

2.2.1Die Daten für das Diagramm

Gehen wir davon aus, dass wir sechs verschiedene Werte haben, zum Beispiel