D3.js workshop

WEB STANDARDS

D3 provides transformation;
no new representation.

MAPPING DATA TO ELEMENTS

Visualisation requires visual encoding:
mapping data to elements.

NOTHING NEW
D3 refers to

Data-Driven Documents

W3C Document Object Model.

D3 = STANDARDS

Learning D3 is largely learning web standards

HTML
HTML5 Spec
http://www.w3.org/TR/html5/
HTML5 for Developers
http://developers.whatwg.org/
MDN
https://developer.mozilla.org/en/HTML
Dive Into HTML5
http://diveintohtml5.info/

HTML 5
<DCYEhm>
!OTP tl
<eacast"t-"
mt hre=uf8>
<oy
bd>
Hlowrd
el,ol!

SVG
SVG Spec
http://www.w3.org/TR/SVG/
MDN
https://developer.mozilla.org/en/SVG
D3 API Reference
https://github.com/mbostock/d3/wiki/SVG-Shapes

SVG
<DCYEhm>
!OTP tl
<eacast"t-"
mt hre=uf8>
<v wdh"6"hih=50>
sg it=90 egt"0"
<ety"2>
tx =1"
Hlo wrd
el, ol!
<tx>
/et
<sg
/v>

CSS
CSS Spec
http://www.w3.org/TR/CSS2/
Selectors Spec
http://www.w3.org/TR/selectors/

CSS
<DCYEhm>
!OTP tl
<eacast"t-"
mt hre=uf8>
<tl>
sye
bd {bcgon:selle }
oy akrud tebu;
<sye
/tl>
<oy
bd>
Hlo wrd
el, ol!

JAVASCRIPT
MDN
https://developer.mozilla.org/en/JavaScript

Douglas Crockford’s JavaScript: The Good Parts
http://shop.oreilly.com/product/9780596517748.do
http://javascript.crockford.com/

JAVASCRIPT
<DCYEhm>
!OTP tl
<eacast"t-"
mt hre=uf8>
<oy
bd>
<cit
srp>
cnoelg"el,wrd";
osl.o(Hlo ol!)
<srp>
/cit

START SMALL
<DCYEhm>
!OTP tl
<eacast"t-"
mt hre=uf8>
<tl>*CS*<sye
sye/ S //tl>
<oy
bd>
<citsc"3v.s>/cit
srp r=d.2j"<srp>
<cit/ JvSrp *<srp>
srp>* aacit //cit

D3 RESOURCES
D3 API Reference
https://github.com/mbostock/d3/wiki/API-Reference
D3 Wiki
https://github.com/mbostock/d3/wiki
D3 Group
https://groups.google.com/group/d3-js
D3 Stack Overflow
http://stackoverflow.com/questions/tagged/d3.js

CSS SELECTORS
pe cd {
r, oe
fn-aiy "el" mnsae
otfml: Mno, oopc;
fn-ie 4p;
otsz: 8x
}

CSS style selectors
#o
fo / <n i=fo>
/ ay d"o"
fo
o / <o>
/ fo
.o
fo / <n cas"o"
/ ay ls=fo>
[o=a]
fobr / <n fo"a"
/ ay o=br>
fobr
o a / <o>br<fo
/ fo<a>/o>

fobr
o.a / <o cas"a"
/ fo ls=br>
fobr
o#a / <o i=br>
/ fo d"a"

SELECTORS
Javascript
dcmn.urSlcoAl"r,cd"
ouetqeyeetrl(pe oe)

jQuery
$'r,cd'
(pe oe)

