Datenvisualisierung/D3.js

Im Selfhtml-aktuell-Bereich stellte Lutz Tautenhahn mit dem JavaScript Diagram Builder 2002 eine Bibliothek zur Verfügung, mit der man einfache Diagramme erstellen konnte. Heute gibt es zahlreiche Frameworks, die mit wenigen Zeilen JavaScript attraktive und anschauliche Präsentationen ermöglichen.

Dieses Kapitel soll Ihnen eine Übersicht über heute verfügbare Frameworks geben.

Inhaltsverzeichnis

1 D3 (Data-Driven Documents)
- 1.1 Drag und Drop mit d3.js
- 1.2 Einbindung per CDN
2 Raphaël
3 snap.svg

D3 (Data-Driven Documents)

D3.js ist eine JavaScript-Bibliothek zur Manipulation datenbasierter Dokumente, die auf HTML, CSS und SVG aufbaut und so fortgeschrittene Animationen und Visualisierungen ermöglicht.^[1] Auch renommierte Medienkonzerne wie die New York Times nutzen Visualisierungen mit D3.

Durch einen Klick auf die Sechsecke der Startseite können Sie sich eine Vielzahl von Beispielen anschauen.

Download (125 kB)

Drag und Drop mit d3.js

Das Framework d3.js ist eine der weit verbreiteten Ergänzungen zur Datenvisualisierung. Mit seiner Hilfe können Sie mit wenigen Zeilen Code SVG-Elemente ziehen und ablegen.^[2]

Beispiel

let drag = d3.behavior.drag();

Mit dieser Zuweisung initialisieren Sie eine neue Instanz des Drag-Verhaltens.

Beispiel

let drag = d3.behavior.drag();
d3.selectAll(".draggable").call(drag);

Jetzt werden alle Elemente, die das Klassenattribut draggable haben, mit der Drag- & Drop-Funktionalität versehen.

Beispiel

let drag = d3.behavior.drag()
  .on("dragstart", function(){
      //ziehen beginnt
  })
  .on("drag", function(){
      //es wird gezogen
  })
  .on("dragend", function(){
      //ablegen
  });

Sie können an die einzelnen Drag-Events auch weitere Funktionsaufrufe anhängen, die dann zusätzliche Anweisungen ausführen.

Ein weiteres Livebeispiel finden Sie auf jsfiddle, das auf dieser Frage in Stackoverflow basiert.^[3]

Einbindung per CDN

Sie können die jeweils neueste Version auch direkt per CDN einbinden, wenn Sie folgenden Code-Schnipsel in den Kopf Ihrer Webseite einfügen:

Beispiel

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

Raphaël

Raphael.js ist eine Open-Source JavaScript-Bibliothek, die Daten in Diagramme und Bilder umwandelt und dabei rotieren und beschneiden kann. Als Format für die Vektorgrafiken benutzt sie SVG und VML (Vector Markup Language)|VML^[4]. Da das SVG-DOM durch Event-Handler erweitert werden kann, ermöglicht dies interaktive Grafiken und Animationen.^[5]

Download (91 kB)

snap.svg

Da raphael.js aus dem Jahre 2008 sogar den IE5.5 unterstützte, war eine Weiterentwicklung nur noch schwer möglich und so entschloss sich Dimitri Baranovskiy zu einer Neuentwicklung, die besonders die Manipulation von SVG-Elementen ermöglichte. Der Nachfolger Snap.svg ermöglicht interaktive und responsive Animationen für SVG und nutzt dabei SVG-Features wie Maskierungen, Muster, Verläufe und Filter.^[6]

Auf tutsplus finden Sie ein umfangreiches Tutorial in englischer Sprache.^[7]