D3-Praxisbuch (eBook)

1
Einleitung

D3.js (oder kurz D3 für Data-Driven Documents, also »datengestützte Dokumente«) ist eine JavaScript-Bibliothek, die dazu dient, den DOM-Baum (Document Object Model) zu bearbeiten, um Informationen grafisch darzustellen. Sie ist zu einem De-facto-Standard für Infografiken im Web geworden.

Trotz ihrer Beliebtheit wird D3 eine steile Lernkurve nachgesagt. Meiner Meinung nach liegt das nicht daran, dass D3 kompliziert wäre (was sie nicht ist), und auch nicht an ihrer umfangreichen API (die zwar groß, aber gut strukturiert und sehr gut gestaltet ist). Viele der Schwierigkeiten, mit denen neue Benutzer zu kämpfen haben, sind, so glaube ich, auf falsche Vorstellungen zurückzuführen. Da D3 verwendet wird, um eindrucksvolle Grafiken zu erstellen, liegt es nahe, sie als »Grafikbibliothek« anzusehen, die den Umgang mit grafischen Grundelementen erleichtert und es ermöglicht, gängige Arten von Plots zu erstellen, ohne sich um die Einzelheiten kümmern zu müssen. Neulinge, die sich D3 mit dieser Erwartung nähern, sind unangenehm überrascht von der Ausführlichkeit, mit der so grundlegende Dinge wie die die Farbe eines Elements festzulegen sind. Und was hat es mit diesen ganzen »Selections« auf sich? Warum kann man nicht einfach ein leinwandartiges Element verwenden?

Das Missverständnis beruht darauf, dass D3 eben keine Grafikbibliothek ist, sondern eine JavaScript-Bibliothek zur Bearbeitung des DOM-Baums. Ihre Grundbausteine sind keine Kreise und Rechtecke, sondern Knoten und DOM-Elemente. Die typischen Vorgehensweisen bestehen nicht darin, grafische Formen auf eine »Leinwand« (Canvas) zu zeichnen, sondern Elemente durch Attribute zu formatieren. Die »aktuelle Position« wird nicht durch x/y-Koordinaten auf einer Leinwand angegeben, sondern durch die Auswahl von Knoten im DOM-Baum.

Das führt – aus meiner Sicht – zu dem zweiten Hauptproblem für viele neue Benutzer: Bei D3 handelt es sich um eine Webtechnologie, die sich auf andere Webtechnologien stützt, auf die DOM-API und das Ereignismodell, auf CSS-Selektoren und -Eigenschaften (Cascading Style Sheets), auf das JavaScript-Objektmodell und natürlich auf das SVG-Format (Scalable Vector Graphics). In vielen Aspekten stellt D3 nur eine relativ dünne Schicht über diesen Webtechnologien dar und ihr eigenes Design spiegelt oft die zugrunde liegenden APIs wider. Das führt zu einer sehr umfangreichen und uneinheitlichen Umgebung. Wenn Sie bereits mit dem kompletten Satz moderner Webtechnologien vertraut sind, der als HTML5 bekannt ist, werden Sie sich darin zu Hause fühlen, doch wenn nicht, dann kann das Fehlen einer ausgeprägten, einheitlichen Abstraktionsschicht ziemlich verwirrend sein.

Glücklicherweise müssen Sie nicht sämtliche dieser zugrunde liegenden Technologien ausgiebig studieren. D3 erleichtert ihre Nutzung und bietet eine erhebliche Vereinheitlichung und Abstraktion. Der einzige Bereich, in dem es definitiv nicht möglich ist, sich einfach durchzumogeln, ist SVG. Sie müssen auf jeden Fall ein ausreichendes Verständnis von SVG mitbringen, und zwar nicht nur der darstellenden Elemente, sondern auch der Strukturelemente, die steuern, wie die Informationen in einem Graphen gegliedert sind. Alles, was Sie wissen müssen, habe ich in Anhang B zusammengestellt. Wenn Sie mit SVG nicht vertraut sind, sollten Sie diesen Anhang durcharbeiten, bevor Sie sich an den Rest des Buches machen. Sie werden später dafür dankbar sein.

Zielgruppe

Dieses Buch ist für Programmierer und Wissenschaftler gedacht, die D3 zu ihrem Werkzeugkasten hinzufügen möchten. Ich gehe davon aus, dass Sie ausreichende Erfahrungen als Programmierer aufweisen und ohne Schwierigkeiten mit Daten und Grafiken arbeiten können. Allerdings erwarte ich nicht, dass Sie mehr als oberflächliche Kenntnisse in professioneller Webentwicklung haben.

Folgende Voraussetzungen sollten Sie mitbringen:

