This document provides an overview of key concepts for working with D3, including: - D3 uses standard web technologies like HTML, SVG, and CSS rather than introducing new representations. Learning D3 largely means learning web standards. - Visualization with D3 requires mapping data to visual elements using scales. Scales are functions that map from data values to visual values like pixel positions. - Selections in D3 correspond to elements in the DOM. Data joins allow binding data to selections to drive attribute updates. The enter, update, exit pattern is used to handle new, existing and removed data. - Common scale types include linear, log, quantize and quantile for quantitative data, and

1. D3 WORKSHOP

2. WEB STANDARDS
D3 provides transformation;
no new representation.

3. MAPPING DATA TO ELEMENTS
Visualisation requires visual encoding:
mapping data to elements.

4. NOTHING NEW
D3 refers to
Data-Driven Documents
W3C Document Object Model.

5. D3 = STANDARDS
Learning D3 is largely learning web standards

6. 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/

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

8. 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

9. 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>

10. SVG != HTML

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

12. 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!

13. 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/

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

15. STARTING WITH D3

16. 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

17. DEVELOPER TOOLS

18. DASH
latest version

20. 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

21. SELECTORS

22. 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"

23. SELECTORS
Javascript
dcmn.urSlcoAl"r,cd"
ouetqeyeetrl(pe oe)
jQuery
$'r,cd'
(pe oe)
D3
d.eetl(pe cd"
3slcAl"r, oe)

24. 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)

25. 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)

26. 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";

27. 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";

28. DATA

29. DATA ARE ARRAYS
Selections are arrays
Data are arrays
Coincidence?

30. 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
];

31. 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.

32. .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.

33. 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.

34. 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.

35. ENTER, UPDATE & EXIT
Thinking with Joins

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

37. 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, .)

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

39. 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, .)

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

41. 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, .)

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

43. ENTER + UPDATE
vrcrl =sgslcAl"ice)
a ice v.eetl(crl"
.aadt)
dt(aa;
crl.xt)rmv(;
iceei(.eoe)

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

45. / 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.

46. 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.

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

48. D3 AND ARRAY

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

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

51. SCALES

52. 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.

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

54. 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

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

56. 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];

57. INTERPOLATORS
Quantitative scales support multiple interpolators.

58. 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

59. OBJECT INTERPOLATION
just to mention

60. 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

61. 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

62. 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) / , , , ,

63. COLOR SCALE

64. 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

65. AXIS

66. AXIS
D3 provides convenient labeling for scales.

67. 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
}

69. 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).

70. TICK FORMATS
d3.format
d3.time.format

71. MARKS/SHAPES

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

73. 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.

74. SVG BASIC SHAPES
rect
circle
line
text

75. 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…>

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

77. 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;

78. D3.SVG.AREA
Check the docs

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

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

81. 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)

83. LAYOUTS

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

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

86. 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

87. D3.LAYOUT.TREEMAP

88. D3.LAYOUT.TREE

90. D3.LAYOUT.PACK

92. D3.LAYOUT.PARTITION

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

94. 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;

95. D3.LAYOUT.FORCE

96. D3.LAYOUT.BUNDLE

98. D3.GEOM.VORONOI

100. D3.LAYOUT.CHORD

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

103. NOW YOU KNOW D3JS

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

105. LET'S BUILD SOME STUFF