Observable Plot & D3.js

D3.js (Data-Driven Documents) ist die führende JavaScript-Bibliothek für anspruchsvolle, interaktive Datenvisualisierungen im Web – und Observable Plot ist die zugänglichere, deklarative Alternative desselben Schöpfers.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Infografik & Datenvisualisierung · Niveau: Einsteiger

Was ist D3.js?

D3.js (Data-Driven Documents) wurde von Mike Bostock entwickelt und 2011 veröffentlicht. Es ist die meistgenutzte JavaScript-Bibliothek für Datenvisualisierungen im Web und bildet die Grundlage für viele andere Tools – darunter Datawrapper, Vega-Lite und teilweise Flourish.

D3 bindet Daten an DOM-Elemente (meist SVG oder Canvas) und transformiert deren visuelle Eigenschaften entsprechend den Datenwerten. Das klingt abstrakt, bedeutet aber in der Praxis: Volle Kontrolle über jeden Pixel, jede Animation, jede Interaktion.

Observable Plot ist eine 2022 von Mike Bostock (in der Zwischenzeit Gründer von Observable Inc.) veröffentlichte, hochrangige Bibliothek, die auf D3 aufbaut und einen einfacheren, deklarativen Ansatz für Standard-Visualisierungen bietet.

Erklärung

Das D3-Paradigma: Datenbindung

D3s Kerntechnik ist die Datenbindung (data join): Daten werden an DOM-Elemente gebunden, und die visuellen Eigenschaften der Elemente werden datenabhängig gesetzt. Das Muster lautet:

``javascript d3.select("svg") .selectAll("rect") .data(dataset) .join("rect") .attr("width", d => skala(d.wert)) .attr("height", balkenBreite); ``

Dieses Paradigma ist mächtig aber ungewohnt: Es erfordert Verständnis von Selektion, Datenbindung, Enter/Update/Exit-Übergängen und Skalenfunktionen.

Skalenfunktionen:

D3 bietet ein umfangreiches Set an Skalenfunktionen, die Datenwerte in visuelle Eigenschaften übersetzen:

• d3.scaleLinear() – lineare numerische Skala (Achsen, Längen)
• d3.scaleTime() – Zeitskala für Datumsachsen
• d3.scaleBand() – diskrete Kategorien-Skala (Balkendiagramme)
• d3.scaleOrdinal() – Kategorien auf Farben
• d3.scaleSequential() – kontinuierliche Werte auf Farbspektren
• d3.scaleLog() – logarithmische Skala

Layoutmodule:

D3 bietet Helfermodule für komplexe Layouts:

• d3.pie() / d3.arc() – Tortendiagramme
• d3.line() – Liniendiagramme
• d3.area() – Flächendiagramme
• d3.treemap() – Treemaps
• d3.hierarchy() – Baumstrukturen
• d3-force – Physik-Simulation für Netzwerkgraphen
• d3.sankey() (Plugin) – Sankey-Diagramme
• d3-geo – geographische Projektionen für Karten

Die Lernkurve:

D3 hat eine steile Lernkurve. Voraussetzungen: solide JavaScript-Kenntnisse, Verständnis von DOM/SVG, grundlegende CSS-Kenntnisse. Der übliche Weg: tutorials auf Observable Notebooks (observablehq.com), dann eigene Projekte. Die D3-Dokumentation ist ausführlich, aber für Einsteigerinnen und Einsteiger oft herausfordernd.

Observable Plot – die einfachere Alternative:

Observable Plot (github.com/observablehq/plot) bietet eine deklarative API, die für Standard-Visualisierungen deutlich weniger Code erfordert:

``javascript Plot.plot({ marks: [ Plot.barY(data, {x: "kategorie", y: "wert", fill: "blau"}) ] }) ``

Observable Plot ist keine vereinfachte Version von D3 – es ist eine eigene Bibliothek mit eigenen Abstraktionen (Marks, Scales, Facets). Für Standard-Diagramme ist es schneller als D3; für hoch-individuelle Darstellungen bleibt D3 flexibler.

Einsatz in der Praxis:

Die meisten datengetriebenen Redaktionen nutzen D3 für maßgeschneiderte, interaktive Visualisierungen, die in keinem Template-Tool abgebildet werden können. Die New York Times, The Guardian und Spiegel Online setzen D3 für ihre aufwendigen interaktiven Projekte ein. Für den Redaktionsalltag verwenden dieselben Redaktionen aber oft Datawrapper oder Flourish für schnellere Visualisierungen.

Wann einsetzen / wann nicht

D3.js / Observable Plot einsetzen, wenn:

• Volle gestalterische Kontrolle über jedes Detail der Visualisierung nötig ist.
• Ungewöhnliche oder maßgeschneiderte Diagrammtypen erstellt werden, die kein Template-Tool bietet.
• Hochgradig interaktive Visualisierungen mit komplexen Interaktionslogiken entwickelt werden.
• Die Infrastruktur selbst gehostet werden soll (kein Drittanbieter-Hosting).
• JavaScript-Programmierkenntnisse vorhanden sind.

