
BigData mit JavaScript visualisieren
Description
Alles über E-Books | Antworten auf Fragen rund um E-Books, Kopierschutz und Dateiformate finden Sie in unserem Info- & Hilfebereich.
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
More details
Other editions
Additional editions

Person
Content
- BigData mit JavaScript visualisieren
- Vorwort
- Worum geht es in diesem Buch?
- Was wird für dieses Buch benötigt?
- Gute Voraussetzungen
- Inhaltsverzeichnis
- 1 Datendarstellung im Web mit D3
- 1.1 Eigenheiten und Syntaxregeln
- 1.1.1 Auswahl von Elementen im DOM
- 1.1.2 Dynamische Eigenschaften
- 1.1.3 Enter und Exit
- 1.1.4 Transitions
- 1.2 Plug-ins von D3.js
- 1.3 Das Document Object Model
- 1.3.1 Beziehungen von Knoten
- 1.3.2 Arten von Knoten
- 1.3.3 Verarbeitung von Knoten
- 2 Visualisierung von Daten
- 2.1 Vorbereitung für die Übungen
- 2.2 Erstellen eines Balkendiagramms
- 2.2.1 Die Daten für das Diagramm
- 2.2.2 Das Balkendiagramm automatisch erstellen
- 2.2.3 Was haben wir gelernt?
- 2.3 Erstellen eines Kreisdiagramms
- 2.3.1 Die Daten für das Diagramm
- 2.3.2 Das Kreisdiagramm automatisch erstellen
- 2.3.3 Was haben wir gelernt?
- 2.4 Animierte Diagramme
- 2.4.1 Kreisdiagramm für Zugriffszahlen von zwei Halbjahren
- 2.4.2 Die Daten für das Diagramm
- 2.4.3 Das Kreisdiagramm erstellen
- 2.4.4 Die Daten für das Diagramm einlesen
- 2.4.5 Die Animation für das Diagramm einfügen
- 2.4.6 Mit fehlenden Daten arbeiten
- 2.4.7 Die Segmente mit einem Titel versehen
- 2.4.8 Was haben wir gelernt?
- 2.5 Exkurs: Open Data
- 3 Der Métro Information Tracker
- 3.1 Grundlegende Software
- 3.1.1 Lokale Installation unter Mac OS X
- 3.1.2 Lokale Installation unter Windows
- 3.1.3 Test der lokalen Installation
- 3.1.4 Die Entwicklungsumgebung
- 3.2 Was ist der MIT?
- 3.2.1 Die Daten der Pariser Métro
- 3.3 Darstellung als Force-Directed-Graph
- 3.3.1 Vorbereitung des Projekts
- 3.3.2 Das Stylesheet erstellen
- 3.3.3 Die Grundstruktur für die HTML-Datei des MIT
- 3.3.4 Einlesen der Daten und Erstellen einer Datenstruktur
- 3.3.5 Anzeigen des Graphen mit den vorhandenen Daten
- 3.3.6 Die Datenpunkte anklickbar machen
- 3.4 Anpassen der Graph-Darstellung
- 3.4.1 Die Gewichtung der Datenpunkte dynamisch ändern
- 3.4.2 Die Knoten durchsuchbar machen
- 3.5 Force-Directed-Graph als Baum darstellen
- 3.5.1 Anpassen des Stylesheets
- 3.5.2 Anpassen der Startseite
- 3.5.3 Erstellen der Anwendung
- 3.5.4 Die JSON-Daten einlesen und verarbeiten
- 3.5.5 Die Datenstruktur als Baumdiagramm darstellen
- 3.5.6 Die Anwendung initialisieren
- 3.5.7 Einen Knoten im Diagramm suchen
- 3.5.8 Zusätzliche Funktionen zur Unterstützung der Anwendung
- 3.5.9 Was haben wir gelernt?
- 3.6 Grafiken für die Knoten verwenden
- 3.6.1 Scalable Vector Graphics im Überblick
- 3.6.2 Den Métro Information Tracker mit Grafiken erweitern
- 3.7 Anpassung am Userinterface vornehmen
- 3.7.1 Die CSS-Datei verändern
- 3.7.2 Eine neue Symbolleiste in die HTML-Datei einfügen
- 3.7.3 Die Funktion zum Ein-/Ausblenden der Knoten anpassen
- 3.8 Métrolinien geografisch darstellen und nach Fahrgastzahlen gewichten
- 3.8.1 Die Daten für Version 3 des MIT
- 3.8.2 HTML-Datei für die Version 3 des MIT erstellen
- 3.8.3 Die Stylesheets des MIT von Version 3
- 3.8.4 Das JavaScript für den MIT von Version 3
- 3.8.5 Was haben wir gelernt?
- 3.9 Die Métrolinie um ein Widget und einen Tooltipp ergänzen
- A Anhang
- A.1 Probleme und Lösungen
- A.1.1 MAMP startet nicht
- A.2 Glossar
- A.3 Verzeichnis der Listings
- Stichwortverzeichnis
System requirements
File format: PDF
Copy protection: Watermark-DRM (Digital Rights Management)
System requirements:
- Computer (Windows; MacOS X; Linux): Use the free software Adobe Reader, Adobe Digital Editions, or any other PDF viewer of your choice (see eBook Help).
- Tablet/Smartphone (Android; iOS): Install the free app Adobe Digital Editions or another reading app for eBooks, e.g., PocketBook (see eBook Help).
- E-reader: Bookeen, Kobo, Pocketbook, Sony, Tolino and many more (only limited: Kindle).
The file format PDF always displays a book page identically on any hardware. This makes PDF suitable for complex layouts such as those used in textbooks and reference books (images, tables, columns, footnotes). Unfortunately, on the small screens of e-readers or smartphones, PDFs are rather annoying, requiring too much scrolling.
This eBook uses Watermark-DRM, a „soft” copy protection. This means that there are no technical restrictions to prevent illegal distribution. However, there is a personalised watermark embedded in the eBook that can be used to identify the purchaser of the eBook in the event of misuse and to provide evidence for legal purposes.
For more information, see our eBook Help page.