In einem Umfeld, in dem die Tools für die Software-Entwicklung so schnell abgelöst werden wie im Web-Development, spricht es schon für sich seit fast 10 Jahren auf dem Markt zu sein. D3.js ist beliebt und weit verbreitet. Aber allgegenwärtig zu sein ist nicht alles. Überzeugt euch also selbst:

d3.select(„body“)

    .data([10,20,30,40,50])

    .enter()

        .append(‚div‘)

            .style(„background-color“, „red“)

            .style(„max-width“, d => d + „px“)

            .text(d => d);

Das ist der komplette Code, der benötigt wird, um ein Balkendiagramm mit D3.js zu erstellen. Keine expliziten Schleifen, keine repetitiven Aufrufe, kein Boiler Plate. Das Ergebnis sieht noch nicht unbedingt modern oder schön aus, aber das lässt sich schnell und einfach anpassen (inline oder im CSS).

Ebenso ist D3.js um sämtliche Funktionalitäten, die man sich im Web-Kontext ausdenken kann, erweiterbar. Im Gegensatz zu anderen Frameworks, die limitierte und vorgefertigte Komponenten ausgeben, stellt D3.js sämtliche Freiheiten bereit, die sich ein Entwickler wünschen kann. So kann beispielsweise auf Knopfdruck das obige Balkendiagramm mittels flüssiger Animation in ein Kuchendiagramm transferiert werden. Klingt kompliziert? Kein Problem, es wurde bereits implementiert, gut dokumentiert und veröffentlicht. In den unendlichen Weiten des Internets gibt es unzählige Beispiel-Implementierungen von D3.js, die (fast) alle Wünsche zur Visualisierung von Daten abdecken.

Gute Nachrichten gibt es auch für Entwickler, die die Arbeit mit TypeScript bevorzugen. Ein Typing für D3.js gibt es auch …it’s up to you.

npm -i d3

Have fun. Enjoy coding.

Your INNO coding team.