Datenvisualisierung in d3.

js
Rolf Andreas Just @Handgemenge
Barcamp Hannover 201 !"c#1

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js
Aufga"en der $isualisierung
%enerell &ann die grafisc#e Repr'sentation von Daten
versc#iedene (iele verfolgen

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

"essere /r'sentation +d3.

"essere 0ommuni&ation +d3.

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js
d3

Data Driven Do&uments

Java1cript2Bi"liot#e&

1tanford $isuali3ation %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: ;1$: J1<=

>e" 1tandards5 H-49: ;11: 1$%: ?

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js
)rste Beispiele

-#e =e6 @or& -imes5 Ho6 t#e -a* Burden Has ;#anged5
#ttp5,,666.nAtimes.com,interactive,2012,11,30,us,ta*2"urden.#tml

-#e =e6 @or& -imes5 Ho6 t#e Bace"oo& <ffering ;ompares5

#ttp5,,666.nAtimes.com,interactive,2012,0C,1D,"usiness,deal"oo&,
#o62t#e2face"oo&2offering2compares.#tml

-#e =e6 @or& -imes5 ;orporate -a*es5

#ttp5,,666.nAtimes.com,interactive,2013,0C,2C,sundaA2revie6,corp
orate2ta*es.#tml

-#e >ealt# E Healt# of =ations5 #ttp5,,"ost.oc&s.org,mi&e,nations,

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js
ein"inden
<script src="http://d3js.org/d3.v3.min.js"
charset="utf-8"></script>

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");

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js
=ac#teile

Alle Daten ste#en auf dem ;lient 3ur $erfFgung

Berec#nungen 6erden auf dem ;lient durc#gefF#rt

1et3t a&tuelle Bro6ser voraus

Rolf Andreas Just @Handgemenge Datenvisualisierung in d3.js
-utorial

;odecadamA d3 6or&s#op5
#ttp5,,666.codecademA.com,courses,6e"2"eginner2en2
&c/G",0,1

1cott 4urraA5 #ttp5,,alignedleft.com,tutorials,d3,

1cott 4urraA5 7nteractive Data $isuali3ation for t#e >e"5

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

#ttps5,,666.das#ingd3js.com,ta"le2of2contents

#ttp5,,c#ristop#eviau.com,d3list,

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,,dc2js.git#u".io,dc.js,

dimple fFr Business ;#arts5 #ttp5,,dimplejs.org,

;u"ism fFr (eitserien5 #ttp5,,sHuare.git#u".io,cu"ism,

=$D35 einfac#e ;#arts5 #ttp5,,nvd3.org,

? 6eitere5 #ttps5,,gist.git#u".com,6idged,IJ20CCG