An Introduction to d3.js

Shirley Wu @ Illumio

What is d3.js?

d3.js = data-driven-documents

d3.js is not a data visualization library. It will not draw anything for you.

It is a tool to help you manipulate DOM elements. As such, we do the heavy-lifting, not vice versa.

So how do we use this tool?

Some delicious samples
Drought during *
Kindred Britain
Visualizing Algorithms
Conditional Probability
Markov Chains
Events in the Game of Thrones
d3 gangnam style

1We can use it to grab something on the screen

Grab one of the boxes (a "div").

2We can manipulate the things we grabbed.

Try giving the div(s) some text:

Now try appending a header (h4)
and giving it some text:

for more ways to manipulate (feel the power!)

3We can bind data to the things we grabbed.

The data has to be an array:

Now that we have the data, let's use it to manipulate the div:

4We can grab things that don't yet exist. (What sorcery!)

It's absolute witchcraft, so let's work through this together. We'll hold hands.

1
we tell d3 what we want:

2
we tell d3 what the data is:

3
and here's the magic:

5We can also rid of things we no longer need

6Now let's put them all together

7Let's bridge the gap: SVG!

Because let's face it - we're not going to be making anything remotely pretty with HTML.

circle
cx: x-coordinate of center
cy: y-coordinate of center
r: radius
rect
x: x-coordinate of top-left
y: y-coordinate of top-left
width
height
line
x1: starting x-coordinate
y1: starting y-coordinate
x2: ending x-coordinate
y2: ending y-coordinate
Illumio!
text
x: x-coordinate
y: y-coordinate
dx: x-coordinate offset
dy: y-coordinate offset
text-anchor: horizontal text alignment