Daten visualisieren mit D3.js – video2brain

/, Technology/Daten visualisieren mit D3.js – video2brain

Daten visualisieren mit D3.js – video2brain

Meine Notizen zu dem Kurs Daten visualisieren mit D3.js

Einführung in D3

  • Data-driven Documents
  • Automatische Manipulation von DOM-Elementen mit Daten
  • Darstellungen werden über SVG realisiert
  • Dient primär der Datendarstellung
  • Kein Ersatz für jQuery, Angular, …
  • Wird auch von der NY Times verwendet
  • Kurz zusammengefasst: Mit D3 lassen sich einfach DOM-Elemente generieren, Graphik entsteht über die Generierung von SVG Elementen.

Daten im DOM

Daten in DOM-Elemente übertragen

var daten = 
['a', 'b', 'c']; d3.select('body').selectAll('p').data(daten) .enter().append('p').text('Hallo!');
  • selectAll() ist eine Auswahl, die sich “gemerkt” wird
  • enter() erstellt Platzhalter für alle Datenelement die nicht in der Selektion gefunden wurden
  • exit().remove() entfernt Element aus der Selektion bzw. aus dem DOM.

Datenbindung über DOM-Elemente

var daten = ['a', 'b', 'c']; 
var pSelection = d3.selet('body').selectAll('p');
pSelection.data(daten).enter().append('p').text(function(d) { return d; });

// 2
pSelection.data(daten).text(function(d, i) { return i + d + '!'; });
  • selectAll() ist nur zum Zeitpunkt des Aufrufs gültig, wenn später Elemente hinzugefügt werden, so muss selectAll() wieder ausgeführt werden.
  • text(function) ist eine Funktion die pro Datensatz ausgeführt wird.
  • #2 Aktualisiert die bisher erzeugten Elemente!
  • this referenziert auf das aktuelle DOM-Element.

Unterschiedliche Datenquellen nutzen

var daten = [{ 'Name' : 'a', 'Age': 21} , { 'Name' : 'b', 'Age': 22} ]; 

var pSelection = d3.selet('body').selectAll('p').data(daten).enter().append('p')
.text(function(d) { return d.Name + " " + d.Age; });

d3.csv('...', function(data) { /* Callback */ daten = data; }); // Lädt CSV Daten
d3.tsv('...', function(data) { /* Callback */ daten = data; }); // Lädt TSV Daten

Datenmapping – Transformation / Aggregation

<table id="spieler"><thead></thead></table>
var tabellenkopf = ["Spieler", "Tore"];
var table = d3.select('body > table#spieler');
// thead erzeugen
table.select('thead').selectAll('td')
    .data(tabellenkopf).enter().append('th')
    .append('td').text(function(d) { return d;});

d3.json('http://openligadb...', function(data) {
    var players = [];
    data.forEach(function(d) {
        d.Goals.forEach(function(goal) {
            players.push(goal.GoalGetterName);
        });
    });

    var uniquePlayers = d3.set(players);

    var playersWithGoals = d3.next()
        .key(function(d) { return d; })
        .rollup(function(d) {
            return d3.sum(d, function(g) { return 1; });
        })
        .entries(players);

    playersWithGoals = playersWithGoals.sort(function(a, b) {
        return d3.descending(a.values, b.values);
    });

    var trElements = table.select('tbody').selectAll('td').data(playersWithGoals).enter().append('tr');
    trElements.append('td').text(function (d) { return d.key; });
    trElements.append('td').text(function (d) { return d.values; });
});
  • rollup() = Aggregation
  • nest() = GroupBy
  • forEach()

Dynamische Filter

<select id="teamFilter"></select>
var teams = d3.map(players, function(d) { return d.team; }).keys();

// Befüllen des select durch Erzeugung der 'option'-Tags

// Daten Filterung durch
XXX.filter(function(d) { ... } );

SVG und D3

Einführung

var breite = 300; var hoehe = 300;

var svgElement = d3.select('body').append('svg').attr({'width': breite, 'height': hoehe});
svgElement.append('rect').attr({ 'width' : 50, 'height' : 60});
  • Nullpunkt ist links oben, Y+ nach unten, X+ nach rechts. Meinstens Umrechnung über die Höhe der Zeichenfläche nötig.

Zeichnen

  • Pfade: SVG Path <path> wird über den Parameter d beschrieben, einfacher geht es aber über var f = d3.svg.line().x(function...).y(function...); diese kann über svgElement.append('path').attr({'d': f(data)}); verwendet werden.
  • Gruppen:
    • Beispiel: Achsen mit Beschriftung, Zusammenfassung z. B. für Drag&Drop.
    • Definition: var group = svgElement.append('g').attr({'transform : 'translate(20, 0)'});, Verwendung von group weiter wie svgElement.
  • Normierung: f = d3.scale.linear().domain([minData, maxData]).range([minDisplay, maxDisplay]).
  • Achsen: var xAchse = d3.svg.axis().scale(xSkala).orient(xxx);var xSkala = d3.scale.ordinal().domain(d3.range(daten.length+1)).rangeRoundBands([margin, breite], 0.05)var xAchseElement = svgElement.append('g').call(xAchse);. Skalierung der Daten mit xSkala(x).
  • Text: <text> bzw. ... .append('text') ... .text(function ...);. Text zentrieren über text-anchor: middle;.
By |2016-06-11T18:55:31+00:00June 11th, 2016|Allgemein, Technology|0 Comments

Share This Story, Choose Your Platform!

About the Author:

Leave A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.