spass mit d3.js

d3 steht für Data Driven Documents. Diese Javascript Bibliothek ist ausgesprochen nützlich bei der Visualisierung von Daten.

  • d3.js 3.5.3

In dem div Element #spielwiese ist ein SVG Element, darin sind 100 Kreise über die Gesamtlänge verteilt.
Diese sind bislang nicht sichtbar, da es weisse Kreise auf einem weissen Hintergrund sind.
Wir selektieren nun alle Kreise mit d3 und wechseln die Farbe zu blau.

d3.selectAll("circle") .attr("fill", "blue")

Die Kreise sind immernoch schlecht Sichtbar, da Sie oben am Rand kleben.
Wir selektieren alle Kreise und wechseln die Y Position auf die Hälfte des Elements.

d3.selectAll('circle') .attr('cy', '50%')

Wenn wir die Kreise schon verschieben, können wir das ganze auch schöner machen.
In d3 geht das mittels Transitions. Wir verschieben die Kreise ganz herunter, nur diesmal animiert.

d3.selectAll('circle') .transition() .duration(2000) .attr('cy', '100%')

Das war doch nett, wie wärs wenn wir nun die Kreise wieder noch oben schieben und gleichzeitig die Farbe ändern?

d3.selectAll('circle') .transition() .duration(2000) .attr('fill', 'cyan') .attr('cy', '0%')

Okay, Position und Farbe - wie wärs mit dem Radius der Kreise?
Also - Kreise nach unten, diesmal grün und wir vergößern den Radius von 1% zu 5%.

d3.selectAll('circle') .transition() .duration(2000) .attr('fill', 'hsl(120,100%,50%)') .attr('cy', '100%') .attr('r', '5%')

Ich habe im vorigen Beispiel den HSL Farbwert benutzt, dieser macht einen Farbwechsel auch rechnerisch einfach, da wir einen Wert zwischen 0 und 360 für Farben verwenden können.

Das war doch alles ganz süß bislang.
Richtig cool wird es, wenn wir die Elemente nicht gleichzeitig sondern einzeln bewegen.

Das geht mit einzelne Element verzögerungen.

d3.selectAll('circle') .transition() .delay(function(d, i){ return i * 50 }) .duration(500) .attr('r', '1%') .attr('fill', 'red') .attr('cy', '50%')

Richtig klasse. Die Verzögerung der einzelne Elemente wird erreicht durch die Funktion( d, i ){} die wir in der Funktion delay als eingabewert geben. Die Variable "d" können wir erstmal ignorieren, wichtig ist i - der index wert der Kreise ( der erste Kreis hat den Index 0, der 2e den Index 1 etc.). Jeder der Kreise macht den gleichen Übergang nur jeweils 50ms verzögert.

Wir können auch eine Funktion für den Radius verwenden. Wie wärs mit einer Sinus Funktion?

d3.selectAll("circle") .transition() .delay(function(d, i) { return i * 20; }) .duration(500) .attr("r", function(d, i) { return ((Math.sin(i / 5) + 1.1) * 3) + "%"; })

Im SVG ist auch noch was versteckt, ein Viereck. Den möchte ich nicht länger vernachlässigen.
Wir werden ihn ein wenig Disco geben und eine Farbwechsel funktion definieren mittels der HSL Farb Funktion.

var recolor = function() { d3.select("rect") .transition() .duration(4000) .attr("fill", "hsl(" + (Math.random() * 360) + ",100%,50%)") .each("end", recolor); }; recolor()

Jetzt kommt doch richtig Farbe in diese Angelegenheit.

Wir können jetzt noch die Kreise tanzen lassen und definieren eine Wellenfunktion.
Danach werden wir einen Übergang anstossen und die Wellenfunktion abrufen.

wave = function() { //Move to bottom d3.select(this) .transition() .duration(3000) .attr("cy", "0%") .each("end", function() { //Move to top d3.select(this) .transition() .delay(function(d, i) { return i * 50; }) .duration(3000) .attr("cy", "100%") .each("end", wave); }); }; d3.selectAll("circle") .transition() .delay(function(d, i) { return i * 50; }) .duration(3000) .attr("cy", "100%") .each("end", wave)