Datenvisualisierung mit D3.js
Dass eine gute Darstellung von Informationen wichtig ist, dürfte den meisten klar sein. Deswegen stellen wir Ihnen hier ein sehr mächtiges Tool vor, welches die Visualisierung von Daten ermöglicht.
- Autor:in
- Nicole Sager
- Veröffentlicht
Datenvisualisierung
Datenvisualisierung ist seit einiger Zeit nicht mehr aus unserem Alltag wegzudenken. Wir sehen Liniendiagramme in Statistiken, Balkendiagramme in den Nachrichten, Kuchendiagramme in der Werbung und vieles, vieles mehr. Visualisierte Daten, beispielsweise in Form von Diagrammen, sind schneller lesbar, oftmals einfacher verständlich und grundsätzlich angenehmer für Menschen zu verstehen als eine inhaltstechnisch gleiche textuelle Aufzählung. Aber welche neuen Möglichkeiten bietet uns das digitale Zeitalter, in dem wir mit immer mehr Daten und immer weniger Zeit konfrontiert werden? Eine Library, die sich mit Big-Data beschäftigt und allgemein um Datenvisualisierungen kümmert ist D3.js.
D3.js
D3.js bedeutet ausgeschrieben Data Driven Document und ist eine Open Source JavaScript Library, welche SVG, HTML5 und CSS verwendet. Sie dient dazu, interaktive Visualisierungen von Daten darzustellen. D3.js ist eine der meist verwendeten Libraries, wenn es um die Darstellung von Daten geht und bietet unzählige Beispiele, auf Basis derer man seine eigenen Projekte aufbauen kann. Die folgenden Diagramme können alle auf der Beispielseite von D3.js gefunden werden.
Dieses Diagramm nennt man Grouped Barchart. Es stammt vom Erfinder von D3.js, Mike Bostock.
Diese Karten-Darstellung nennt man Hexbin Map. Sie zeigt die Position, die Verteilung und das Alter von ca. 3’000 Wallmartfilialen. Dieses Diagramm wurde ebenfalls von Mike Bostock erstellt.
Dieses Diagramm nennt man Sunburst Chart. Es zeigt die kumulativen Werte von Unterkategorien. Dieses Diagramm wurde von John Stasko erstellt.
Ein weiterer Vorteil von D3 neben der grossen Anzahl an Basisbeispielen ist, dass es SVG als Darstellungsmittel verwendet. Daher spielt es keine Rolle, ob die Grafik auf einem Handy oder auf einem überdimensionierten Bildschirm angezeigt wird, die Grafik wird immer scharf dargestellt.
Ein Nachteil der Library ist jedoch ihre hohe Lernkurve und dass die Diagramme vom Styling her in den meisten Fällen nicht direkt verwendet werden können. Auch ist es sehr aufwändig, ein gutes Diagramm zu programmieren.
Man wird mit dieser Library mit einer Werkstatt und Material präsentiert, jedoch nicht mit einer spezifischen Anleitung. Deshalb sollte man bei jedem Projekt, bei dem Daten visualisiert werden, gut abwägen, was dem Kunden den meisten Nutzen bringt.
Verwandte Themen
Weiterführende Projekte und Inhalte zum Thema