Gull BigData mit JavaScript visualisieren

D3.js für die Darstellung großer Datenmengen einsetzen
1. Auflage 2014
ISBN: 978-3-645-20347-0
Verlag: Franzis Verlag
Format: PDF
Kopierschutz: 1 - PDF Watermark

E-Book, Deutsch, 280 Seiten

Reihe: Web Programmierung

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. 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. 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. 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

Autor des Bestsellers 'HTML5 Handbuch': Clemens Gull unterrichtet Webprogrammierung und Webdesign an einer technischen Schule in Salzburg. Sein Weblog Guru 2.0 (guru-20.info) gehört zu den meistgelesenen deutsch-sprachigen Blogs zum Thema Internetprogrammierung.

Autoren/Hrsg.

Gull, Clemens

Leseproben

Visualisierung von Daten Meiner Meinung nach hat lernen etwas mit machen zu tun. Daher ist es am besten, wenn wir sofort ins kalte Wasser springen und versuchen, Daten zu visualisieren und die Bibliothek D3.js einzusetzen. Natürlich werden wir nicht mit dem schwierigsten beginnen, sondern uns langsam vorarbeiten. Für das Arbeiten mit Webseiten benötigen wir eine Entwicklungsumgebung. Welche Sie dazu einsetzen, bleibt vollständig Ihnen überlassen. Ich verwende gern Aptana Studio3 oder auch Eclipse4. Denn diese beiden Produkte sind einerseits kostenlos im Web verfügbar und andererseits auf den beiden großen Betriebssystemen Microsoft Windows und Mac OS X analog zu bedienen. 2.1Vorbereitung für die Übungen Bevor Sie mit dem Programmieren beginnen, benötigen Sie noch eine Kleinigkeit. Natürlich können wir mit einer Internetverbindung immer auf die aktuelle Bibliothek von D3.js zurückgreifen, es ist für Sie im Moment jedoch einfach praktischer, alle Teile der Anwendung lokal auf Ihrem Computer zu haben. Dadurch sind Sie erstens schneller, da Sie keine Internetverbindung nutzen müssen, und zweitens sind Sie unabhängig, denn wenn die Netzverbindung nicht funktioniert, können Sie trotzdem weiterarbeiten. Daher sollten Sie sich jetzt die Bibliothek unter der Webadresse http://d3js.org herunterladen. Bild 2.1: Download der Bibliothek unter http://d3js.org. Auch ist jetzt der Zeitpunkt gekommen, eine Verzeichnisstruktur auf der Festplatte zu erstellen, damit Sie alle einzelnen Übungen einfach und schnell anlegen und durchführen können. Wie in der folgenden Abbildung zu sehen ist, benötigen wir vier Unterverzeichnisse: /css /data /images /js Bild 2.2: Die Verzeichnisstruktur für die Übungen zu D3. Nachdem Sie die Bibliothek heruntergeladen haben, müssen Sie das Archiv entpacken und den Inhalt in das Verzeichnis /js kopieren. Damit sollte die Struktur des Projekts wie in der folgenden Abbildung aussehen. Bild 2.3: Grundstruktur des HTML-Dokuments und des Übungsprojekts. Nun können wir mit der ersten Übung beginnen. 2.2Erstellen eines Balkendiagramms Für den Anfang legen Sie sich im Hauptverzeichnis des Projekts eine HTML-Datei mit dem Namen uebung01.html an. Da Sie in HTML 5 arbeiten, können Sie auch gleich die grundlegende Struktur für ein HTML-Dokument erstellen, so wie Sie es im folgenden Listing sehen: 01 02 03    04      05      06      07    08    09 10    11 Listing 13: Die Grundstruktur des HTML-Dokuments für die erste Übung. 2.2.1Die Daten für das Diagramm Gehen wir davon aus, dass wir sechs verschiedene Werte haben, zum Beispiel die Zugriffszahlen auf eine Webseite: Uhrzeit Zugriffe 18:00 14 18:10 8 18:20 5 18:30 24 18:40 42 18:50 15 Diese Tabelle können Sie in JavaScript als Array darstellen. 01 var data = [14, 8, 5, 24, 42, 15]; Listing 14: Ein numerisches Array in JavaScript darstellen. Aber bevor wir wirklich in D3 einsteigen, können wir uns überlegen, wie wir diese Daten ohne jede Hilfe visualisieren können. Hier gibt es mehrere Möglichkeiten. Sie könnten mit einer Tabellenkalkulation eine Grafik erzeugen und diese als img-Element im HTML-Dokument darstellen. Sie könnten auch eine 1 x 1 Pixel große Grafik erzeugen und die Balken dann mit dieser Grafik als einzelne img-Elemente in das HTML-Dokument einfügen. Die einfachste Variante ist es, einzelne Blockelemente mit einem Stylesheet anzupassen, so wie im folgenden Listing dargestellt: 01 02 03    04      05      06      32    33    34     

35   

Zugriffszahlen

36   

14

37   

8

38   

5

39   

24

40   

42

41   

15

42     

43    44 Listing 15: Darstellung eines Balkendiagramms mit CSS. Wie Sie sehen, sind die Werte für die einzelnen Zahlen einfach mit 10 multipliziert und als Breite für die div-Elemente verwendet worden. Dadurch entsteht ein einfaches Diagramm, wie in der folgenden Abbildung zu sehen. Bild 2.4: Darstellung eines Balkendiagramms mit CSS. 2.2.2Das Balkendiagramm automatisch erstellen 01...