Mila Frerichs

D3

Nicht Diablo 3

Eher d 3

data- driven documents

Was ist d3

  • Javascript Library (127kb minified)
  • Data - driven
  • Bindet Daten an das DOM
  • Entwickelt von Mike Bostock (New York Times)

Was kann man damit machen?

Wer benutzt es?

New York Times

Guardian

ZEIT Online

Wir :) (zweitag)

BROWSER SUPPORT

  • Moderne Browser
  • D3 getestet in Firefox, Chrome (Chromium), Safari (WebKit), Opera and IE9
  • SVG: kein IE8 support

Ein einfaches Beispiel

Monster
on
Rails
<tr><td>Monster</td></tr><tr><td>on</td></tr><tr><td>Rails</td></tr>

Daten

[{name: "Monster"},
{name: "on"},
{name: "Rails"}]

Code

@basic = ->
  table = d3.select("body").append("table")

  tr = table.selectAll("tr")
  .data(data)
  .enter()
  .append("tr")

  tr.append("td")
  .text((d)-> d.name)

Magic of Data

Erster Schritt

d3.selectAll

d3.selectAll('tr')

Zweiter Schritt

data()

d3.selectAll('tr').data(data)

Dritter Schritt

enter() oder exit()

d3.selectAll('tr').data(data).enter()
d3.selectAll('tr').data(data).exit()

Enter

DataElements

Update

DataElements

Exit

DataElements

Vierter Schritt

append() oder remove()

d3.selectAll('tr').data(data).enter().append('td')
d3.selectAll('tr').data(data).exit().remove()

Zu einfach?

Komplexe Daten

"id","bundesland","branche","Count"
          "1","Baden-Württemberg","Eisengießereien",4
          "2","Baden-Württemberg","Elektrizitätserzeugung",1
          "3","Baden-Württemberg","Elektrizitätsversorgung",2
          "4","Baden-Württemberg","Erzeugung und erste Bearbeitung von Kupfer",1
          "5","Baden-Württemberg","Erzeugung von Roheisen, Stahl und Ferrolegierungen",3
          "6","Baden-Württemberg","Gewinnung von Naturwerksteinen und Natursteinen, Kalk- und Gipsstein, Kreide und Schiefer",2
          "7","Baden-Württemberg","Herstellung von Furnier-, Sperrholz-, Holzfaser- und Holzspanplatten",1
          "8","Baden-Württemberg","Herstellung von Gipserzeugnissen für den Bau",1
          "9","Baden-Württemberg","Herstellung von Glas und Glaswaren",1
          "10","Baden-Württemberg","Herstellung von Glasfasern und Waren daraus",1
          "11","Baden-Württemberg","Herstellung von Haushalts-, Hygiene- und Toilettenartikeln aus Zellstoff, Papier und Pappe",1
          "12","Baden-Württemberg","Herstellung von Hohlglas",1
          ...
          "89","Berlin","Erzeugung und erste Bearbeitung von sonstigen NE-Metallen",1
          "90","Berlin","Gas-, Wasser-, Heizungs- sowie Lüftungs- und Klimainstallation",1
          "91","Berlin","Herstellung von Verpackungsmitteln aus Kunststoffen",1
          "92","Berlin","Schienenbahn",3
          "93","Brandenburg","Behandlung und Beseitigung nicht gefährlicher Abfälle",1
          "94","Brandenburg","Braunkohlenbergbau",1
          "95","Brandenburg","Eisengießereien",2
          ...

Was tun?

Excel?

GoogleRefine?

R?

Parsen?

Viel einfacher

d3.csv

d3.xml

d3.html

d3.json

d3.tsv

Daten sind meist durcheinander

Abhilfe schaffen

  • d3.nest
  • d3.key

Beispiel d3.csv/d3.nest

d3.csv("per_bundesland.csv", (csv) ->
  data= d3.nest()
    .key((d) -> d.bundesland)
    .sortKeys(d3.ascending)
    .entries(csv)
[{ "key":"Baden-Württemberg",
"values":[
{"id":"1","bundesland":"Baden-Württemberg","branche":"Eisengießereien","Count":"4"},
{"id":"2","bundesland":"Baden-Württemberg","branche":"Elektrizitätserzeugung","Count":"1"},
{"id":"3","bundesland":"Baden-Württemberg","branche":"Elektrizitätsversorgung","Count":"2"},
]},
{"key":"Bayern",
"values":[
{"id":"41","bundesland":"Bayern","branche":"Drucken von Zeitungen","Count":"1"},
{"id":"42","bundesland":"Bayern","branche":"Eisengießereien","Count":"6"},
{"id":"43","bundesland":"Bayern","branche":"Elektrizitätserzeugung","Count":"1"},
]},
{"key":"Berlin",
"values":[
{"id":"87","bundesland":"Berlin","branche":"Behandlung und Beseitigung nicht gefährlicher Abfälle","Count":"1"},
{"id":"88","bundesland":"Berlin","branche":"Elektrizitätsverteilung","Count":"1"},
]}

Animation

transition()

Farbe wechseln

d3.select(this)
.transition()
.duration(750)
.attr("style", "background: green")

Beispiele

EEG

Fahrradunfälle

Treemap

Nützliche Funktionen

  • d3.nest
  • d3.map
  • d3.max/min/median/etc
  • d3.scale/d3.axis

Nützliche Bibliotheken

Fragen?

Links