8/12/2019 Datenvisualisierung in d3js

1/9

Datenvisualisierung in d3.js

Rolf Andreas Just @Handgemenge

Barcamp Hannover 201 !"c#1

8/12/2019 Datenvisualisierung in d3js

2/9

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js

Aufga"en der $isualisierung

%enerell &ann die grafisc#e Repr'sentation von Datenversc#iedene (iele verfolgen

effe&tivere )*ploration +R , -a"leau

"essere /r'sentation +d3 "essere ommuni&ation +d3

8/12/2019 Datenvisualisierung in d3js

3/9

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js

d3 Data Driven Do&umentsJavacriptBi"liot#e& tanford $isualiation %roup 4i&e Bostoc& #ttp5,,d3js.org,

#ttp5,,en.6i&ipedia.org,6i&i,D3js #ttp5,,de.6i&ipedia.org,6i&i,7nformationsgrafi& Daten5 849: ;$: Je" tandards5 H-49: ;: $%: ?

http://d3js.org/http://en.wikipedia.org/wiki/D3jshttp://de.wikipedia.org/wiki/Informationsgrafikhttp://de.wikipedia.org/wiki/Informationsgrafikhttp://en.wikipedia.org/wiki/D3jshttp://d3js.org/

8/12/2019 Datenvisualisierung in d3js

4/9

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js

)rste Beispiele -#e =e6 or& -imes5 Ho6 t#e -a* Burden Has ;#anged5

#ttp5,,666.ntimes.com,interactive,2012,11,30,us,ta*"urden.#tml -#e =e6 or& -imes5 Ho6 t#e ace"oo&

8/12/2019 Datenvisualisierung in d3js

5/9

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js

ein"inden

8/12/2019 Datenvisualisierung in d3js

6/9

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js

de&larative =otation

var paragraphs = document.getElementsByTagName("p");for (var i = 0; i < paragraphs.length; i++) {var paragraph = paragraphs.item(i);paragraph.style.setProperty("color", "white",null);}

d3.selectAll("p").style("color", "white");

8/12/2019 Datenvisualisierung in d3js

7/9

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js

=ac#teile

Alle Daten ste#en auf dem ;lient ur $erfFgung Berec#nungen 6erden auf dem ;lient durc#gefF#rt ett a&tuelle Bro6ser voraus

8/12/2019 Datenvisualisierung in d3js

8/9

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js

-utorial

;odecadam d3 6or&s#op5#ttp5,,666.codecadem.com,courses,6e""eginneren&c/G",0,1

cott 4urra5 #ttp5,,alignedleft.com,tutorials,d3, cott 4urra5 7nteractive Data $isualiation for t#e >e"5

#ttp5,,c#imera.la"s.oreill.com,"oo&s,12300000003C,inde*.#tml

#ttps5,,666.das#ingd3js.com,ta"leofcontents #ttp5,,c#ristop#eviau.com,d3list,

http://chimera.labs.oreilly.com/books/1230000000345/index.htmlhttp://chimera.labs.oreilly.com/books/1230000000345/index.htmlhttps://www.dashingd3js.com/table-of-contentshttp://christopheviau.com/d3list/http://christopheviau.com/d3list/https://www.dashingd3js.com/table-of-contentshttp://chimera.labs.oreilly.com/books/1230000000345/index.htmlhttp://chimera.labs.oreilly.com/books/1230000000345/index.html

8/12/2019 Datenvisualisierung in d3js

9/9

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js

on top of d3.js

Ric&s#a6 fFr (eitserien5#ttp5,,code.s#utterstoc&.com,ric&s#a6,

dc.js fFr ;#arts5 #ttp5,,dcjs.git#u".io,dc.js, dimple fFr Business ;#arts5 #ttp5,,dimplejs.org, ;u"ism fFr (eitserien5 #ttp5,,suare.git#u".io,cu"ism, =$D35 einfac#e ;#arts5 #ttp5,,nvd3.org, ? 6eitere5 #ttps5,,gist.git#u".com,6idged,I20CCG

http://code.shutterstock.com/rickshaw/http://dc-js.github.io/dc.js/http://square.github.io/cubism/http://square.github.io/cubism/http://dc-js.github.io/dc.js/http://code.shutterstock.com/rickshaw/