Die JavaScript-Bibliothek „D3“ bietet unzählige Möglichkeiten, Daten im Web graphisch darzustellen. Als Einstieg kann ich das Tutorial von Scott Murray empfehlen. Allerdings sind gewisse JavaScript-Vorkenntnisse nötig, um das Tutorial zu begreifen. Nach dem Durcharbeiten der 13 Tutorial-Kapitel ist es mir gelungen, diese relativ simple Darstellung der Zwillingsgeburten im Kanton Basel-Stadt zu erstellen. Die Datengrundlage liefert das Statistische Amt, die ich in Excel in ein JavaScript-Array umgewandelt habe. Die Syntax von D3 ist äusserst knapp gehalten und ermöglicht daher ziemlich effektives Arbeiten. Der untenstehende Befehl beispielsweise erstellt für jeden Eintrag im Array „dataset“ einen Balken in der korrekten Höhe und Position.
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) { return i * (w / dataset.length); })
.attr("y", function(d) { return h - yScale(d); })
.attr("width", Math.round(w / dataset.length - barPadding))
.attr("height", function(d) { return yScale(d); })
Genauere Erläuterungen sind dem Tutorial von Scot Murray zu entnehmen. Das einzige, was ich in Abweichung zum Tutorial selbständig hinzugefügt habe, sind die Jahreszahlen. Diese sind als .append(„text“)-Elemente hinzugefügt, müssen aber im svg.selectAll-Befehl einen neuen Namen erhalten, in meinem Beispiel svg.selectAll(„text2“).
Update: Daten via Google Drive, E-Book
Um D3 besser zu verstehen, habe ich mir das E-Book „Getting Started with D3“ heruntergeladen und mein erstes Beispiel neu programmiert. Zudem war es mir wichtig, einen Weg zu finden, wie ich die Daten als Google Spreadsheet speichern und ins Script einbinden konnte. Das entsprechende Datenfile findet sich hier. Der zunächst einfachste Weg schien mir, die Daten im JSON-Format zu übertragen, da D3 dieses Format unterstütz. Zum Export fand ich auch ein gutes Tutorial, das jedoch nicht zufriedenstellend funktioniert hat. Also habe ich auf CSV-Format umgesattelt, das von Google Drive direkt unterstützt wird (die entsprechende Anleitung ist im JSON-Tutorial enthalten) und bemerkt, dass D3 CSV-Import ebenfalls unterstützt. Die Import-Funktion lautet:
d3.csv('https://docs.google.com/spreadsheet/pub?key=0AnPrU5riz1tMdC10Nl9NOUxvVVc0YzBvSmJVOGNURHc&single=true&gid=0&output=csv', function(data){
draw(data);
})
Im erwähnten E-Book wird die funktion draw(data) zur Ausgabe der Darstellung verwendet, die unabhängig von der Erstellung des Daten-Array funktioniert. Entsprechend habe ich mir beim Umprogrammieren meines Scripts an die Anweisungen aus dem E-Book gehalten. Programmiert habe ich auf jsfiddle.net, einer Online-Programmierumgebung für JavaScript, die auch die D3-Library direkt einbinden kann. Ebenfalls praktisch: Das Programm kann als iframe exportiert und beispielsweise hier in diesem Blog eingebunden werden (fürs Diagramm auf Result klicken).
Fortsetzung folgt.