Nicht einsetzen, wenn:

• Keine JavaScript-Kenntnisse vorhanden sind und die Lernkurve nicht investiert werden kann.
• Standard-Chart-Typen schnell erstellt werden sollen – Datawrapper ist 10x schneller.
• Animationen und Story-Funktionen ohne Code benötigt werden – Flourish ist besser.
• Das Team keine technischen Ressourcen für Wartung und Updates hat.

Beispiele (5 konkrete)

1. New York Times „The Upshot": Eines der bekanntesten D3-Einsatzgebiete – interaktive Wahlkarten, Scatter Plots für Gesundheitsdaten, bewegliche Grafiken. Vollständig mit D3 gebaut.
2. Spiegel Online Netzwerkgraph: Visualisierung von Verbindungen zwischen politischen Figuren und Unternehmen im Rahmen einer Investigativ-Geschichte. D3-Force-Directed-Graph.
3. Benutzerdefinierte Kartenprojektion: Eine Klimaredaktion braucht eine Winkel-Gleichflächen-Projektion für globale Temperaturdaten. D3-Geo bietet über 50 verschiedene Projektionen, die kein Template-Tool abdeckt.
4. Echtzeit-Dashboard: Eine Redaktion zeigt Twitter-Sentiment in Echtzeit während einer Wahlnacht als Liniendiagramm mit rollenden 5-Minuten-Fenstern. D3 liest via WebSocket Live-Daten ein und aktualisiert das Diagramm dynamisch.
5. Observable Notebook als Lehrmittel: Eine Datenjournalismus-Klasse nutzt Observable Notebooks (observablehq.com), um interaktiv mit D3 zu experimentieren. Änderungen im Code sind sofort sichtbar – ideal für das Erlernen der Bibliothek.

In der Praxis

Einstieg in D3.js:

1. Offizielle D3-Webseite: d3js.org – Dokumentation und Beispiele.
2. Observable Notebooks: observablehq.com/@d3 – interaktive Tutorials von Mike Bostock.
3. Buch: Amelia Wattenberger: „Fullstack D3 and Data Visualization" (2019) – praxisnah und modern.
4. Empfehlung: Mit Observable Plot beginnen, dann zu D3 wechseln, wenn mehr Kontrolle nötig ist.

Entwicklungsumgebung: D3 wird über npm (npm install d3) oder via CDN (<script src="https://d3js.org/d3.v7.min.js">) eingebunden. Lokale Entwicklung mit einem einfachen HTTP-Server (z. B. npx serve). Empfohlener Editor: VS Code mit Live Server Extension.

Observable Plot Quickstart: ```javascript import * as Plot from "@observablehq/plot";

const chart = Plot.plot({ marks: [ Plot.dot(data, {x: "bip", y: "lebenserwartung", r: "bevoelkerung", fill: "region"}) ] }); document.body.appendChild(chart); ```

Vergleich & Abgrenzung

Vega-Lite ist eine weitere Alternative: Visualisierungen werden in JSON beschrieben, kein JavaScript-Code nötig. Gut für reproduzierbare wissenschaftliche Visualisierungen; weniger für individuelle journalistische Grafiken.

Häufige Fragen (FAQ)

Muss ich D3.js lernen, wenn ich Dataviz machen will? Nein – für die meisten journalistischen und kommunikativen Aufgaben reichen Datawrapper und Flourish vollständig. D3.js ist sinnvoll, wenn Sie komplexe, interaktive, vollständig angepasste Visualisierungen erstellen wollen und bereit sind, JavaScript zu lernen. Für den Einstieg in datengetriebene Visualisierungen empfiehlt sich: Datawrapper zuerst, dann Observable Plot, dann D3.

Was ist der Unterschied zwischen D3.js und Observable Plot? D3.js ist eine Low-Level-Bibliothek: Sie gibt Werkzeuge für Skalierungen, Selektion, Layout und Rendering – aber kein fertiges Diagramm-Konzept. Observable Plot ist High-Level: Sie definieren Marks (Plot.barY, Plot.dot, Plot.line) und Plot baut das Diagramm automatisch auf. Observable Plot ist ca. 3–5x schneller zu schreiben als äquivalenter D3-Code, aber weniger flexibel bei Spezialanforderungen.

Verwandte Einträge

• Datawrapper — Für Standard-Charts ohne Programmierkenntnisse
• Flourish — Für animierte Charts ohne Code
• Netzwerkgraph — D3-Force-Layouts für Netzwerke

Weiterführend

• D3.js Dokumentation: d3js.org
• Observable Notebooks: observablehq.com
• Wattenberger, A. (2019). Fullstack D3 and Data Visualization. Newline.
• Murray, S. (2017). Interactive Data Visualization for the Web (2. Aufl.). O'Reilly Media. (D3.js Standardlehrbuch)
• Wilke, C. O. (2019). Fundamentals of Data Visualization. O'Reilly Media.