public:vis:d3js
Table of Contents
Visualisierung mit D3.js
Noah Bubenhofer, 28. Oktober 2014
Was ist D3.js?
- D3: Data-Driven Documents: http://d3js.org/
- JavaScript-Bibliothek um Dokumente aufgrund von Daten zu manipulieren: Bindet Daten an ein DOM (Document Object Model)-Dokument
- nutzt HTML, SVG and CSS
Beispiele
- Politischer Einfluss: http://www.brightpointinc.com/interactive/political_influence/index.html?source=d3js
- Geokollokationen: http://www.bubenhofer.com/geocollocations/explorer/
Beispiele mit DB-Anbindung
- Dynamische Bar-Chart-Erstellung durch DB-Abfrage: Beispiel im Web, generelle Anleitung zu Bar Charts in D3.js
- Dynamische Karten-Darstellung durch DB-Abfrage: Beispiel im Web, generelle Anleitung zu Karten mit D3.js
- Dynamische Karten-Darstellung durch DB-Abfrage (ausführliche Version): Beispiel im Web
- Code im Git Anleitung:
ssh://git@pub.cl.uzh.ch:11022/bubenhofer/vislingkurs.git
- Vgl. dazu auch https://pub.cl.uzh.ch/wiki/public/pcl3/uebungvis
Tutorials, Einführungen
- grundlegende Einführung: http://d3js.org/
- viele Tutorials mit unterschiedlichen Schwerpunkten: https://github.com/mbostock/d3/wiki/Tutorials
- mit hat gefallen: http://christopheviau.com/d3_tutorial/
- API-Referenz: https://github.com/mbostock/d3/wiki/API-Reference
Grundkonzeption
- Interface als HTML-Seite mit Javascript
- Visualisierung mit der Javascript-Bibliothek D3.js: SVG-Elemente
- Daten:
- einlesen von CSV-, XML- oder JSON-Datei
- Abfrage aus Datenbank; Abfrage-Interface über PHP
Einbettung in HTML
<html> <head> <meta> <script src="http://d3js.org/d3.v3.min.js"></script> // Referenz zur D3-Bibliothek <style type="text/css"> // Style-Angaben für die Darstellung aller Elemente (HTML und SVG) </style> </meta> </head> <body> // Hier kommen HTML-Elemente zur Seitengestaltung, Navigation etc. <script type="text/javascript"> // Javascript-Anweisungen zur Visualierung mit D3 </script> </body> </html>
Wichtigste Code-Bausteine
Daten laden
Wir rufen zunächst die zu visualisierenden Daten auf:
- mit
d3.csv()
eine CSV-Datei - mit
d3.tsv()
eine Tab-separierte Datei - mit
d3.json()
JSON-formatierte Daten - …
Code CSV
d3.csv("meinedaten.csv", function(error, data) { // Wir machen etwas mit den Daten. }
Code JSON
d3.json("php/dbquery.php?query=query", function(error, data) { // Wir machen etwas mit den Daten. }
Visualisierung der Daten
- Visualisierung auf einer SVG-Fläche
- Verwendung der
d3.select
-Funktion, um ein DOM-Element auf der Webseite zu adressieren und daran ein SVG-Element anzubringen
Code SVG-Fläche erstellen
var svg = d3.select("#container").append("svg") .attr("width", 700) .attr("height", 500)
- Adressierung eines div-Elements mit der id “container”
svg
-Element mit den Attributenwidth
undheight
wird daran angehängt
Code Daten anbinden
var places = svg.selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d) { return "id"+ d.id; }) var marker = places.append("circle") .attr("r", "20") .attr("fill", "black");
Code Daten anbinden (Erläuterungen)
- geladene Daten mit zu erstellenden
g
-Elementen verknüpfen (mit denen wir die nachfolgenden SVG-Elemente gruppieren) - mit
selectAll(“g”)
alle ggf. bereits vorhandeneng
-Elemente auswählen - die Daten mit
.data(data)
daran anbinden .enter()
: neue Datensätze in den Daten werden zu ggf. bestehenden Daten hinzugefügt- für jeden Datensatz wird ein neues
g
-Element erstellt - es können beliebige weitere SVG-Elemente mit Attributen erstellt werden – alles unterhalb
.data(data).enter()
wird für jeden Datensatz erstellt
Code Datenwerte verwenden (Erläuterungen)
- zu erstellenden Attributen können feste Werte zugewiesen werden:
.attr(“fill”, “black”)
- oder aber dynamisch Werte aus dem Datensatz: Dafür wird die Konstruktion
function(d) { return d.[Spaltenbezeichnung]; }
verwendet - die Funktion stellt mit
d
den aktuellen Datensatz bereit; mitd.[Spaltenbezeichnung]
wird auf die Spalte zugegriffen (z.B. mitd.frequency
auf einen Frequenzwert des Datensatzes)
Code Datenwerte verwenden
var places = svg.selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d) { return "id"+ d.id; }) var marker = places.append("circle") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("r", function(d) { return (1/d.frequency)*20; }) .attr("fill", "black");
Code DOM-Baum
Im Beispiel oben wird also für jeden Datensatz Folgendes erstellt:
<g id="[id]"> <circle cx="[x-Position]" cy="[y-Position]" r="[Radius]" fill="black"></circle> </g>
Code Kartendarstellung (Erläuterungen)
- im Beispiel oben sind für die Datensätze x- und y-Werte vorhanden, die für die Darstellung verwendet werden können
- Spezialfall Kartendarstellung: hier sind x- und y-Werte die Koordinaten auf der Karte
- da eine Karte mit einer Projektion gezeichnet wird (Verzerrung der Kugelform auf Fläche) müssen die x- und y-Werte projiziert werden
- im nächsten Beispiel werden zur Berechnung der x- und y-Werte die Koordinaten der Funktion
projection
übergeben
Code Kartendarstellung
var places = svg.selectAll("g") .data(data) .enter() .append("g") .attr("id", function(d) { return "id"+ d.id; }) var marker = places.append("circle") .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; }) .attr("r", function(d) { return (1/d.frequency)*20; }) .attr("fill", "black");
Standarddiagramme
- Standardiagramme (Balken, Linien, Plots etc.) müssen nicht komplett gezeichnet werden; es gibt Standardfunktionen
- gute Ausgangspunkte:
- Beispiel Barchart: Tutorial
public/vis/d3js.txt · Last modified: 2023-09-15 20:33 by 127.0.0.1