Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 38

Big Data im Netz visualisieren: So funktioniert die JavaScript-Bibliothek D3

Big Data im Netz visualisieren (Grafik: mamanamsai2 / iStock)

Die Visualisierung großer Datenmengen und komplexer Strukturen erfährt vor allem in Unternehmen eine wachsende Relevanz. Damit steigt der Bedarf, diese in Web-Anwendungen zu integrieren, um sie Partnern oder Kunden unkompliziert zu präsentieren. D3 ist eine mächtige JavaScript-Bibliothek, die Entwicklern genau dabei helfen kann. Das folgende Tutorial zeigt, wie der schnelle Einstieg gelingt.

D3 ist eine der mächtigsten unter der Vielzahl aktuell verfügbarer JavaScript-Bibliotheken zur Datenvisualisierung. Bereits die D3 Gallery verrät, dass von einfachen Datentabellen über aufwendig gestylte und animierte Charts bis hin zu hochkomplexen und auch interaktiven Diagrammen scheinbar nur den Fähigkeiten des Entwicklers Grenzen gesetzt sind. Nicht zuletzt die Tatsache, dass die Bibliothek unter der BSD-Lizenz veröffentlicht wird, macht einen genaueren Blick auf diese Library sehr lohnenswert.

Data-Driven Documents

D3 steht für „Data-Driven Documents“ und wird seit 2011 von Mike Bostock als Open-Source-Bibliothek für Datenvisualisierung auf Github veröffentlicht, kontinuierlich erweitert und optimiert. Die Bibliothek erlaubt die Manipulation des DOM von HTML-Dokumenten auf der Grundlage von Datensätzen. Dafür nutzt sie die Möglichkeiten moderner Browser wie Chrome, Safari, Firefox, Opera oder IE9+ sowie der aktuellen Webstandards CSS3, HTML5 und SVG.

Müssen auch ältere Browser unterstützt werden, bietet sich eher das Pendant R2D3 an. Dabei handelt es sich um ein angepasstes D3, das durch die Kombination mit der Library Raphaël bis zum IE7 lauffähig ist. Allerdings sind hier die Entwicklungszyklen wesentlich länger und weit hinter dem Stand der aktuellen D3-Version, weshalb ein Einsatz nicht wirklich zu empfehlen ist.

Bei der Entwicklung von D3 wird besonderer Wert auf eine maximale Flexibilität gelegt. Hohe Performance in der Verarbeitung großer Datenmengen und die Möglichkeit der dynamischen Manipulation von Animationen und Interaktionen sind weitere Features des Frameworks.

Mit D3 lassen sich hervorragende Visualisierungen auf Datenbasis erstellen, die mit Animationen und Möglichkeiten zur Nutzerinteraktion erweiterbar sind. (Screenshot: d3js.org)
Mit D3 lassen sich hervorragende Visualisierungen auf Datenbasis erstellen, die mit Animationen und Möglichkeiten zur Nutzerinteraktion erweiterbar sind. (Screenshot: d3js.org)

Dieses besteht neben dem Core aus den Komponenten Scales, SVG, Time, Layouts, Geography, Geometry und Behaviours. Im Kern verankert sind unter anderem Funktionen zur Auswahl von DOM-Elementen, zur Erstellung von Animationen, Verarbeitung von Daten und Manipulation von Farben. Die Bezeichnungen der anderen Komponenten deuten bereits auf ihre Funktionen hin. Eine detaillierte Erklärung findet sich in der API-Referenz von D3. Darüber hinaus kann man die Funktionalität wie bei jQuery über Plugins erweitern, sollten die integrierten Möglichkeiten einmal doch nicht ausreichen. Eine weitere Ähnlichkeit zu jQuery ist das praktische Chaining, also das Verketten von Funktionen.

DER EINSTIEG IN D3

Anhand eines einfachen Beispiels, in Anlehnung an Swizec Tellers „Data Visualisation with D3.js“, lassen sich die Grundlagen von D3 nachvollziehen. Als Datenbasis sollen hier die unter den t3n-Mediadaten veröffentlichten t3n-Facts dienen. Das Ziel ist die vergleichende Darstellung aktueller Reichweiten der verschiedenen t3n-Kanäle als Visualisierung in einem Säulendiagramm.

Zu Beginn dieses Tutorials ist es notwendig, die D3-Library herunterzuladen und in ein HTML5-Dokument einzubinden. Dies muss nicht im Head-Bereich, sondern kann kurz vor dem schließenden Body-Tag geschehen. Alternativ zum Download ist es auch möglich, das Skript zum Testen direkt von d3js.org einzubinden.

D3 EINBINDEN

<script xsrc="js/d3.min.js" charset="utf-8"></script>

Listing 1

Es ist empfehlenswert, den Beispielcode auf einem Server auszuführen, um mögliche Probleme mit den Sicherheitsvorkehrungen des Browsers bei einem AJAX-Request zu umgehen. Der Localhost des Entwicklungsrechners ist hier meist eine geeignete Lösung.

Die nachfolgend aufgeführte Projektstruktur ist nicht direkt für die Arbeit mit D3 notwendig. Sie dient vielmehr als Konvention zur klaren Trennung von Inhalt, Struktur und Funktionalität zwecks besserer Übersichtlichkeit und Wartbarkeit. Das direkte Integrieren der Daten in das Anwendungsskript ist ebenso wenig empfehlenswert, wie HTML mit Inline-Style-Angaben anzureichern.

ALLGEMEINE PROJEKTSTRUKTUR

projekt/
 |- css/
   |- main.css
 |- data/
   |- data.json 
|- js/
   |- d3.min.js
   |- app.js
 index.html

Listing 2

In dem minimalen HTML-Gerüst spiegelt sich die Projektstruktur wieder, und es bildet die Basis zur Visualisierung der Daten. Neben der Einbindung von Stylesheets und Skripten empfiehlt es sich, einen DIV-Container bereitzustellen, in den später das Säulendiagramm gerendert wird. Der Container erhält die frei gewählte ID „bar-chart“ als eindeutigen Selektor.

BASIC HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>d3js | t3n Social-Media-Reichweiten im Vergleich</title>
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
   <div id="bar-chart"></div>
   <script xsrc="js/d3.min.js"></script>
   <script xsrc="js/app.js"></script>
</body>
</html>

Listing 3

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden