User Tools

You are here: CL Wiki » Research » Visualisierung als Mittel der Analyse und Darstellung sprachlicher Daten » Visualisierung mit D3.js

Table of Contents

Visualisierung mit D3.js

Noah Bubenhofer, 28. Oktober 2014

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

Beispiele mit DB-Anbindung

Tutorials, Einführungen

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

<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

Page Tools

CL Wiki

Institute of Computational Linguistics – University of Zurich

Site Tools