This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
public:vis:d3js [2014-10-27 21:18] – bubenhofer | public: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:// | ||
+ | |||
+ | ===== Was ist D3.js? ===== | ||
+ | |||
+ | * D3: Data-Driven Documents: [[http:// | ||
+ | * JavaScript-Bibliothek um Dokumente aufgrund von Daten zu manipulieren: | ||
+ | * nutzt HTML, SVG and CSS | ||
+ | |||
+ | ===== Beispiele ===== | ||
+ | |||
+ | * Siehe: https:// | ||
+ | * Politischer Einfluss: http:// | ||
+ | * Geokollokationen: | ||
+ | |||
+ | ===== Beispiele mit DB-Anbindung ===== | ||
+ | |||
+ | * Dynamische Bar-Chart-Erstellung durch DB-Abfrage: [[http:// | ||
+ | * Dynamische Karten-Darstellung durch DB-Abfrage: [[http:// | ||
+ | * Dynamische Karten-Darstellung durch DB-Abfrage (ausführliche Version): [[http:// | ||
+ | * Code im Git [[http:// | ||
+ | * Vgl. dazu auch https:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== Tutorials, Einführungen ===== | ||
+ | |||
+ | * https:// | ||
+ | * grundlegende Einführung: | ||
+ | * viele Tutorials mit unterschiedlichen Schwerpunkten: | ||
+ | * mit hat gefallen: http:// | ||
+ | * API-Referenz: | ||
+ | |||
+ | |||
+ | ===== Grundkonzeption ===== | ||
+ | |||
+ | * Interface als HTML-Seite mit Javascript | ||
+ | * Visualisierung mit der Javascript-Bibliothek [[http:// | ||
+ | * Daten: | ||
+ | * einlesen von CSV-, XML- oder JSON-Datei | ||
+ | * Abfrage aus Datenbank; Abfrage-Interface über PHP | ||
+ | |||
+ | ===== Einbettung in HTML ===== | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <script src=" | ||
+ | <style type=" | ||
+ | // Style-Angaben für die Darstellung aller Elemente (HTML und SVG) | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | // Hier kommen HTML-Elemente zur Seitengestaltung, | ||
+ | | ||
+ | <script type=" | ||
+ | // Javascript-Anweisungen zur Visualierung mit D3 | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | ===== Wichtigste Code-Bausteine ===== | ||
+ | |||
+ | ==== Daten laden ==== | ||
+ | |||
+ | Wir rufen zunächst die zu visualisierenden Daten auf: | ||
+ | |||
+ | * mit '' | ||
+ | * mit '' | ||
+ | * mit '' | ||
+ | * ... | ||
+ | |||
+ | ==== Code CSV ==== | ||
+ | |||
+ | <code javascript> | ||
+ | d3.csv(" | ||
+ | // Wir machen etwas mit den Daten. | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Code JSON ==== | ||
+ | |||
+ | <code javascript> | ||
+ | d3.json(" | ||
+ | // Wir machen etwas mit den Daten. | ||
+ | } | ||
+ | </ | ||
+ | | ||
+ | ==== Visualisierung der Daten ==== | ||
+ | |||
+ | * Visualisierung auf einer [[https:// | ||
+ | * Verwendung der '' | ||
+ | |||
+ | ==== Code SVG-Fläche erstellen ==== | ||
+ | |||
+ | <code javascript> | ||
+ | var svg = d3.select("# | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | </ | ||
+ | |||
+ | * Adressierung eines div-Elements mit der id " | ||
+ | * '' | ||
+ | |||
+ | ==== Code Daten anbinden ==== | ||
+ | |||
+ | <code javascript> | ||
+ | var places = svg.selectAll(" | ||
+ | .data(data) | ||
+ | .enter() | ||
+ | .append(" | ||
+ | .attr(" | ||
+ | return " | ||
+ | }) | ||
+ | |||
+ | var marker = places.append(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ==== Code Daten anbinden (Erläuterungen) ==== | ||
+ | |||
+ | * geladene Daten mit zu erstellenden '' | ||
+ | * mit '' | ||
+ | * die Daten mit '' | ||
+ | * '' | ||
+ | * für jeden Datensatz wird ein neues '' | ||
+ | * es können beliebige weitere SVG-Elemente mit Attributen erstellt werden – alles unterhalb '' | ||
+ | |||
+ | |||
+ | ==== Code Datenwerte verwenden (Erläuterungen) ==== | ||
+ | |||
+ | |||
+ | * zu erstellenden Attributen können feste Werte zugewiesen werden: '' | ||
+ | * oder aber dynamisch Werte aus dem Datensatz: Dafür wird die Konstruktion '' | ||
+ | * die Funktion stellt mit '' | ||
+ | |||
+ | |||
+ | ==== Code Datenwerte verwenden ==== | ||
+ | |||
+ | <code javascript> | ||
+ | var places = svg.selectAll(" | ||
+ | .data(data) | ||
+ | .enter() | ||
+ | .append(" | ||
+ | .attr(" | ||
+ | return " | ||
+ | }) | ||
+ | |||
+ | var marker = places.append(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | </ | ||
+ | |||
+ | ==== Code DOM-Baum ==== | ||
+ | |||
+ | |||
+ | Im Beispiel oben wird also für jeden Datensatz Folgendes erstellt: | ||
+ | |||
+ | <code xml> | ||
+ | <g id=" | ||
+ | <circle cx=" | ||
+ | </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: | ||
+ | * 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 '' | ||
+ | |||
+ | ==== Code Kartendarstellung ==== | ||
+ | |||
+ | |||
+ | <code javascript> | ||
+ | var places = svg.selectAll(" | ||
+ | .data(data) | ||
+ | .enter() | ||
+ | .append(" | ||
+ | .attr(" | ||
+ | return " | ||
+ | }) | ||
+ | |||
+ | var marker = places.append(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | .attr(" | ||
+ | </ | ||
+ | |||
+ | |||
+ | * Komplettbeispiel Kartendarstellung: | ||
+ | * Umfangreicheres Beispiel: [[https:// | ||
+ | |||
+ | ===== Standarddiagramme ===== | ||
+ | |||
+ | * Standardiagramme (Balken, Linien, Plots etc.) müssen nicht komplett gezeichnet werden; es gibt Standardfunktionen | ||
+ | * gute Ausgangspunkte: | ||
+ | * https:// | ||
+ | * http:// | ||
+ | * Beispiel Barchart: [[http:// | ||
+ | * Barchart interaktiv mit Datenbankanbindung: | ||