Table of Contents

Visualisierung mit D3.js

Noah Bubenhofer, 28. Oktober 2014

Slideshow

Was ist D3.js?

Beispiele

Beispiele mit DB-Anbindung

Tutorials, Einführungen

Grundkonzeption

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:

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

Code SVG-Fläche erstellen

var svg = d3.select("#container").append("svg")
	      .attr("width", 700)
	      .attr("height", 500)

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)

Code Datenwerte verwenden (Erläuterungen)

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)

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