User Tools

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

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
public:vis:d3js [2014-10-27 21:20] – bubenhoferpublic:vis:d3js [2023-09-15 20:33] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +====== 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 =====
 +
 +<code 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>
 +</code>
 +
 +===== 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 ====
 +
 +<code javascript>
 +d3.csv("meinedaten.csv", function(error, data) {
 +  // Wir machen etwas mit den Daten.
 +}
 +</code>
 +
 +
 +==== Code JSON ====
 +
 +<code javascript>
 +d3.json("php/dbquery.php?query=query", function(error, data) {
 +  // Wir machen etwas mit den Daten.
 +}
 +</code>
 +        
 +==== 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 ====
 +
 +<code javascript>
 +var svg = d3.select("#container").append("svg")
 +       .attr("width", 700)
 +       .attr("height", 500)
 +</code>
 +
 +  * Adressierung eines div-Elements mit der id "container"
 +  * ''svg''-Element mit den Attributen ''width'' und ''height'' wird daran angehängt
 +
 +==== Code Daten anbinden ====
 +
 +<code javascript>
 +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>
 +
 +
 +
 +==== 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 ====
 +
 +<code javascript>
 +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>
 +
 +==== Code DOM-Baum ====
 +
 +
 +Im Beispiel oben wird also für jeden Datensatz Folgendes erstellt:
 +
 +<code xml>
 +<g id="[id]">
 +  <circle cx="[x-Position]" cy="[y-Position]" r="[Radius]" fill="black"></circle>
 +</g>
 +</code>
 +
 +==== 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 ====
 +
 +
 +<code javascript>
 +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");
 +</code>
 +
 +
 +  * 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]]
  

Page Tools

CL Wiki

Institute of Computational Linguistics – University of Zurich

Site Tools