BigData mit JavaScript visualisieren E-Book

Clemens Gull

• Herausgeber: Franzis Verlag
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2014

Beschreibung

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

Leseprobe

Vorwort

Aus Gründen der einfacheren Lesbarkeit wird im gesamten Buch auf die geschlechtsspezifische Differenzierung wie beispielsweise Anwender/-innen verzichtet. Entsprechende Begriffe gelten in meinem Sinne und im Sinne der Gleichbehandlung grundsätzlich für beide Geschlechter.

Worum geht es in diesem Buch?

Dieses Buch ist kein klassisches »Lernbuch«, wie wir es dutzendfach kennen. Aber es ist auch weder eine Referenz noch ein Kompendium für einen Datenbestand oder eine bestimmte Programmiersprache. Es ist eine praktische Einführung in das Thema Open Data und die Visualisierung dieser Daten mit der Bibliothek 3D.js im World Wide Web. Das Buch ist in drei Teile gegliedert.

Am Anfang steht eine Einführung in die Bibliothek D3.js.

Der zweite Teil befasst sich mit der Visualisierung von Daten und der Interaktion mit diesen.

Der dritte Teil erklärt den Begriff »Open Data« und beschäftigt sich mit einer kompletten Anwendung, die wir mit dem Wissen aus den ersten Abschnitten erstellen.

Ein Glossar am Ende des Buches bietet noch mal einfache Erläuterungen zu den verschiedenen Fachbegriffe. Im Index sind die wichtigsten Begriffe zusammengefasst, damit Sie sie schnell nachschlagen können.

Was wird für dieses Buch benötigt?

Natürlich sollten Sie einen Computer nutzen können, der ein fehlerfrei installiertes Betriebssystem hat. Ob Sie Microsoft Windows, Mac OS X oder eine Unix-Variante einsetzen, ist für die Arbeit mit diesem Buch nicht von Belang. Aber denken Sie bitte daran: Sie installieren Software, die das System erweitert. Daher wäre es gut, wenn keine wichtigen Daten auf dem System gespeichert wären, falls etwas gravierend schiefgehen sollte. Zusätzlich benötigen Sie eine funktionierende Internetverbindung. Sie wird für die Installation der einzelnen Softwareteile verwendet. Aber sie kommt auch im letzten Teil dieses Buches zum Einsatz, um die Applikation entwickeln und testen zu können.

Download der Listings zum Buch

Besuchen Sie unsere Website unter http://www.buch.cd und geben Sie dort die letzten fünf Ziffern der ISBN dieses Buches samt Bindestrich ein, um alle Beispielcodes und sonstigen Ressourcen zu diesem Buch herunterzuladen. Die verfügbaren Dateien werden nach der erfolgreichen Anmeldung angezeigt.

Berichtigungen, Änderungen, Verbesserungen

Obwohl alle Beteiligten mit größter Sorgfalt vorgehen, um die Richtigkeit der Inhalte sicherzustellen, passieren Fehler. Sollten Sie einen Fehler in diesem Buch entdecken, ob im Text oder im Quellcode, bin ich sehr dankbar, wenn ich eine Mitteilung erhalte. So können Sie anderen Lesern Ärger ersparen und mithelfen, die nachfolgende Version des Buches zu verbessern. Wenn Sie also irgendeinen Druckfehler finden, teilen Sie ihn mir bitte per E-Mail an [email protected] mit. Ich werde alle Berichtigungen, Änderungen und Verbesserungen auf meinem Blog http://www.guru-20.info veröffentlichen.

Gute Voraussetzungen

Für den erfolgreichen Einsatz dieses Buches benötigen Sie zumindest Grundkenntnisse im Erstellen von Webseiten. Sie werden einfacher und schneller Lösungen erarbeiten können, wenn Sie HTML und CSS schon verwendet haben und auch einsetzen können. Es hilft ebenfalls, wenn Sie bereits Grundkenntnisse im Programmieren – idealerweise mit JavaScript – mitbringen. Aber eine absolute Voraussetzung ist das nicht. Es werden immer wieder Fachbegriffe im Text auftauchen.

Danke für die Unterstützung durch das Team des Franzis Verlags.

