Getting Real
with
D3
Data Driven Documents and Node
Slide 2
Slide 2 text
What is it?
Slide 3
Slide 3 text
A charts library!
Slide 4
Slide 4 text
WRONG
A charts library!
Slide 5
Slide 5 text
What it isn't
● Not a plotting or charts library
○ Not a Flot
○ Not a Google Charts
○ At least not out of the box
● Not a framework for drawing
○ Not a Raphael.js
○ Not a KineticJS
○ Not a DSL for Canvas or SVG
Slide 6
Slide 6 text
...okay that is
Lame
Slide 7
Slide 7 text
...so what is it?
Slide 8
Slide 8 text
d • three
noun
1. a library for mapping data
to a document object
model
Slide 9
Slide 9 text
d • three
noun
1. a library for mapping data
to a document object
model
Slide 10
Slide 10 text
What does that mean?
● Gives us a nice way to take a data set and
bind it to DOM elements
● Data
○ Any set of data
■ [4,3,2,3,4]
■ [{"name":"Nate"}, {"name":"Mike"}]
● DOM Elements
○ Everything from spans to svg elements
Slide 11
Slide 11 text
What it does well
● Mapping data to visual elements
● Handles changing datasets
○ A surprising PITA without D3
● and other nasty parts of data visualization
○ Scaling, Animation, Data Set Operations
● It is future proof!
○ Not a wrapper library (Raphael)
○ Relies on standards
Slide 12
Slide 12 text
Covering the
Basics
Slide 13
Slide 13 text
the basics
1. selecting
2. updating
the
DOM 3. binding
4. stages
enter + exit
5. transitions
Slide 14
Slide 14 text
1. Select ing
● Clean, familiar way to grab DOM elements
● Very similar to jQuery
○ Sizzle under the hood
● Allows chaining
var bs = d3
.select("#foo")
.selectAll("div.buckets");
Slide 15
Slide 15 text
2. Manipulate the DOM
● Clean way to update DOM
● Set attributes, style, text, etc.
● Use functions to compute dynamic values!
bs.style("color", "#4CCF76")
.attr("href", "#")
.text(function(d, i) {
return "Link " + i;
});
Slide 16
Slide 16 text
ex1.html
DEMO TIME
Slide 17
Slide 17 text
...so it's a
jQuery
Wannabe
Slide 18
Slide 18 text
Where's the
beef?
Slide 19
Slide 19 text
.data()
Slide 20
Slide 20 text
3. Binding
● Bind data to a selection of DOM elements
● Once bound we can use this data to update
each individual DOM element
● Recall functions as values...
var bs = d3.selectAll("div.buckets");
bs.data([3,2,1]);
bs.text(function(d) {return d;});
Slide 21
Slide 21 text
ex2.html
DEMO TIME
Slide 22
Slide 22 text
Data
DRIVEN
Documents!
Slide 23
Slide 23 text
But what if we don't have
enough DOM elements?
Slide 24
Slide 24 text
What if we have too many
DOM elements?
Slide 25
Slide 25 text
.enter()
and
.exit()
Slide 26
Slide 26 text
4. Stages: Enter and Exit
● Allow us to handle when
○ We don't have enough elements
○ We have too many elements
Slide 27
Slide 27 text
Enter
● When we don't have enough elements,
typically we want to add more
● We can accomplish this with .append()
bs.enter().append("div");
Slide 28
Slide 28 text
Exit
● When we have too many DOM elements,
typically we want to remove them
● We can accomplish this with .remove()
bs.exit().remove();
Slide 29
Slide 29 text
ex2.html
RETURN TO
DEMO TIME
Slide 30
Slide 30 text
great... but I want
Charts!
Slide 31
Slide 31 text
D3 works with SVG just as
nicely as it does with any
other DOM elements
Slide 32
Slide 32 text
ex3.html
DEMO TIME
WITH CHARTS
Slide 33
Slide 33 text
okay... but that chart's
Boring!
Slide 34
Slide 34 text
Let's make it move.
Slide 35
Slide 35 text
.transition()
Slide 36
Slide 36 text
5. Transitions
● D3 also handles transitions!
● Animate transition between two states
● Handles the math for us
bs.transition().
.duration(1000)
.attr("color","green");
Slide 37
Slide 37 text
ex4.html
DEMO TIME
Slide 38
Slide 38 text
cool... but when do we
Get Real?
Slide 39
Slide 39 text
Bringing node in
● Node
○ Awesome for real time stuff
○ Socket.io: everyone's favorite package
● D3
○ Handles changing datasets very nicely
Slide 40
Slide 40 text
http://localhost/ex4.html
http://localhost/vote.html
ONE LAST
DEMO TIME
Slide 41
Slide 41 text
Thanks!
● Nate Good
○ Director of Engineering @ShowClix
○ @nategood
○ http://nategood.com
● Example Code
○ http://github.com/nategood/d3-intro