• Kenntnisse in einer oder zwei Programmiersprachen (nicht unbedingt JavaScript) und ausreichend Selbstvertrauen, um sich die Syntax einer neuen Sprache aus ihrer Referenz anzueignen.
• Vertrautheit mit modernen Programmierkonzepten, also nicht nur mit Schleifen, Bedingungen und gewöhnlichen Datenstrukturen, sondern auch mit Closures und Funktionen höherer Ordnung.
• Grundkenntnisse in XML und der hierarchischen Struktur von XML-Dokumenten. Ich erwarte, dass Sie das DOM kennen und wissen, dass es die Elemente einer Webseite als Knoten eines Baums behandelt. Allerdings setze ich nicht voraus, dass Sie mit der ursprünglichen DOM-API oder einem ihrer modernen Nachfolger (wie jQuery) vertraut sind.
• Einfache Kenntnisse in HTML und CSS (Sie sollten in der Lage sein, <body>- und <p>-Tags usw. zu erkennen und zu verwenden) sowie eine gewisse Vertrautheit mit der Syntax und den Mechanismen von CSS.

Insbesondere aber gehe ich davon aus, dass meine Leser ungeduldig sind: erfahren und fähig, aber frustriert von früheren Versuchen, mit D3 zurechtzukommen. Wenn Sie sich darin wiedererkennen, dann ist dieses Buch genau das richtige für Sie!

Warum D3?

Warum sollten sich Programmierer und Wissenschaftler – oder überhaupt irgendwelche Personen, die nicht vorrangig Webentwickler sind – mit D3 beschäftigen? Dafür gibt es vor allem die folgenden Gründe:

• D3 bietet eine bequeme Möglichkeit, um Grafiken im Web zu verbreiten. Wenn Sie mit Daten und Visualisierungen arbeiten, kennen Sie ja den Vorgang: Sie erstellen Diagramme in ihrem bevorzugten Plotprogramm, speichern die Ergebnisse als PNG oder PDF und erstellen dann eine Webseite mit <img>-Tags, sodass andere Ihre Arbeit einsehen können. Wäre es nicht schöner, wenn Sie Ihre Diagramme in einem Schritt erstellen und veröffentlichen könnten?
• Noch wichtiger ist jedoch der Umstand, dass es mit D3 auf einfache und komfortable Weise möglich ist, animierte und interaktive Grafiken zu erstellen. Dieser Punkt kann gar nicht deutlich genug herausgestellt werden: Die Visualisierung wissenschaftlicher Daten profitiert genauso von Animation und Interaktivität wie jeder Bereich, allerdings ließ sich dies früher nur schwer erreichen, es erforderte meistens komplizierte und unpassende Technologien (haben Sie sich jemals an Xlib-Programmierung versucht?) oder spezialisierte und oftmals teure kommerzielle Lösungen. Mit D3 können Sie diese Hürden überwinden und Ihre zeitgemäßen Visualisierungsbedürfnisse erfüllen.
• Ganz abgesehen von Grafiken ist D3 ein gut zugängliches, leicht zu lernenden und leicht zu verwendendes Framework zur DOM-Bearbeitung für alle möglichen Zwecke. Wenn Sie hin und wieder mit dem DOM arbeiten müssen, kann D3 dazu völlig ausreichen, sodass Sie nicht auch noch das Beherrschen aller anderen Frameworks und APIs für die Webprogrammierung erlernen müssen. Der Aufbau der Bibliothek selbst ist außerdem ein bemerkenswertes Modell der Funktionalitäten für gängige Datenbearbeitungs- und Visualisierungsaufgaben, die sie im Lieferzustand mitbringt.

Vor allem aber bin ich der Meinung, dass D3 eine emanzipierende Technologie ist, die es ihren Benutzern erlaubt, ihren Bestand an verfügbaren Lösungsmöglichkeiten ganz allgemein zu erweitern. Die bemerkenswertesten Nutzanwendungen von D3 sind wahrscheinlich diejenigen, die noch nicht entdeckt wurden.

Was Sie in diesem Buch finden werden ...

Dieses Buch soll eine möglichst umfassende und gleichzeitig knappe Einführung in D3 sein, die die wichtigsten Aspekte in ausreichender Tiefe darstellt.

• Es soll als komfortables, zentrales Nachschlagewerk dienen, da es sowohl die API-Referenzdokumentation als auch Hintergrundinformationen zu verwandten Themen bietet, mit denen Sie nicht unbedingt vertraut sein müssen (wie SVG, JavaScript und das DOM, aber auch Farbräume und das canvas-Element von HTML).
• Der Schwerpunkt liegt auf Mechanismen und Gestaltungsprinzipien und nicht auf vorgefertigten »Kochrezepten«. Ich gehe davon aus, dass Sie D3 gründlich genug lernen wollen, um es für Ihre eigenen und möglicherweise neuartigen und unvorhergesehenen Zwecke einzusetzen.

Im Grunde genommen wünsche ich mir, dass dieses Buch Sie auf die Dinge vorbereitet, die Sie mit D3 tun können, an die ich aber selbst niemals gedacht hätte.

... und was nicht!

Dieses Buch ist bewusst auf D3 und die Möglichkeiten und Mechanismen dieser Bibliothek beschränkt. Daher fehlt eine ganze Reihe von Dingen:

• Ausführliche Fallstudien und Kochrezepte
• Einführungen in Datenanalyse, Statistik und Grafikdesign
• Andere JavaScript-Frameworks als D3
• Allgemeine Erörterung der modernen Webentwicklung

Ich möchte insbesondere...