BigData mit JavaScript visualisieren: D3.js für die Darstellung großer Datenmengen einsetzen
Von Clemens Gull
()
Über dieses E-Book
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
Mehr von Clemens Gull lesen
PHP für WordPress: Themes und Templates selbst entwickeln Bewertung: 0 von 5 Sternen0 BewertungenWordPress-Tricks und -Tweaks: Bohren Sie WordPress mit selbst programmierten Funktionen auf! Bewertung: 0 von 5 Sternen0 BewertungenWebseiten-Layout mit CSS: Der perfekte Einstieg in Cascading Style Sheets Bewertung: 0 von 5 Sternen0 BewertungenAusbildungspfade im Web 2.0: Eine praktische Umsetzung mit Mitteln der Kollektiven Intelligenz Bewertung: 0 von 5 Sternen0 BewertungenWeb-Applikationen entwickeln mit NoSQL: Das Buch für Datenbank-Einsteiger und Profis! Bewertung: 0 von 5 Sternen0 Bewertungen
Ähnlich wie BigData mit JavaScript visualisieren
Ähnliche E-Books
JavaScript objektorientiert: Verständlicher, flexibler und effizienter programmieren Bewertung: 0 von 5 Sternen0 BewertungenModerne Datenzugriffslösungen mit Entity Framework 6 Bewertung: 0 von 5 Sternen0 BewertungenSQL-Abfragen optimieren: Was Entwickler über Performance wissen müssen Bewertung: 0 von 5 Sternen0 BewertungenKompaktkurs C# 7 Bewertung: 0 von 5 Sternen0 BewertungenJava 8 - Die Neuerungen: Lambdas, Streams, Date and Time API und JavaFX 8 im Überblick Bewertung: 0 von 5 Sternen0 BewertungenSharePoint Kompendium - Bd. 16 Bewertung: 0 von 5 Sternen0 BewertungenSoftwarearchitektur für Dummies Bewertung: 0 von 5 Sternen0 BewertungenSemantic Web: schnell + kompakt Bewertung: 0 von 5 Sternen0 BewertungenDynamische Webseiten: Einstieg in HTML, PHP und MySQL Bewertung: 0 von 5 Sternen0 BewertungenDatenbankentwicklung lernen mit SQL Server 2016: Der praxisorientierte Grundkurs Bewertung: 0 von 5 Sternen0 BewertungenDas Excel SOS-Handbuch: Wie sie Excel (2010-2019 & 365) schnell & einfach meistern. Die All-in-One Anleitung für ihren privaten & beruflichen Excel-Erfolg! Bewertung: 0 von 5 Sternen0 BewertungenTextverarbeitung mit Word 2013: Eingeben · Gestalten · Ausdrucken Bewertung: 0 von 5 Sternen0 BewertungenLDAP für Java-Entwickler: Einstieg und Integration (Neuauflage) Bewertung: 0 von 5 Sternen0 BewertungenBootstrap kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenPraxisbuch WordPress Themes Bewertung: 0 von 5 Sternen0 BewertungenC++17: Praxiswissen zum neuen Standard. Von C++11 bis 17 Bewertung: 0 von 5 Sternen0 BewertungenJavaScript effektiv: 68 Dinge, die ein guter JavaScript-Entwickler wissen sollte Bewertung: 0 von 5 Sternen0 BewertungenSoftware entwickeln mit C#, WPF und dem MVVM-Konzept Bewertung: 0 von 5 Sternen0 BewertungenCSS3: Die Referenz für Webentwickler Bewertung: 0 von 5 Sternen0 BewertungenJavaScript und Ajax: Das Praxisbuch für Web-Entwickler Bewertung: 0 von 5 Sternen0 BewertungenDas Franzis Starterpaket Arduino Leonardo: Das Handbuch für den Schnelleinstieg Bewertung: 0 von 5 Sternen0 BewertungenProgressive Web-Apps: Offlinefähige Web-Anwendungen mit nativen Qualitäten Bewertung: 0 von 5 Sternen0 BewertungenSharePoint Kompendium - Bd. 13 Bewertung: 0 von 5 Sternen0 BewertungenIT-Wissen für Manager: Ein kompakter Überblick zu aktuellen Technologien und Trends Bewertung: 0 von 5 Sternen0 BewertungenHTML5 Security Bewertung: 0 von 5 Sternen0 BewertungenLogging: Schnelleinstieg Bewertung: 0 von 5 Sternen0 BewertungeniPadOS 15-Benutzerhandbuch Bewertung: 0 von 5 Sternen0 BewertungenSo findest du den Einstieg in WordPress: Die technischen Grundlagen zu Installation, Konfiguration, Optimierung, Sicherheit, SEO Bewertung: 0 von 5 Sternen0 Bewertungen23 Wege um eine (agile) Transformation an die Wand zu fahren: Der ultimative Leitfaden zur Eliminierung von Selbstorganisation und Mitarbeitermotivation Bewertung: 0 von 5 Sternen0 Bewertungen
Programmieren für Sie
Programmieren von Kopf bis Fuß Bewertung: 4 von 5 Sternen4/5Algorithmen: Grundlagen und Implementierung Bewertung: 0 von 5 Sternen0 BewertungenLinux Grundlagen - Ein Einstieg in das Linux-Betriebssystem Bewertung: 0 von 5 Sternen0 BewertungenJavaScript kurz & gut Bewertung: 3 von 5 Sternen3/5Python kurz & gut: Für Python 3.x und 2.7 Bewertung: 3 von 5 Sternen3/5Hacken mit Python und Kali-Linux: Entwicklung eigener Hackingtools mit Python unter Kali-Linux Bewertung: 0 von 5 Sternen0 BewertungenGit kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenWeniger schlecht programmieren Bewertung: 4 von 5 Sternen4/5Raspberry Pi: Mach's einfach: Die kompakteste Gebrauchsanweisung mit 222 Anleitungen. Geeignet für Raspberry Pi 3 Modell B / B+ Bewertung: 0 von 5 Sternen0 BewertungenDas große Python3 Workbook: Mit vielen Beispielen und Übungen - Programmieren leicht gemacht! Bewertung: 4 von 5 Sternen4/5Programmieren lernen mit Python 3: Schnelleinstieg für Beginner Bewertung: 0 von 5 Sternen0 Bewertungen.NET-Praxis: Tipps und Tricks zu .NET und Visual Studio Bewertung: 0 von 5 Sternen0 BewertungenMikrocontroller in der Elektronik: Mikrocontroller programmieren und in der Praxis einsetzen Bewertung: 0 von 5 Sternen0 BewertungenLinux Befehlsreferenz: Schnelleinstieg in die Arbeit mit der Konsole, regulären Ausdrücken und Shellscripting Bewertung: 0 von 5 Sternen0 BewertungenC von Kopf bis Fuß Bewertung: 3 von 5 Sternen3/5SQL von Kopf bis Fuß Bewertung: 4 von 5 Sternen4/5New Game Plus: Perspektiven der Game Studies. Genres - Künste - Diskurse (Bild und Bit. Studien zur digitalen Medienkultur) Bewertung: 0 von 5 Sternen0 BewertungenDas Excel SOS-Handbuch: Wie sie Excel (2010-2019 & 365) schnell & einfach meistern. Die All-in-One Anleitung für ihren privaten & beruflichen Excel-Erfolg! Bewertung: 0 von 5 Sternen0 BewertungenEigene Spiele programmieren – Python lernen: Der spielerische Weg zur Programmiersprache Bewertung: 0 von 5 Sternen0 BewertungenPython | Schritt für Schritt Programmieren lernen: Der ultimative Anfänger Guide für einen einfachen & schnellen Einstieg Bewertung: 0 von 5 Sternen0 BewertungenAndroid-Programmierung kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenDie ultimative FRITZ!Box Bibel - Das Praxisbuch 2. aktualisierte Auflage - mit vielen Insider Tipps und Tricks - komplett in Farbe Bewertung: 0 von 5 Sternen0 BewertungenRaspberry Pi: Einstieg • Optimierung • Projekte Bewertung: 5 von 5 Sternen5/5Microcontroller für das IoT Bewertung: 0 von 5 Sternen0 BewertungenHTML5-Programmierung von Kopf bis Fuß: Webanwendungen mit HTML5 und JavaScript Bewertung: 0 von 5 Sternen0 BewertungenSoftwareentwicklungsprozess: Von der ersten Idee bis zur Installation Bewertung: 0 von 5 Sternen0 BewertungenProgrammieren für Einsteiger: Teil 1 Bewertung: 0 von 5 Sternen0 BewertungenPython lernen – kurz & gut Bewertung: 0 von 5 Sternen0 BewertungenPerspektiven für Informatiker 2019: Branchenüberblick, Erfahrungsberichte und Tipps zum Berufseinstieg Bewertung: 0 von 5 Sternen0 BewertungenC++: Eine kompakte Einführung Bewertung: 0 von 5 Sternen0 Bewertungen
Rezensionen für BigData mit JavaScript visualisieren
0 Bewertungen0 Rezensionen
Buchvorschau
BigData mit JavaScript visualisieren - Clemens Gull
Stichwortverzeichnis
Datendarstellung im Web mit D3
Der etwas sperrige Name der Bibliothek ist eigentlich Programm und die beste Erklärung für die Funktion – er steht für Data Driven Documents, also für Dokumente (HTML-Seiten), die sich selbst immer wieder neu auf Basis von Daten zusammenstellen. Um diese Daten lebendig darzustellen, werden HTML, SVG und CSS eingesetzt. Auf Basis dieser Gedanken gibt Ihnen die Bibliothek die Möglichkeit, erstaunliche Visualisierungen von Daten zu erstellen, ohne sich an eine proprietäre Bibliothek zu binden. Denn »D3« setzt auf den Möglichkeiten moderner Browser auf und kombiniert die Teile der Visualisierung mit einem datengesteuerten Zugang, um das Document Object Model (DOM) zu verändern.
Die Bibliothek erlaubt Ihnen, beliebige Daten mit dem DOM zu verknüpfen und danach datengesteuerte Änderungen auf dieses Dokument anzuwenden. D3 stellt Ihnen hier viele Möglichkeiten zur Verfügung: Sie können aus einem Array mit Zahlenwerten einfach eine Tabelle in HTML, aber auch ein interaktives Balkendiagramm in SVG erzeugen.
D3 ist kein Framework, das Ihnen jedes nur denkbare und mögliche Feature zur Verfügung stellt. Es kümmert sich im Wesentlichen um die Wurzel des Problems mit der Verarbeitung von Daten: das effiziente Handhaben von Dokumenten, die auf Basis von Daten erstellt wurden. Damit vermeiden Sie einen proprietären Zugang der Datenpräsentation. Aber Sie erhalten eine außerordentliche Flexibilität und alle Möglichkeiten vorhandener Standards im Web.
Die Bibliothek ist sehr schnell, da sie nur einen sehr kleinen Overhead besitzt. Dadurch ist es Ihnen möglich, auch große Datenmengen zu verarbeiten und eine dynamische Herangehensweise für die Animation und Interaktion mit den Daten zu wählen.
Durch dieses offene Konzept können Sie sehr leicht wiederverwendbaren Quellcode schreiben. Das zeigt sich gut in der Vielzahl von Komponenten und Plug-ins, die für D3 verfügbar sind.
Besonders wichtig ist es aber, dass D3 keine neue grafische Bibliothek ist. Alle Möglichkeiten moderner Browser für Übergänge, Darstellungen und Formatierungen werden jederzeit und sofort unterstützt. Die Bibliothek ist prinzipiell für die Verbindung von HTML-Dokumenten und Daten gedacht. Das Layout der Daten erfolgt wie gewohnt mithilfe von CSS-Dateien.
1.1Eigenheiten und Syntaxregeln
Trotz aller Einfachheit, die D3 mitbringt, gibt es ein paar Eigenheiten oder besser Syntaxregeln und Vorgaben, um mit der Bibliothek erfolgreich arbeiten zu können. In diesem Abschnitt werden wir sie kennenlernen und später immer wieder einsetzen.
1.1.1Auswahl von Elementen im DOM
HTML-Dokumente auf Basis der W3C-DOM-API zu verändern, kann sehr anstrengend sein. Die Namen der Methoden sind lang, und der Zugang der API zum DOM zwingt Sie direkt zu einzelnen Befehlssequenzen und auch zum Mitverfolgen der einzelnen Zustände der Elemente. Schauen wir uns ein einfaches Beispiel an: Sie möchten die Textfarbe aller Absätze in einem Dokument auf Grün ändern:
01 var absaetze = document.getElementsByTagName(p
);
02 for (var i=0; i
03 var absatz = absaetze.item(i);
04 absatz.style[color
] = green
;
05 }
Listing 1: Textfarbe für alle Absätze mit der DOM-API ändern.
D3 verwendet hingegen einen selbsterklärenden Ansatz, um mit einem beliebigen Satz von Knoten (Nodes) des DOM zu arbeiten. Die Bibliothek verwendet für diese Zusammenstellung von DOM-Elementen die Bezeichnung Selection. Sie können den vorherigen Code damit in einer Zeile zusammenfassen.
01 d3.selectAll(p
).style(color
, green
);
Listing 2: Textfarbe für alle Absätze mit color ändern.
Natürlich können Sie nicht nur einen Satz von Elementen, sondern auch einzelne DOM-Knoten ansprechen. Mit der folgenden Zeile ändern Sie die Hintergrundfarbe der Webseite.
01 d3.select(body
).style(background-color
, aqua
);
Listing 3: Hintergrundfarbe für das body-Element mit D3 ändern.
Selektoren sind durch die W3C-Selectors-API definiert und werden von allen modernen Browsern unterstützt. Dadurch kann es bei älteren Browsern, besonders beim Internet Explorer 9 und früher, zu Problemen kommen. Damit Sie diese Abwärtskompatibilität zur Verfügung stellen, können Sie beispielsweise die Bibliothek Sizzle1 einsetzen.
Die vorherigen Beispiele nutzen einen sehr einfachen Ansatz und wählen die Knoten mit ihrem Tag-Namen (p bzw. body) aus. Aber Elemente können mit vielen verschiedenen Attributen, beispielsweise mit dem Klassennamen, der ID oder weiteren Eigenschaften, ausgewählt werden.
Ähnlich wie andere Bibliotheken, z. B. jQuery oder Prototype, besitzt auch D3 zahlreiche Methoden, um die Knoten zu verändern. Sie können Attribute und Stile ändern, Event-Listener binden, Knoten hinzufügen oder sortieren und auch den Inhalt eines Elements anpassen. Eigentlich sollten diese Möglichkeiten für fast alle Aufgaben ausreichen. Aber trotzdem können Sie das DOM und seine Elemente auch noch direkt verändern, denn jede Selection ist ein einfaches Array aus Knoten des Document Object Model.
1.1.2Dynamische Eigenschaften
Wenn Sie bereits mit anderen Bibliotheken gearbeitet haben, kommt Ihnen dies alles schon bekannt vor. Aber einen grundlegenden Unterschied gibt es dennoch. In D3 können Stile, Attribute und andere Eigenschaften als Funktionen auf Basis der Daten definiert werden und nicht als einfache Konstanten wie in den anderen Bibliotheken.
Trotz ihrer offensichtlichen Einfachheit können diese Funktionen sehr mächtig sein. Nehmen wir nur die Funktion d3.geo.path(). Sie nimmt geografische Koordinaten an und projiziert sie als Pfad in einem svg-Element. D3 kennt viele Funktionen dieser Art, aber auch sogenannte Primitives für eine grafische Präsentation. Diese Primitives stellen Linien, Diagramme und einfache geometrische Formen schnell und leicht dar.
Nehmen Sie nochmals das Beispiel mit der Textfarbe aus dem vorherigen Abschnitt und ändern Sie jetzt die Farbe auf einen zufälligen Wert:
01 d3.selectAll(p
).style(color
, function() {
02 return rgb(
+ parseInt(Math.random() * 255) + , 255, 128)
;
03 });
Listing 4: Textfarbe für alle p-Elemente mit einer Funktion zufällig ändern.
Eine zufällige Textfarbe ist natürlich nicht so schlau, denn im Design können wir solche Ansätze nicht verwenden. Viel sinnvoller ist es, hier eine Art Zebrapapier zu erzeugen – also abwechselnd einen dunklen und einen hellen Hintergrund für eine Textzeile darzustellen:
01 d3.selectAll(p
).style(background-color
, function(d, i) {
02 if (i % 2) {
03 return #CCCCCC
;
04 } else {
05 return #666666
;
06 }
07 });
Listing 5: Hintergrundfarbe für alle p-Elemente abwechselnd festlegen.
Berechnete Eigenschaften sind oft an vorhandene Daten bzw. Werte gebunden. Daten in D3 werden immer als Wertearray definiert, und jeder Wert wird als erstes Argument (d) an die Funktion übergeben. Als Standard werden die Elemente in der Reihenfolge des Index gebunden. Damit ist gemeint, dass der erste Knoten in der Selection an das erste Element im Datenarray und der zweite Knoten an das zweite Element im Array und so weiter und so fort gebunden wird.
Stellen wir uns ein Array mit Zahlen vor:
01 daten = new Array(14, 8, 5, 24, 42, 15);
Listing 6: Array mit sechs Werten definieren.
Jetzt können Sie dieses Array verwenden, um den Absätzen verschiedene dynamische Schriftgrößen zuzuordnen.
01 d3.selectAll(p
)
02 .data[(14, 8, 5, 24, 42, 15)]
03 .style(font-size
, function(d) {return d + px
;
04 });
Listing 7: Schriftgröße für alle p-Elemente dynamisch auf Basis eines Arrays festlegen.
Ein großer Vorteil von D3 ist die Datenanbindung. Ist diese einmal im Dokument hergestellt, kann sie in der Folge weggelassen werden. D3 wird die vorher gebundenen Daten wiederfinden, und damit können Sie die Eigenschaften immer erneut verwenden, ohne sie wieder an das Dokument binden zu müssen.
1.1.3Enter und Exit
Mit diesen beiden Selections können Sie Knoten für neu hinzugekommene Daten anlegen, aber auch jene löschen, deren Daten nicht mehr vorhanden sind oder benötigt werden.
Sobald Sie Daten an eine Selection binden, wird jedes Element des Arrays mit einem Knoten der Auswahl verbunden. Sind jedoch weniger Knoten als Arrayelemente vorhanden, sind diese Extraelemente die enter-Selection. Sie können sie realisieren, indem Sie die neuen Elemente einfach an die Auswahl anhängen. Schauen wir uns das wieder an einem einfachen Beispiel an.
01 d3.select(body
).selectAll(p
)
02 .data[(14, 8, 5, 24, 42, 15)]
03 .enter().append(p
)
04 .text(function(d) {
05 return Ich habe das Element
+ d + !
;
06 });
Listing 8: Elemente der enter-Selection hinzufügen.
Die Standardauswahl ist jene für das Ändern der Knoten, also das Ergebnis für den Datenoperator. Wenn Sie also die enter- und exit-Selection vergessen, werden nur die Nodes, für die Daten existieren, ausgewählt. Eine übliche Herangehensweise ist das Aufteilen der Daten in drei Teile: die Knoten für ein Update, die Knoten für neue Daten und jene Knoten, die entfernt werden sollen.
01 //Vorhandene Knoten aktualisieren
02 var p = d3.select(body
).selectAll(p
)
03 .data[(14, 8, 5, 24, 42, 15)]
04 .text(String);
05 //Neue Knoten hinzufuegen
06 p.enter().append(p
)
07 .text(String);
08 //Veraltete Knoten entfernen
09 p.exit().remove();
Listing 9: Aufteilen der Knoten in drei logische Gruppen.
Wenn Sie diese drei Fälle in Ihrem Quellcode gesondert behandeln, können Sie das Verhalten für die einzelnen Knoten sehr genau definieren. Damit haben Sie eine bessere Performance und auch viel mehr Kontrolle über später zu programmierende Übergänge bzw. Interaktionen.
Der Ansatz von D3 ist das Verändern von Dokumenten auf Basis von Daten, und damit ist auch das Hinzufügen bzw. Löschen von Knoten gemeint. Mit der Bibliothek können Sie ein vorhandenes Dokument als Antwort auf eine Benutzeraktion, nach einer gewissen Zeit oder auch asynchron von einer fremden Datenquelle anpassen. Aber auch eine Mischversion ist denkbar.
Sie können das Dokument komplett am Server erstellen und dem Browser des Anwenders übergeben. Der Anwender kann dann das Dokument mit der Bibliothek D3 aktualisieren.
1.1.4Transitions
Durch die Sichtweise auf die Daten erweitert D3 die in modernen Browsern vorhandenen Übergänge zu animierten Darstellungen. Ein Übergang (in Englisch als transition bezeichnet) ist prinzipiell nichts anderes als eine zeitlich definierte Änderung der Elementformatierung. Diese Übergänge können mit Funktionen wie elastic, linear, bounce oder anderen festgelegt und gesteuert werden.
Übergänge bzw. Animationen werden entweder durch eine Änderung der Datenbasis oder durch die Interaktion des Anwenders mit dem Dokument ausgelöst. In beiden Fällen unterstützt D3 Zahlen und auch Texte, wie sie etwa für die Schriftgröße oder die Position eines Elements benötigt werden.
Wenn wir beispielsweise die Hintergrundfarbe eines Dokuments zu Rot überblenden wollen, benötigen wir folgenden Code:
01 d3.select(body
)
02 .style(background-color
, red
);
Listing 10: Die Hintergrundfarbe eines Dokuments ändern.
1.2Plug-ins von D3.js
Die Bibliothek D3 lässt sich sehr einfach erweitern. Dazu werden sogenannte Plug-ins verwendet. Hierzu ist jedoch nicht, wie bei »normaler« Software, eine zusätzliche Installation notwendig, stattdessen wird für ein Plug-in einfach ein zusätzlicher JavaScript-Code eingesetzt.
Meistens wird dieser Code als externe Datei direkt nach der Bibliothek im head-Element einer Seite eingebunden und erweitert damit D3.
01
02
03
04
05
src=/js/d3/bullet.js
>
06
07
08 …
09
10
Listing 11: Plug-in für D3 aktivieren.
Für einen guten Überblick über vorhandene Plug-ins ist die Webseite von D3 auf GitHub² ein guter Startpunkt.
1.3Das Document Object Model
Jedes HTML-Dokument beruht genau auf dieser Definition des World Wide Web Consortium (kurz W3C). Und gerade für die Arbeit mit JavaScript und auch mit Daten – die Grundlage von D3 – benötigen Sie ein fundamentales Verständnis des DOM.
Die Definition dieser Schnittstelle, um auf XML- und HTML-Dokumente zuzugreifen, geht bereits auf den Anfang des World Wide Web zurück. Durch das Festlegen von Klassen (mit ihren Methoden und Eigenschaften) können Computerprogramme den Inhalt, die Struktur und auch das Layout der Dokumente jederzeit und dynamisch anpassen.
Folgender HTML-Code definiert eine Tabelle mit dem Element table und verschiedenen Unterelementen:
01
02
03
04 Vorname
05
06
07
08
09
10
11
12
13
14
15
16
Listing 12: Eine Tabelle in HTML.
Der obige Ausschnitt aus einem HTML-Dokument, um ein table-Element zu definieren, ist Ihnen sicher vertraut. Das DOM bildet das Element und alle Unterelemente in einer Baumstruktur ab, wie es in der folgenden Abbildung gut zu erkennen ist.
Bild 1.1: Die Elementstruktur innerhalb des DOM.
Sie erkennen sehr gut die Baumstruktur und dass alle Elemente (diese werden auch Knoten oder in Englisch Nodes genannt) miteinander in Beziehung stehen.
1.3.1Beziehungen von Knoten
Aus der obigen Abbildung ergeben sich verschiedene Beziehungen der Knoten untereinander. Zusätzlich greifen hier auch noch die Definitionen des W3C ein. Die vorliegende Struktur wird im Objektmodell durch die folgenden Beziehungen charakterisiert:
Der Wurzelknoten (root node) hat drei Kindknoten (children).
Der Wurzelknoten ist das Element table.
Die Kindknoten sind je ein tr-Element.
Aus der Sicht eines tr-Elements ist das table-Element der Elternknoten (parent node)
Knoten mit einem gemeinsamen Elternknoten, beispielsweise die drei tr-Elemente, werden als Geschwisterknoten (siblings) bezeichnet.
Jeder Knoten ist über einen beliebigen Knoten erreichbar. Es gibt also keinen einzigen Knoten, der nicht in der Baumstruktur verknüpft ist.
1.3.2Arten von Knoten
Das W3C hat jeden einzelnen Typ von Knoten genau definiert. Die wichtigsten und für uns notwendigen sind:
Der Dokumentknoten stellt das gesamte Dokument als Baumstruktur dar.
Der Dokumentfragmentknoten ist ein Teil eines Dokuments, so wie vorher das table-Element).
Ein Elementknoten entspricht genau einem Element im Dokument. Im vorherigen Beispiel kann das ein td-Element sein.
Ein Attributknoten enthält bzw. repräsentiert genau eine Eigenschaft eines Elementknotens.
Dies sind spezielle Knoten, denn sie werden nicht in der Baumstruktur abgebildet und sind damit auch keine Kindknoten der einzelnen Elemente. Sie sind vielmehr Attribute bzw. Eigenschaften von Knoten.
Der Inhalt eines Elements wird als Textknoten dargestellt.
1.3.3Verarbeitung von Knoten
Üblicherweise wird ein HTML-Dokument von einem Webserver zu einem Webbrowser beim Anwender übertragen. Der Browser übernimmt das Dokument und verarbeitet es Zeile für Zeile. Dadurch kann der Browser das DOM erstellen, da er die Zeilen überprüft und die Elemente in die Knotenstruktur einfügt.
Wenn der Browser an der letzten Zeile bzw. am letzten Element des Dokuments angekommen ist, wird das DOM bzw. die Baumstruktur vollständig abgebildet. Erst jetzt kann mit der API auf die Inhalte und die Struktur des DOM zugegriffen werden.
Diese Zugriffe können eine Navigation zwischen den einzelnen Knoten sowie das Neuerstellen, Bewegen oder auch Löschen von Knoten oder das Formatieren und Ändern von Inhalten sein.
¹Diese Bibliothek ist online unter http://sizzlejs.com/ verfügbar.
²Sie finden die Seite unter https://github.com/d3.
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 Studio³ oder auch Eclipse⁴. 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
02
03
04 utf-8>
05
06
07
08
09
10
11
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