Ich würde mich über Reaktionen und Anregungen sehr freuen. Sie erreichen mich unter der Adresse [email protected].

Ihr

Clemens Gull

Für den Menschen, der

mich immer wieder

ungeheuerlich motiviert!

Inhaltsverzeichnis

1Datendarstellung im Web mit D3

1.1Eigenheiten und Syntaxregeln

1.1.1Auswahl von Elementen im DOM

1.1.2Dynamische Eigenschaften

1.1.3Enter und Exit

1.1.4Transitions

1.2Plug-ins von D3.js

1.3Das Document Object Model

1.3.1Beziehungen von Knoten

1.3.2Arten von Knoten

1.3.3Verarbeitung von Knoten

2Visualisierung von Daten

2.1Vorbereitung für die Übungen

2.2Erstellen eines Balkendiagramms

2.2.1Die Daten für das Diagramm

2.2.2Das Balkendiagramm automatisch erstellen

2.2.3Was haben wir gelernt?

2.3Erstellen eines Kreisdiagramms

2.3.1Die Daten für das Diagramm

2.3.2Das Kreisdiagramm automatisch erstellen

2.3.3Was haben wir gelernt?

2.4Animierte Diagramme

2.4.1Kreisdiagramm für Zugriffszahlen von zwei Halbjahren

2.4.2Die Daten für das Diagramm

2.4.3Das Kreisdiagramm erstellen

2.4.4Die Daten für das Diagramm einlesen

2.4.5Die Animation für das Diagramm einfügen

2.4.6Mit fehlenden Daten arbeiten

2.4.7Die Segmente mit einem Titel versehen

2.4.8Was haben wir gelernt?

2.5Exkurs: Open Data

3Der Métro Information Tracker

3.1Grundlegende Software

3.1.1Lokale Installation unter Mac OS X

3.1.2Lokale Installation unter Windows

3.1.3Test der lokalen Installation

3.1.4Die Entwicklungsumgebung

3.2Was ist der MIT?

3.2.1Die Daten der Pariser Métro

3.3Darstellung als Force-Directed-Graph

3.3.1Vorbereitung des Projekts

3.3.2Das Stylesheet erstellen

3.3.3Die Grundstruktur für die HTML-Datei des MIT

3.3.4Einlesen der Daten und Erstellen einer Datenstruktur

3.3.5Anzeigen des Graphen mit den vorhandenen Daten

3.3.6Die Datenpunkte anklickbar machen

3.4Anpassen der Graph-Darstellung

3.4.1Die Gewichtung der Datenpunkte dynamisch ändern

3.4.2Die Knoten durchsuchbar machen

3.5Force-Directed-Graph als Baum darstellen

3.5.1Anpassen des Stylesheets

3.5.2Anpassen der Startseite

3.5.3Erstellen der Anwendung

3.5.4Die JSON-Daten einlesen und verarbeiten

3.5.5Die Datenstruktur als Baumdiagramm darstellen

3.5.6Die Anwendung initialisieren

3.5.7Einen Knoten im Diagramm suchen

3.5.8Zusätzliche Funktionen zur Unterstützung der Anwendung

3.5.9Was haben wir gelernt?

3.6Grafiken für die Knoten verwenden

3.6.1Scalable Vector Graphics im Überblick

3.6.2Den Métro Information Tracker mit Grafiken erweitern

3.7Anpassung am Userinterface vornehmen

3.7.1Die CSS-Datei verändern

3.7.2Eine neue Symbolleiste in die HTML-Datei einfügen

3.7.3Die Funktion zum Ein-/Ausblenden der Knoten anpassen

3.8Métrolinien geografisch darstellen und nach Fahrgastzahlen gewichten

3.8.1Die Daten für Version 3 des MIT

3.8.2HTML-Datei für die Version 3 des MIT erstellen

3.8.3Die Stylesheets des MIT von Version 3

3.8.4Das JavaScript für den MIT von Version 3

3.8.5Was haben wir gelernt?

3.9Die Métrolinie um ein Widget und einen Tooltipp ergänzen

AAnhang

A.1Probleme und Lösungen

A.1.1MAMP startet nicht

A.2Glossar

A.3Verzeichnis der Listings

Stichwortverzeichnis

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.