BigData mit JavaScript visualisieren: D3.js für die Darstellung großer Datenmengen einsetzen

by Clemens Gull

Willkommen im Datenzeitalter. Ob Smartphone, DSL-Router oder auch beim Einkauf um die Ecke: Daten fallen überall in großer Menge an und werden gespeichert. Um diese großen Datenmengen effizient und nutzbringend einsetzen zu können, ist eine geeignete Darstellungsform notwendig. Mit D3.js steht eine JavaScript-Bibliothek bereit, um große Datenmengen in unterschiedlichsten Diagrammtypen darstellen zu können. Werden Sie damit Herr der Daten.

Erste Diagramme mit D3.js
Bevor Sie eigene Diagramme mit D3.js erstellen können, müssen Sie sich mit der entsprechenden Syntax auseinandersetzen. Gull erklärt Ihnen die wichtigsten Regeln im ersten Kapitel. Danach geht es direkt ans Eingemachte: Balkendiagramme, Kreisdiagramme und animierte Diagramme. Erleben Sie die großen Möglichkeiten von D3 anhand von eigenen Diagrammen.

Komplette D3-Anwendung umsetzen
Nach einem theoretischen und praktischen Einstieg in den ersten beiden Kapiteln widmet sich das Kapitel 3 einer großen Anwendung, dem Métro Information Tracker. Hierbei nutzen Sie öffentlich zugängliche Daten (Open Data), um mit unterschiedlichen Diagrammen Informationen zur Métro in Paris darzustellen. Hierbei setzen Sie sich mit allen Themen auseinander, die die moderne Webentwicklung zu bieten hat: HTML, CSS, JSON und SVG. In einem Force-Directed-Graph stellen Sie die Daten dar und reichern diesen mit SVG-Grafiken an. Nachdem Sie dieses Projekt selbst umgesetzt haben, sind Sie gewappnet für eigene große D3-Anwendungen. Der Quellcode steht auch online zur Verfügung.

Die Königsdisziplin: Animation
So lernen Ihre Modelle das Laufen! Erfahren Sie, wie Sie eine Armatur eine Art Skelett für Ihre Charaktere erstellen und sie mit der 3-D-Grafik verknüpfen. Anschließend können Sie die Animationsphasen selbst erstellen und aufnehmen. Darüber hinaus sehen Sie, wie Sie Licht und Schatten für die Kameraaufnahme gekonnt einsetzen.


Aus dem Inhalt:
Datendarstellung im Web
mit D3
Eigenheiten und Syntaxregeln
Plug-ins von D3.js
Document Object Model
Visualisierung von Daten
Erstellen eines
Balkendiagramms
Erstellen eines
Kreisdiagramms
Animierte Diagramme
Open Data
Daten als Force-Directed-Graph darstellen
Stylesheet für Formatierung einsetzen
Force-Directed-Graph als Baum darstellen
JSON-Daten einlesen
und verarbeiten
Knoten im Diagramm suchen
Grafiken für die Knoten
verwenden
Scalable Vector Graphics
einsetzen

280 pages, Paperback

First published October 27, 2014