====== Visualisierung mit D3.js ====== Noah Bubenhofer, 28. Oktober 2014 [[https://pub.cl.uzh.ch/wiki/public/vis/d3js?do=export_reveal.js&theme=simple#/|Slideshow]] ===== 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 ===== * Siehe: https://github.com/mbostock/d3/wiki/Gallery * 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: [[http://linguistik.zih.tu-dresden.de/nbubenhofer/geocollocations/barchart.html|Beispiel im Web]], generelle [[http://bost.ocks.org/mike/bar/|Anleitung]] zu Bar Charts in D3.js * Dynamische Karten-Darstellung durch DB-Abfrage: [[http://linguistik.zih.tu-dresden.de/nbubenhofer/geocollocations/d3.geocollocations.v6.html|Beispiel im Web]], generelle [[http://datamaps.github.io/|Anleitung]] zu Karten mit D3.js * Dynamische Karten-Darstellung durch DB-Abfrage (ausführliche Version): [[http://linguistik.zih.tu-dresden.de/nbubenhofer/geocollocations/geocollocations.explorer.html|Beispiel im Web]] * Code im Git [[http://rogerdudler.github.io/git-guide/|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 ===== * https://github.com/mbostock/d3/wiki * 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 [[http://www.d3js.org|D3.js]]: SVG-Elemente * Daten: * einlesen von CSV-, XML- oder JSON-Datei * Abfrage aus Datenbank; Abfrage-Interface über PHP ===== Einbettung in HTML =====



  
    
       // Referenz zur D3-Bibliothek
      
    
  
  
    // Hier kommen HTML-Elemente zur Seitengestaltung, Navigation etc.

===== 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 [[https://de.wikipedia.org/wiki/Scalable_Vector_Graphics|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 Attributen ''width'' und ''height'' 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 vorhandenen ''g''-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; mit ''d.[Spaltenbezeichnung]'' wird auf die Spalte zugegriffen (z.B. mit ''d.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:

==== 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");

* Komplettbeispiel Kartendarstellung: [[https://pub.cl.uzh.ch:11443/bubenhofer/vislingkurs/blob/master/geocollocations/d3.geocollocations.v6.html|Code]], [[http://linguistik.zih.tu-dresden.de/nbubenhofer/geocollocations/d3.geocollocations.v6.html|im Web]] * Umfangreicheres Beispiel: [[https://pub.cl.uzh.ch:11443/bubenhofer/vislingkurs/blob/master/geocollocations/geocollocations.explorer.html|Code]], [[http://linguistik.zih.tu-dresden.de/nbubenhofer/geocollocations/geocollocations.explorer.html|im Web]] ===== Standarddiagramme ===== * Standardiagramme (Balken, Linien, Plots etc.) müssen nicht komplett gezeichnet werden; es gibt Standardfunktionen * gute Ausgangspunkte: * https://github.com/mbostock/d3/wiki/Gallery * http://bost.ocks.org/mike/ * Beispiel Barchart: [[http://bost.ocks.org/mike/bar/|Tutorial]] * Barchart interaktiv mit Datenbankanbindung: [[https://pub.cl.uzh.ch:11443/bubenhofer/vislingkurs/blob/master/geocollocations/barchart.html|Code]], [[http://linguistik.zih.tu-dresden.de/nbubenhofer/geocollocations/barchart.html|im Web]]