d3intro

Intro to D3.js

Shirley Wu (@shirleyxywu)

Data-Driven Documents

D3.js manipulates documents by binding data to them.

Selections

select selectAll

d3.select("tr")

body

d3.selectAll("tr")

body

under da hood

*dotted lines indicate parentNode

d3.select("tr")

d3.selectAll("tr")

d3.selectAll("tr").selectAll("td")

body

d3.selectAll("tr").style("color", "red")

body

data

datum data

d3.select("tr").datum([1, 2, 3])

body

tr [1, 2, 3]

d3.selectAll("tr").data([1, 2, 3])

body

tr 1

tr 2

tr 3

enter

update

exit

d3.selectAll("tr").data([1, 2, 3, 4, 5])

body

tr 1

tr 2

tr 3

But where's 4 and 5?

d3.selectAll("tr").data([1, 2, 3, 4, 5]).enter() d3.selectAll("tr").data([1, 2, 3, 4, 5]).enter().append("tr")

d3.selectAll("tr").data([4, 5]).exit() d3.selectAll("tr").data([4, 5]).enter().remove()

let's go through an example

Radial Reingold–Tilford Tree

some great resources

How Selections Work Three Little Circles

Intro to D3.js

sxywu

Intro to D3.js

0 10

d3intro

Intro to D3.js

Data-Driven Documents

Selections

under da hood

data

enter

update

exit

let's go through an example

some great resources

Intro to D3.js

sxywu

Intro to D3.js

0 10 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

d3intro

Intro to D3.js

Data-Driven Documents

Selections

under da hood

data

enter

update

exit

let's go through an example

some great resources

0 10