Entwicklung & Design

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

Seite 3 / 3

DAS DIAGRAMM ZEICHNEN

Dem SVG-Element wird zunächst ein Element g hinzugefügt. Letzterem werden die Klassen axis und abscissa mitgegeben, über die es dann per CSS gestylt werden kann. Mit Hilfe des transform-Attributes erfolgt die Positionierung der x-Achse innerhalb des Diagramms. Da die zugehörigen Labels recht lang sind, ist es sinnvoll, diese leicht zu drehen und mit etwas Abstand zur Achse zu positionieren. Die abschließend aufgerufene Funktion call() mit der Variablen abscissa wendet die vorherigen Funktionen auf die jeweilige Achse an.

Das Zeichnen der y-Achse ist in diesem Fall weniger umfangreich zu beschreiben, da die Labels nicht positioniert werden müssen. Es genügt, die entsprechenden Argumente auszutauschen. Die Aufteilung und Beschriftung der Achse(n) wird vollständig von D3.js übernommen.

APP.JS: ZEICHNEN DER ACHSEN

...
// Zeichnen der x-Achse
svg.append("g")
   .attr("class", "axis abscissa")
   .attr("transform", 
 "translate(0, "+ (height - bottomPadding)+")")
   .call(abscissa) 

 // Positionierung der Label
   .selectAll("text")
   .style("text-anchor", "end")
   .attr("dx", "-.5em")
   .attr("dy", ".15em")
   .attr("transform", function(d) 
    { return "rotate(-25)" }
    );

// Zeichnen der y-Achse
svg.append("g")
   .attr("class", "axis ordinate")
   .attr("transform", "translate("+(leftPadding)+", 0)")
   .call(ordinate);
...

Listing 11

Damit ist alles bereit, um das Diagramm zu zeichnen. Um die einzelnen Werte innerhalb einer Säule als SVG-Text anzeigen zu können, wird ein Objekt namens barChart erstellt. Dieses enthält den Funktionsaufruf selectAll(„rect“), der im SVG-Objekt alle übergebenen Rechtecke auswählt. Der Funktion data() werden die Daten zur Verfügung gestellt, und enter() gibt nun genau die zuvor selektierten Elemente zurück.

Dem barChart-Objekt fügt man nun mittels append(„rect“) die Säulen auf Basis der Daten hinzu. Das Class-Attribut erleichtert auch hier späteres Styling. Schließlich gilt es noch, die Positionierung zu x- und y-Achse vorzunehmen und die Breite der Säulen mit der Funktion x.rangeBand() zuzuordnen.

Um dem Diagramm Dynamik zu verleihen, werden die Säulen noch mit transition() animiert. Ziel ist es, sie von der x-Achse aus zeitversetzt zu ihrem jeweiligen Maximalwert anwachsen zu lassen. Dazu erhalten die Säulen vor dem Aufruf der Animation eine Höhe von 0. Die Funktion delay() ist für die Verzögerung der Animation zuständig, duration() bestimmt die Dauer in Millisekunden.

Per CSS lassen sich die Säulen, der Text und die Achsen des Diagramms individuell gestalten. (Grafik: t3n)

Per CSS lassen sich die Säulen, der Text und die Achsen des Diagramms individuell gestalten. (Grafik: t3n)

Abschließend gilt es noch, SVG-Text für die Werte in den Säulen mit Hilfe von .append(„text“) zu ergänzen. Hierzu werden die Zahlenwerte zunächst zu den Achsen und Säulen positioniert. Da die meisten D3-Elemente gleichzeitig Objekte und Funktionen sind, lassen sich hier die anfangs definierten Variablen x und y für die Positionierung nutzen, zum Beispiel mit return x(d.channel). Nach der Ausrichtung des Textankers fehlt nur noch die Textausgabe, welche die Aufgabe der Funktion text() ist.

APP.JS: ZEICHNEN DES DIAGRAMMS

...
var barChart = svg.selectAll("rect")
    .data(data)
    .enter();

// Säulendiagramm zeichnen
barChart.append("rect")
   .attr("class", "bar")
   .attr("x", function(d) { return x(d.channel); })
   .attr("y", height - bottomPadding )
   .attr("width", x.rangeBand())
   .attr("height", 0)
 
// Animation der Balkenhöhe
   .transition()
   .delay(function(d, i) { return i * 80; })
   .duration(800)
   .attr("y", function(d) { return y(d.quantity); })
   .attr("height", function(d) { 
    return height - bottomPadding - y(d.quantity); }
   );

// Werte als SVG-Text in Säulen anzeigen und positionieren
barChart.append("text")
   .attr("x", function(d) { return x(d.channel); })
   .attr("y", function(d) { return y(d.quantity); })
   .attr("dx", x.rangeBand()/2)
   .attr("dy", "1.5em")
   .attr("text-anchor", "middle")
   .text(function(d) { return (d.quantity); });
...

Listing 12

Mit der Einbindung einer Stylesheet-Datei und ein wenig CSS lässt sich das SVG-Diagramm ansprechend stylen.

Fazit

Neben klassischen Diagrammarten wie Balken- oder Säulendiagrammen lassen sich mit D3 auch komplexere Arten wie Treemaps oder Akkorddiagramme realisieren. Sucht man ein Werkzeug, um schnell ein paar Charts auf einer Webseite einzubinden, wäre D3 aufgrund seiner Komplexität und seiner granulären Kontrollmöglichkeiten wohl nicht das passende Mittel der Wahl. Auch der Zeitaufwand für die Einarbeitung ist nicht zu unterschätzen. Wer sich jedoch einmal für D3 entschieden hat, dem steht ein mächtiges Werkzeug zur Visualisierung von Daten zur Verfügung.

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!