Massenhaft Daten, präsentiert in einem kompakten und vergleichbaren Format. Das ist erfolgreiche Datenvisualisierung - und eine echte Herausforderung.
Große Zeitungen wie die New York Times haben ganze Büros in denen sich Mitarbeiter um nichts anderes kümmern, als diese Daten in einem angemessenen Format zu präsentieren. Datenvisualisierungen im Web sind an sich nichts Neues, doch durch die ständige Entwicklung können immer größere und bessere Visualisierungen erstellt werden. Mittlerweile gibt es einige JavaScript-Bibliotheken, die sich für solche Zwecke bestens eignen. Eine davon werde ich in diesem Blog kurz vorstellen: D3.js.
Mit dieser Bibliothek lassen sich große Datensätze interaktiv in Szene setzen. Das heißt: Im Gegensatz zu einer Datenvisualisierung auf Papier, können die Daten dynamisch dargestellt werden. Damit ist es möglich neue Blickwinkel auf vorhandene Statistiken zu bekommen. Ein weiterer Vorteil der interaktiven Datenvisualisierung ist die Einbindung von Live-Daten. So können bestimmte Änderungen und Trends aktueller Statistiken schneller wahrgenommen werden.
D3.js auf den Punkt gebracht.
D3.js ist eine JavaScript Library, die es ermöglicht Datensätze im Web zu visualisieren. Es können damit sehr leicht SVG Grafiken erstellt und die DOM-Struktur durch Datensätze manipuliert werden. Dafür nutzt D3.js die aktuellen HTML5, CSS3 und SVG Web-Standards.
Eine kleine Einführung.
Mit D3.js können sowohl einfache Balkendiagramme, als auch komplexe Visualisierungen erstellt werden - hauptsächlich durch eine Änderung der DOM-Struktur. Das kann zum Beispiel durch folgenden Code erreicht werden:
d3.selectAll("p").style("color", "white");
Dadurch werden alle
tags umgefärbt. Weiters können viele eingebaute Funktionen von D3.js verwendet werden - diese erinnern häufig auch an jQuery oder Prototype.
Mit folgendem Code können wir jeden zweiten tag grau, bzw. weiß einfärben:
d3.selectAll("p").style("color", function(d, i) {
return i % 2 ? "#fff" : "#eee";
});
Mit dem ersten Parameter (“d”) werden eingebundene Daten, die als Array festgelegt sind, der Funktion übergeben. Der erste Datensatz wird somit beim ersten Node verwendet, der zweite Datensatz beim zweiten Node und so weiter.
So könnten wir zum Beispiel Schriftgrößen dynamisch generieren lassen:
d3.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.style("font-size", function(d) { return d + "px"; });
Durch die “Enter” und “Exit” Methode können dem DOM Elemente hinzugefügt oder entfernt werden.
Und so schaut´s aus: Visualisierungen mit D3.js.
Diese Grafiken sind nur ein kleiner Ausschnitt von dem, was D3.js bietet. Genauere Informationen zu den Visualisierungen gibts unter folgenden Links:
Grafik 1: Mouseover
Grafik 2: Parallel Coordinates
Grafik 3: Sunburst Partition
Tutorial: Wie erstellt man ein einfaches Balkendiagramm mit D3.js?
Hierfür erstellen wir ein neues SVG mit 500px Breite und 100px Höhe - und fügen es dem DOM hinzu.
var w = 500;
var h = 100;
var barPadding = 1;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19, 14, 11, 22, 29, 11, 13, 12, 17, 18, 10];
Für unser Tutorial nehmen wir statische Daten (hier können später alle möglichen Daten eingesetzt oder auch dynamisch erzeugt werden). Diese werden in der Variable "dataset" gespeichert.
Mit dem folgenden Block erstellen wir die Rechtecke - die Grundlage für unser Balkendiagramm:
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y", function(d) {
return h - (d * 2);
})
Mit “y” wird die Position auf der y-Achse bestimmt. Durch die Funktion h (Höhe) - d (zugehöriger Datensatz), können wir alle Balken auf der selben Höhe positionieren.
Im Folgenden sehen wir den Unterschied, ob wir eine fixe Position angeben (Chart I), oder diese für jeden Datensatz berechnen müssen (Chart II).
Chart I:
Chart II:
Auch die Breite wird dynamisch errechnet - so verteilen sich die Balken über die gesamte Breite des SVG. Wir erinnern uns, zu Beginn haben wir die Variable barPadding definiert. Diese gibt den Abstand zwischen den einzelnen Balken an.
.attr("width", w / dataset.length - barPadding)
Die Höhe der Balken errechnet sich aus dem Datensatz. Ich verwende hier jeweils das 4-fache um die unterschiede zwischen den Werten besser erkennen zu können.
.attr("height", function(d) {
return d * 4;
})
Die Position auf der x-Achse errechnet sich aus dem Index ("i"), der bei jedem durchgegangenen Datensatz um 1 erhöht wird.
.attr("x", function(d, i) {
return i * (w / dataset.length);
})
Zu guter Letzt bestimmen wir noch eine Farbe für die Balken, welche wiederum dynamisch errechnet wird. Dabei gilt: Je größer der Wert, umso intensiver der Blauton.
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
Damit wir den einzelnen Balken ihre Werte zuordnen können erstellen wir eine Legende. Als Text geben wir den jeweiligen Wert aus.
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
Damit der Wert beim richtigen Balken angzeigt wird, müssen wir die genaue Position auf der x-Achse errechnen.
.attr("x", function(d, i) {
return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})
Und ebenso wie für die Balken, muss auch die Position der Texte berechnet werden. Mit der folgenden Funktion setzen wir den Text immer knapp unter das obere Ende des Balkens.
.attr("y", function(d) {
return h - (d * 2) + 14;
})
Das genaue Aussehen der Legende beschreiben wir mit diesen Attributen.
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white")
.attr("text-anchor", "middle");
Und hier gibt's noch den kompletten Code:
Somit haben wir ein fertiges Balkendiagramm, das nach belieben erweitert werden kann.
Mein Fazit.
Mir persönlich gefällt D3.js sehr gut, da man sehr schnell Ergebnisse erzielen kann. Es genügen wenige Zeilen Code, um einfache Graphen und Diagramme zu generieren. Besonders die Möglichkeit interaktive Visualisierungen erstellen zu können, finde ich sehr spannend. Denn hier kann der Betrachter der Grafik selbst mitwirken. Auch komplexere Grafiken und animierte Visualisierungen sind für D3.js kein Problem - wie man hier sehen kann: http://bl.ocks.org/mbostock/1256572.
Anhand der Beispiele auf der Website D3js.org bekommt man einen guten Eindruck über die vielen Möglichkeiten der JavaScript Library. Ich denke, wenn jemand Datenvisualisierungen jeglicher Art für das Web erstellen möchte, ist er mit D3.js gut bedient.
---
Textquelle: http://d3js.org
Bildquelle: http://mbostock.github.io/d3/talk/20111116/bundle.html