D3
d.eetl(pe cd"
3slcAl"r, oe)

SELECTIONS ARE ARRAYS
/ slc al<ice eeet
/ eet l crl> lmns
vrcrl =d.eetl(crl";
a ice 3slcAl"ice)

/ stsm atiue adsye
/ e oe trbts n tls
crl.tr"x,2)
iceat(c" 0;
crl.tr"y,1)
iceat(c" 2;
crl.tr"" 2)
iceat(r, 4;
crl.tl(fl" "e";
icesye"il, rd)

METHOD CHAINING
/ slc al<ice eeet
/ eet l crl> lmns
/ adstsm atiue adsye
/ n e oe trbts n tls
d.eetl(crl"
3slcAl"ice)
.tr"x,2)
at(c" 0
.tr"y,1)
at(c" 2
.tr"" 2)
at(r, 4
.tl(fl" "e";
sye"il, rd)

SELECTION.APPEND
Single
/ slc te<oy eeet
/ eet h bd> lmn
vrbd =d.eet"oy)
a oy 3slc(bd";

/ ada <1 eeet
/ d n h> lmn
vrh =bd.ped"1)
a 1 oyapn(h";
h.et"el!)
1tx(Hlo";

Collection
/ slc al<eto>eeet
/ eet l scin lmns
vrscin=d.eetl(scin)
a eto 3slcAl"eto";

/ ada <1 eeett ec
/ d n h> lmn o ah
vrh =scinapn(h";
a 1 eto.ped"1)
h.et"el!)
1tx(Hlo";

WARNING!!
Use caution with method chaining: append returns a new
selection!
vrh =d.eetl(scin)
a 1 3slcAl"eto"
.tl(bcgon" "tebu"
sye"akrud, selle)
.ped"1)
apn(h"
.et"el!)
tx(Hlo";

DATA ARE ARRAYS
Selections are arrays
Data are arrays

Coincidence?

DATA
Numbers
/ Abrcat pras
/ a hr, ehp?
vrdt =[,1 2 3 5 8;
a aa 1 , , , , ]

Objects
/ Asatrlt pras
/ ctepo, ehp?
vrdt =[
a aa
{:1.,y 91}
x 00 : .4,
{: 80 y 81}
x ., : .4,
{:1.,y 87}
x 30 : .4,
{: 90 y 87}
x ., : .7,
{:1.,y 92}
x 10 : .6
];

DATA TO ELEMENTS
Use data to create multiple elements.
sgslcAl"ice)
v.eetl(crl"
.aadt)
dt(aa
.ne(.ped"ice)
etr)apn(crl"
.tr"x,x
at(c" )
.tr"y,y
at(c" )
.tr"" 25;
at(r, .)

We want the selection “circle” to correspond to data.

.DATA()
Use data to create multiple elements.
vrcrl =sgslcAl"ice)
a ice v.eetl(crl"
.aadt)
dt(aa;

The data method computes the join, defining enter and exit.

vrcrl =sgslcAl"ice)
a ice v.eetl(crl"
.aadt)
dt(aa;

crl.ne(.ped"ice)
iceetr)apn(crl";

Appending to the enter selection creates the missing
elements.

fnto xd {rtr dx }
ucin () eun .;
fnto yd {rtr dy }
ucin () eun .;

vrcrl =sgslcAl"ice)
a ice v.eetl(crl"
.aadt)
dt(aa;

crl.ne(.ped"ice)
iceetr)apn(crl"
.tr"x,x
at(c" )
.tr"y,y
at(c" )
.tr"" 25;
at(r, .)

The new elements are bound to data, so we can compute
attributes.

ENTER, UPDATE & EXIT
Thinking with Joins

ENTER
New data, for which there were no existing elements.

When initializing, you might ignore update and exit.
vrcrl =sgslcAl"ice)
a ice v.eetl(crl"
.aadt)
dt(aa
.ne(.ped"ice)
etr)apn(crl"
.tr"x,x
at(c" )
.tr"y,y
at(c" )
.tr"" 25;
at(r, .)

UPDATE
New data that was joined successfully to an existing element.

UPDATE
When updating, you might ignore enter and exit.
vrcrl =sgslcAl"ice)
a ice v.eetl(crl"
.aadt)
dt(aa
.tr"x,x
at(c" )
.tr"y,y
at(c" )
.tr"" 25;
at(r, .)

EXIT
Existing elements, for which there were no new data.

EXIT
vrcrl =sgslcAl"ice)
a ice v.eetl(crl"
.aadt)
dt(aa;

crl.ne(.ped"ice)
iceetr)apn(crl"
.tr"x,x
at(c" )
.tr"y,y
at(c" )
.tr"" 25;
at(r, .)

ENTER + UPDATE
Entering nodes are added to update on append.

ENTER + UPDATE
vrcrl =sgslcAl"ice)
a ice v.eetl(crl"
.aadt)
dt(aa;

crl.xt)rmv(;
iceei(.eoe)

KEY FUNCTION
You can control the join;
by default, the join is by index.

/ Asatrlt pras
/ ctepo, ehp?
vrdt =[
a aa
{ae "lc" x 1.,y 91}
nm: Aie, : 00 : .4,
{ae
nm: "o" x 80 y 81}
Bb, : ., : .4,
{ae "ao" x 1.,y 87}
nm: Crl, : 30 : .4,
{ae "ae,x 90 y 87}
nm: Dv" : ., : .7,
{ae "dt" x 1.,y 92}
nm: Eih, : 10 : .6
];

If needed, data should have a unique key for joining.

fnto kyd {rtr dnm;}
ucin e() eun .ae

vrcrl =sgslcAl"ice)
a ice v.eetl(crl"
.aadt,ky
dt(aa e)
.tr"x,x
at(c" )
.tr"y,y
at(c" )
.tr"" 25;
at(r, .)

The key function returns a unique string for each datum.

LOADING DATA
D3 provides several convenience routines using
XMLHttpRequest .
CSV
JSON

D3 AND ARRAY
JavaScript has a number of useful built-in array methods.
array. {filter,map,sort,…}

D3 also has a variety of data-transform methods; explore the
API .
d3. {nest,keys,values,…}

DOMAIN => RANGE
Scales are functions that map from data-space to visual-
space.
fnto xd {
ucin ()
rtr d*4 +"x;
eun 2 p"
}

Scales are convenient but optional; you can roll your own.

QUANTITATIVE SCALES
Map a continuous (numeric) domain to a continuous range.
linear
sqrt
pow
log
quantize
threshold
quantile
identity

vrx=d.cl.ier)
a 3saelna(
.oan[2 2]
dmi(1, 4)
.ag(0 70)
rne[, 2];

x1) / 20
(6; / 4

vrx=d.cl.qt)
a 3saesr(
.oan[2 2]
dmi(1, 4)
.ag(0 70)
rne[, 2];

x1) / 289592053
(6; / 6.069638

vrx=d.cl.o(
a 3saelg)
.oan[2 2]
dmi(1, 4)
.ag(0 70)
rne[, 2];

x1) / 288694063
(6; / 9.2998777

DOMAINS & RANGES
Typically, domains are derived from data while ranges are
constant.

vrx=d.cl.ier)
a 3saelna(
.oan[,d.a(ubr))
dmi(0 3mxnmes]
.ag(0 70)
rne[, 2];

vrx=d.cl.o(
a 3saelg)
.oand.xetnmes)
dmi(3etn(ubr)
.ag(0 70)
rne[, 2];

fnto vled {rtr dvle }
ucin au() eun .au;

vrx=d.cl.o(
a 3saelg)
.oand.xetojcs vle)
dmi(3etn(bet, au)
.ag(0 70)
rne[, 2];

INTERPOLATORS
Quantitative scales support multiple interpolators.

vrx=d.cl.ier)
a 3saelna(
.oan[2 2]
dmi(1, 4)
.ag("tebu" "rw")
rne[selle, bon];

x1) / #656
(6; / 668

vrx=d.cl.ier)
a 3saelna(
.oan[2 2]
dmi(1, 4)
.ag("p" "2p")
rne[0x, 70x];

x1) / 20x
(6; / 4p

vrx=d.cl.ier)
a 3saelna(
.oan[2 2]
dmi(1, 4)
.ag("tebu" "rw")
rne[selle, bon]
.neplt(3itroaes)
itroaed.nepltHl;

x1) / #c0f
(6; / 3b5

OBJECT INTERPOLATION
just to mention

DIVERGING SCALES
Sometimes, you want a compound (“polylinear”) scale.
vrx=d.cl.ier)
a 3saelna(
.oan[1,0 10)
dmi(-0 , 0]
.ag("e" "ht" "re")
rne[rd, wie, gen];

x-) / #f00
(5; / f88
x5) / #000
(0; / 8c8

ORDINAL SCALES
An ordinal scale is essentially an explicit mapping.
vrx=d.cl.ria(
a 3saeodnl)
.oan[A,"" "" "")
dmi("" B, C, D]
.ag(0 1,2,3];
rne[, 0 0 0)

x"";/ 1
(B) / 0

vrx=d.cl.aeoy0)
a 3saectgr2(
.oan[A,"" "" "")
dmi("" B, C, D];

x"";/ #e78
(B) / ace

vrx=d.cl.aeoy0)
a 3saectgr2(
.oan[A,"" "" "")
dmi("" B, C, D];

x"";/ #c0c
(E) / 2a2
x"";/ #c0c
(E) / 2a2
xdmi(;/ A B C D E
.oan) / , , , ,

Ordinal ranges can be derived from continuous ranges.
vrx=d.cl.ria(
a 3saeodnl)
.oan[A,"" "" "")
dmi("" B, C, D]
.agPit(0 70)
rneons[, 2];

x"";/ 20
(B) / 4

vrx=d.cl.ria(
a 3saeodnl)
.oan[A,"" "" "")
dmi("" B, C, D]
.agRudad(0 70,.)
rneonBns[, 2] 2;

x"";/ 26 brpsto
(B) / 0, a oiin
xrnead) / 17 brwdh
.agBn(; / 3, a it

AXIS
D3 provides convenient labeling for scales.

Create
vryxs=d.v.xs)
a Ai 3sgai(
.cl()
saey
.ret"et)
oin(lf";

Render
sgapn(g)
v.ped""
.tr"ls" " ai"
at(cas, y xs)
.alyxs;
cl(Ai)

Style
.xspt,.xsln {
ai ah ai ie
fl:nn;
il oe
srk:#0;
toe 00
saerneig cipde;
hp-edrn: rsEgs
}

TICKS
Quantitative scales can be queried for “human-readable”
values.
vrx=d.cl.ier)
a 3saelna(
.oan[2 2]
dmi(1, 4)
.ag(0 70)
rne[, 2];

xtcs5;/ [2 1,1,1,2,2,2]
.ik() / 1, 4 6 8 0 2 4

The requested count is only a hint (for better or worse).

TICK FORMATS
d3.format
d3.time.format

SVG COORDINATES
Absolute positioning; the origin ⟨0,0⟩ is the top-left corner!

vrsg=d.eet"oy)apn(sg)
a v 3slc(bd".ped"v"
.tr"it" otrit)
at(wdh, ueWdh
.tr"egt,otregt;
at(hih" ueHih)

vrg=sgapn(g)
a v.ped""
.tr"rnfr" "rnlt(
at(tasom, tasae"
+mriLf +""
agnet ,
+mriTp+"";
agno ))

Use margins for decorative elements, such as axes.

SVG BASIC SHAPES
rect
circle
line
text

SVG PATHS
<ahd"126929516,2.608859L3.819503
pt =M5.460104230507056813893566
1,2.337133L3.6994406303973919L3.9429
8354617258149805434,3.7164296111384
528,3.5331829.6819285355930870L11409
37631189641L85610681,3.33875049.457
9815337622297.800311,3.43906166.1245
483,3.96057L21811298337737086L95735
754,3.598405L23331346,3.106838L22833
8723286614126.71915063320664376.434
0173,3.677780L8834988363507990065.76
93443537220455.4409882,3.545653L396
71242,3.67153155.05781713591941816.0
37121313052637L63923181,2.479315L38
279273,2.295086L83003015,2.86230956.
0263173601689996.7102005316102725L8
8171073,1.81513277.4"
2742993380129458L33…>

PATH GENERATORS
Configurable functions for generating paths from data.
d3.svg.line
d3.svg.area

D3.SVG.LINE
Create
vrx=d.cl.ier)
a 3saelna(,
y=d.cl.ier)
3saelna(;

vrln =d.v.ie)
a ie 3sgln(
.(ucind {rtr xdx;}
xfnto() eun (.) )
.(ucind {rtr ydy;};
yfnto() eun (.) )

Render
sgapn(pt"
v.ped"ah)
.au(bet)
dtmojcs
.tr"ls" "ie)
at(cas, ln"
.tr"" ln)
at(d, ie;

LINE INTERPOLATORS
Line and area generators support multiple interpolation
modes.
Linear, Step and Basis Interpolation

RADIAL AREAS & LINES
Similar to d3.svg.{area,line}, except in polar coordinates.
d3.svg.arc

D3.SVG.ARC
vrmEaper ={
a yxmlAc
"neRdu" 0
inrais: ,
"ueRdu" 30
otrais: 6,
"trAge:0 / 1 ocok
satnl" , / 2 'lc
"nAge:12/ rdas
ednl" . / ain
};

vrac=d.v.r(
a r 3sgac)
.neRdu()
inrais0
.ueRdu(6)
otrais30;

/ cntutadfutpelyu
/ osrc eal i aot
vrpe=d.aotpe)
a i 3lyu.i(;
/ drv dt t fe t d.v.r
/ eie aa o ed o 3sgac
vrmAc =penmes;
a yrs i(ubr)

vrpt =sgslcAl"ah)
a ah v.eetl(pt"
.aamAc)
dt(yrs
.ne(.ped"ah)
etr)apn(pt"
.tr"" ac;
at(d, r)

LAYOUTS ARE DATA
Layouts are reusable algorithms that generate data, not
display.

LAYOUTS ARE VARIED
Each layout is different. Most are stateless, but not all.

HIERARCHICAL LAYOUTS
There are lots of ways to visualize hierarchical data!
d3.layout.treemap
d3.layout.tree
d3.layout.pack
d3.layout.partition
d3.layout.force
d3.layout.bundle
d3.geom.voronoi
d3.geom.chord

Layouts are configurable functions.
vrtemp=d.aottemp)
a rea 3lyu.rea(
.adn()
pdig4
.ie[it,hih];
sz(wdh egt)

fnto xd {rtr dx }
ucin () eun .;
fnto yd {rtr dy }
ucin () eun .;
fnto d(){rtr dd;}
ucin xd eun .x
fnto d(){rtr dd;}
ucin yd eun .y

sgslcAl"cl"
v.eetl(.el)
.aatempndsro)
dt(rea.oe(ot)
.ne(.ped"et)
etr)apn(rc"
.tr"ls" "el)
at(cas, cl"
.tr"" x
at(x, )
.tr"" y
at(y, )
.tr"it" d)
at(wdh, x
.tr"egt,d)
at(hih" y;

SUM UP
Selectors
Data
Joins (enter, update, exit)
Scales
Axis
Shapes
Layouts

REFERENCES
http://bost.ocks.org/mike/d3/workshop/

D3.js workshop

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie D3.js workshop

Ähnlich wie D3.js workshop (20)

D3.js workshop