Sie sind hier
E-Book

BigData mit JavaScript visualisieren

D3.js für die Darstellung großer Datenmengen einsetzen

AutorClemens Gull
VerlagFranzis
Erscheinungsjahr2014
Seitenanzahl280 Seiten
ISBN9783645203470
FormatPDF/ePUB
KopierschutzWasserzeichen/DRM
GerätePC/MAC/eReader/Tablet
Preis24,99 EUR
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.

Kaufen Sie hier:

Horizontale Tabs

Leseprobe

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 <!DOCTYPE html>

02 <html>

03   <head>

04     <meta charset="utf-8">

05     <title>Übung 1 – Balkendiagramm</title>

06     <script type="text/javascript" src="js/d3/d3.v3.js"></script>

07   </head>

08   <body>

09

10   </body>

11 </html>

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:

UhrzeitZugriffe
18:0014
18:108
18:205
18:3024
18:4042
18:5015

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 <!DOCTYPE html>

02 <html>

03   <head>

04     <meta charset="utf-8">

05     <title>Übung 1 – Balkendiagramm</title>

06     <style>

07   body {

08     font-family: Helvetica, Arial, sans-serif;

09     font-size: 10px;

10   }

11   .chart {

12     border: 1px solid #999999;

13     border-radius: 8px;

14     margin: 100px 0 0 150px;

15     max-width: 550px;

16     padding: 32px;

17   }

18   .chart .title {

19     font-size: 200%;

20     font-weight: bold;

21     padding: 0 0 16px 0;

22     text-align: center;

23   }

24   .chart div.bar {

25     background-color: darkgreen;

26     text-align: right;

27     padding: 3px;

28     margin: 1px;

29     color: white;

30   }

31     </style>

32   </head>

33   <body>

34     <div class="chart">

35   <div class="title">Zugriffszahlen</div>

36   <div class="bar" style="width: 140px;">14</div>

37   <div class="bar" style="width: 80px;">8</div>

38   <div class="bar" style="width: 50px;">5</div>

39   <div class="bar" style="width: 240px;">24</div>

40   <div class="bar" style="width: 420px;">42</div>

41   <div class="bar" style="width: 150px;">15</div>

42     </div>

43   </body>

44 </html>

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

Blick ins Buch

Weitere E-Books zum Thema: Programmiersprachen - Softwareentwicklung

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

ASP.NET Shortcut

E-Book ASP.NET Shortcut
Format: PDF

Shortcut-Tipps für ASP.NET-Profis Die neue .NET-Version der Active Server Pages stellt eine Umgebung zur Entwicklung von Web-Applikationen im .NET-Framework bereit. Viele aus der Desktop-…

Programmieren lernen in PHP 5

E-Book Programmieren lernen in PHP 5
Format: PDF

Mit der Version 5 erreicht PHP einen bemerkenswerten Reifegrad, der PHP zu einer festen Größe in der Welt der Webprogrammierung macht. Gerade die leichte Erlernbarkeit macht PHP zur idealen…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Mathematik für Informatiker

E-Book Mathematik für Informatiker
Format: PDF

Die Informatik entwickelt sich in einer unglaublichen Geschwindigkeit. Häufig ist die Mathematik Grundlage von Neuerungen. Deshalb ist sie unverzichtbares Werkzeug jedes Informatikers und Pflichtfach…

Weitere Zeitschriften

ARCH+.

ARCH+.

ARCH+ ist eine unabhängige, konzeptuelle Zeitschrift für Architektur und Urbanismus. Der Name ist zugleich Programm: mehr als Architektur. Jedes vierteljährlich erscheinende Heft beleuchtet ...

bank und markt

bank und markt

Zeitschrift für Banking - die führende Fachzeitschrift für den Markt und Wettbewerb der Finanzdienstleister, erscheint seit 1972 monatlich. Leitthemen Absatz und Akquise im Multichannel ...

crescendo

crescendo

Die Zeitschrift für Blas- und Spielleutemusik in NRW - Informationen aus dem Volksmusikerbund NRW - Berichte aus 23 Kreisverbänden mit über 1000 Blasorchestern, Spielmanns- und Fanfarenzügen - ...

DGIP-intern

DGIP-intern

Mitteilungen der Deutschen Gesellschaft für Individualpsychologie e.V. (DGIP) für ihre Mitglieder Die Mitglieder der DGIP erhalten viermal jährlich das Mitteilungsblatt „DGIP-intern“ ...

DHS

DHS

Die Flugzeuge der NVA Neben unser F-40 Reihe, soll mit der DHS die Geschichte der "anderen" deutschen Luftwaffe, den Luftstreitkräften der Nationalen Volksarmee (NVA-LSK) der ehemaligen DDR ...

die horen

die horen

Zeitschrift für Literatur, Kunst und Kritik."...weil sie mit großer Aufmerksamkeit die internationale Literatur beobachtet und vorstellt; weil sie in der deutschen Literatur nicht nur das Neueste ...

rfe-Elektrohändler

rfe-Elektrohändler

rfe-Elektrohändler ist die Fachzeitschrift für die CE- und Hausgeräte-Branche. Wichtige Themen sind: Aktuelle Entwicklungen in beiden Branchen, Waren- und Verkaufskunde, Reportagen über ...

Euphorion

Euphorion

EUPHORION wurde 1894 gegründet und widmet sich als „Zeitschrift für Literaturgeschichte“ dem gesamten Fachgebiet der deutschen Philologie. Mindestens ein Heft pro Jahrgang ist für die ...