Entwicklung & Design

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

Seite 2 / 3

DATEN MIT FORMAT

D3 zeichnet sich unter anderem dadurch aus, dass es mit den unterschiedlichsten Dateiformaten umgehen kann. TEXT, JSON, XML, HTML, CSV oder TSV lassen sich – eine valide Datenstruktur vorausgesetzt – problemlos verarbeiten. Da sich JSON für kleinere, strukturierte Datenmengen sehr gut eignet, werden die t3n-Facts als Schlüssel-Werte-Paare in einem JSON-Array als Datei data.json abgelegt. Der Name der Datei ist auch hier frei wählbar. Gleiches gilt für den Aufbau der validen JSON-Datei.

DATA.JSON

[
 {"channel":"Magazin-Leser","quantity": 54000},
 {"channel":"Registrierte User","quantity": 42000},
 {"channel":"Twitter-Follower","quantity": 38800},
 {"channel":"Twitter-Follower","quantity": 38800},
 {"channel":"Facebook-Fans","quantity": 70000},
 {"channel":"Google+-Follower","quantity": 51700},
 {"channel":"t3n-Newsletter-Empfänger","quantity": 21000},
 {"channel":"RSS-Feed-Abonnenten","quantity": 17000}
]

Listing 4

POSITION BEZIEHEN

Nun gilt es, sich der Datei app.js zu widmen, die den Code zur Generierung des Säulendiagramms aufnehmen soll. Zuerst werden die Dimensionen des Diagramms und dessen Randabstände bestimmt. In den Variablen „leftPadding“ und „bottomPadding“ legen wir einen größeren Abstand nach links und unten fest, der für die Darstellung der Achsenlabels notwendig ist.

APP.JS: DIMENSIONEN DES DIAGRAMMS

var width = 600, height = 300,
     padding = 20, leftPadding = 100; bottomPadding = 120;

Listing 5

Es müssen nicht immer Balken oder Torten sein - D3 ermöglicht mannigfaltige Visualisierungen, die Big Data begreifbar machen. (Screenshit: github.com)

Es müssen nicht immer Balken oder Torten sein – D3 ermöglicht mannigfaltige Visualisierungen, die Big Data begreifbar machen. (Screenshit: github.com)

Als nächstes brauchen wir eine Skala für die x-Achse. Beim Säulendiagramm nutzt man dafür die Ordinalskala, die D3 mit der Funktion ordinal() bereitstellt. rangeRoundBands sorgt dann dafür, dass die Auswahl an zu verarbeitenden Werten in separate Säulen unterteilt wird.

Diese Funktion verhindert zudem Antialiasing-Artefakte bei der Darstellung durch Nutzung von ganzen Zahlen.Für das Beispiel kommen später die Werte mit dem Schlüssel „quantity“ aus data.json zum Einsatz, welche hier zwischen 17000 und 70000 liegen. leftPadding und width-padding legen den Bereich fest, in dem die Säulen aufgeteilt werden. Auch der Abstand zwischen den Säulen lässt sich einstellen. Im Beispiel besitzt er den Zahlenwert 0.1.

Zur linearen Skalierung der y-Achse nutzen wir die Funktion linear(). Der Bereich für die Darstellung der Achse wird mit height – bottomPadding sowie padding definiert. Zu beachten ist hierbei, den Bereich umgekehrt anzugeben, da D3.js immer von y=0 ausgeht.

APP.JS: SKALIERUNG DER ACHSEN

...
var x = d3.scale.ordinal()
    .rangeRoundBands([leftPadding, width - padding],0.1);
var y = d3.scale.linear()
    .range([height - bottomPadding, padding]);

Listing 6

Die Definition der beiden Achsen erfolgt nun mit Hilfe des Funktionsaufrufs d3.svg.axis(). Der folgenden Funktion scale() wird mit den Variablen x oder y jeweils übergeben, welche Skalierung genutzt werden soll. Die Lage der Achsenbezeichnung bestimmt man mit Hilfe von orient().

APP.JS: DEFINITION DER ACHSEN

...
var abscissa = d3.svg.axis().scale(x).orient("bottom");
var ordinate = d3.svg.axis().scale(y).orient("left");

Listing 7

Bevor die JSON-Daten geladen werden können, muss nun noch das SVG-Element definiert und dem DIV-Container #bar-chart zugewiesen werden. Zur einfacheren Verwendung wird dies ebenfalls als Variable angelegt. Abschließend erfolgt die Deklaration des Objekts data, welches später mit Daten befüllt wird.

APP.JS: DATEN PER AJAX LADEN

...
var svg = d3.select("#bar-chart").append("svg")
     .attr("width", width).attr("height", height);
var data;

Listing 8

AJAX INKLUSIVE: LADEN VON DATENSÄTZEN

Eines der Hauptargumente für den Einsatz von D3.js ist die Möglichkeit des asynchronen Ladens von Daten. Dafür stehen komfortable Funktionen zum Datenimport bereit. Der folgende Funktionsaufruf erzeugt einen AJAX-Request, um die JSON-Datei zu laden, parst den zurückgelieferten Text und speichert ihn in das JavaScript-Objekt data. Ab hier wird der weitere Code innerhalb dieses Callbacks geschrieben, um auf die Daten zugreifen zu können.

APP.JS: DEFINITION DES SVG ELEMENTS

...
d3.json("./data/data.json", function(data) {
  // weiterer Code innerhalb dieses Callbacks
});

Listing 9

Die zuvor definierten Skalen für x- und y-Achse müssen nun einem Wertebereich zugeordnet werden. Mit der D3-Funktion domain() lassen sich die Werte aus dem gefüllten data-Objekt auf die Achsen mappen. Der Wertebereich der x-Achse ist hier eine Auflistung einzelner Werte, die mit data.map(function(d) { return d.channel; }) der Achse zugeordnet werden. Die Daten lassen sich dabei über den Schlüssel channel auswählen. Für die y-Achse wird der Wertebereich ausgehend von 0 bis zum größten Wert innerhalb des Datensatzes via d3.max() mit dem Schlüssel quantity festgelegt.

APP.JS: ZUWEISUNG DER DOMAINS

...
x.domain(data.map(function(d) { return d.channel; }));
y.domain([0, d3.max(data, function(d) { return d.quantity; })]);
...

Listing 10

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!