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