Entwicklung & Design

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

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung