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

Kombination aus Produkt und Dienstleistung

E-Book Kombination aus Produkt und Dienstleistung
Potentiale für Unternehmen aus der Unterhaltungselektronikbranche Format: PDF

Inhaltsangabe:Einleitung: Für Unternehmen des produzierenden Gewerbes wird es immer schwieriger nachhaltige Wettbewerbsvorteile allein über Produkte zu erzielen. Wettbewerbsvorteile ergeben sich aus…

Apps effektiv managen und vermarkten

E-Book Apps effektiv managen und vermarkten
Die eigene App erfolgreich veröffentlichen: Von der Konzeption bis zur Vermarktung Format: PDF

Lernen Sie Ihre App effektiv, strukturiert und begeisternd weltweit zu vermarkten. In diesem praxisorientierten Buch erhalten Sie einen prägnanten Überblick von der Idee und Konzeption einer App,…

Profikurs ABAP®

E-Book Profikurs ABAP®
Konkrete, praxisorientierte Lösungen - Tipps, Tricks und jede Menge Erfahrung Format: PDF

Professionelle und sichere Anwendungsentwicklung unter SAP R/3® ist kein Zufall, sondern eine Sache der Erfahrung. Das Resultat: Tricks und Kniffe, von denen auch Sie als ABAP® Professional…

Recht ex machina

E-Book Recht ex machina
Formalisierung des Rechts im Internet der Dienste Format: PDF

Im Internet werden Informationen immer häufiger so ausgezeichnet, dass sie für Computer interpretierbar sind (Semantic Web). Solche maschinenlesbaren Informationen sorgen dafür, dass Dienste im…

Big Data Analysen

E-Book Big Data Analysen
Für den schnellen Einstieg - SoftwaretechnikISSN  Format: PDF

Big Data ist ein aktuelles Trendthema, doch was versteckt sich dahinter? Big Data beschreibt Daten, die gross oder schnelllebig sind. Big Data bedeutet aber auch, sich mit vielfältigen Datenquellen…

Weitere Zeitschriften

MENSCHEN. das magazin

MENSCHEN. das magazin

MENSCHEN. das magazin informiert über Themen, die das Zusammenleben von Menschen in der Gesellschaft bestimmen -und dies konsequent aus Perspektive der Betroffenen. Die Menschen, um die es geht, ...

FREIE WERKSTATT

FREIE WERKSTATT

Hauptzielgruppe der FREIEN WERKSTATT, der unabhängigen Fachzeitschrift für den Pkw-Reparaturmarkt, sind Inhaberinnen und Inhaber, Kfz-Meisterinnen und Kfz-Meister bzw. das komplette Kfz-Team Freier ...

BEHINDERTEPÄDAGOGIK

BEHINDERTEPÄDAGOGIK

Für diese Fachzeitschrift arbeiten namhafte Persönlichkeiten aus den verschiedenen Fotschungs-, Lehr- und Praxisbereichen zusammen. Zu ihren Aufgaben gehören Prävention, Früherkennung, ...

dima

dima

Bau und Einsatz von Werkzeugmaschinen für spangebende und spanlose sowie abtragende und umformende Fertigungsverfahren. dima - die maschine - bietet als Fachzeitschrift die Kommunikationsplattform ...

FileMaker Magazin

FileMaker Magazin

Das unabhängige Magazin für Anwender und Entwickler, die mit dem Datenbankprogramm FileMaker Pro arbeiten. In jeder Ausgabe finden Sie praxiserprobte Tipps & Tricks, die Ihnen sofort die ...