Slide 1
Slide 1 text
@idangazit
HI THERE, I’M
DATA VISUALIZATION WITH D3.JS & WEB STANDARDS • HTML5FEST 2012
DATA
VISUALIZATION
with d3.js and web standards
Slide 2
Slide 2 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
djangoproject.com
Slide 3
Slide 3 text
@idangazit
HI THERE, I’M
HTTP://FLIC.KR/P/7EPN1B
Slide 4
Slide 4 text
@idangazit
HI THERE, I’M
HTTP://FLIC.KR/P/967DVR
Slide 5
Slide 5 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
VISUALIZATIONS
CHARTS
Slide 6
Slide 6 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
0
25
50
75
100
2007 2008 2009 2010
Apples Bananas
Slide 7
Slide 7 text
@idangazit
HI THERE, I’M
HTTP://NYTI.MS/WR1DHZ
Slide 8
Slide 8 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
Slide 9
Slide 9 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
©®™ Adobe
(please don’t sue me)
Slide 10
Slide 10 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
still widely used
actionscript
works in old browsers
doesn’t work on mobile
resource-intensive
FLASH
Slide 11
Slide 11 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
processing.org
processingjs.org
PROCESSING
Slide 12
Slide 12 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
// set the canvas size
size(300, 300);
// top, left, width height
rect(20, 20, 100, 100);
// set colors
stroke(255, 0, 0); // red
fill(0, 0, 255); // blue
// top, left, width height
rect(100, 100, 100, 100);
Slide 13
Slide 13 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
Slide 14
Slide 14 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
raphaeljs.com
RAPHAËL
Slide 15
Slide 15 text
@idangazit
HI THERE, I’M
HTTP://FLIC.KR/P/ASMPYK
Slide 16
Slide 16 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
now tell me about the new hotness
COOL STORY,
BRO!
Slide 17
Slide 17 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
d3js.org
D3
DATA-DRIVEN DOCUMENTS
Slide 18
Slide 18 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
VISUALIZATION
TOOLKIT
a true
Slide 19
Slide 19 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
DATA
onto
MEANINGFUL
VISUALS
map
Slide 20
Slide 20 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
DATA
onto
THE
DOM
map
Slide 21
Slide 21 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
VISUALIZATIONS
DRAWING
Slide 22
Slide 22 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
d3 supplies the annoying-to-write parts
CONVENIENCE
Slide 23
Slide 23 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
sometimes you don’t control the data
JSON
CSV, TSV
LOAD &
MANIPULATE
Slide 24
Slide 24 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
colors
dimensions
positions
…
every property.
INTERPOLATE
Slide 25
Slide 25 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
linear
logarithmic
quantile
ordinal
time
nice
SCALES
Slide 26
Slide 26 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
12.973 39.144
UGLY
Slide 27
Slide 27 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
12 40
NICE
Slide 28
Slide 28 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
// data = [Date, Date, …]
// get the natural range of the data
timeExtent = d3.extent(data);
// make a scale
x = d3.time.scale()
.rangeRound([0, width])
.domain(timeExtent);
// X position on timeline for a date
left = x(someDate);
Slide 29
Slide 29 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
RGB
HSL
HCL
L*a*b*
COLORSPACE
MATH
Slide 30
Slide 30 text
HSV V
HSL L
CIELAB L*
Images courtesy Wikipedia & Luc Viatour / www.Lucnix.be
Slide 31
Slide 31 text
http://en.wikipedia.org/wiki/HSL_color_space
HSL HSV
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
// data = [Number, Number, …]
// get the natural range of the data
natural = d3.extent(data);
// make a scale
colorscale = d3.scale.linear()
.domain(natural)
.interpolate(d3.interpolateLab)
.range(startColor, endColor);
// color for a number
color = colorScale(42);
Slide 35
Slide 35 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
NOT BAD
Slide 36
Slide 36 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
marrying data to the DOM
http://bost.ocks.org/mike/join/
DATA JOINS
Slide 37
Slide 37 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
for (i=0; i
Slide 38
Slide 38 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
for (i=0; i
Slide 39
Slide 39 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
// svg is the DOM root of our
// d3 visualization
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("r", 2.5);
Slide 40
Slide 40 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
there are no circles to select!?
BUT
Slide 41
Slide 41 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
D3 MAKES THE DOM LIKE THE DATA
Slide 42
Slide 42 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
data
ENTER
UPDATE
EXIT
DOM
Slide 43
Slide 43 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
// data JOIN circle nodes
circles = svg.selectAll("circle").data(data)
// 1. UPDATE
// 2. ENTER
// 3. ENTER+UPDATE
// 4. EXIT
Slide 44
Slide 44 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
// data JOIN circle nodes
circles = svg.selectAll("circle").data(data)
// 1. UPDATE
circles.attr("class", "update");
// 2. ENTER
circles.enter().append("circle")
.attr("class", "enter")
.attr("r", 0); // starting radius
Slide 45
Slide 45 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
// data JOIN circle nodes
circles = svg.selectAll("circle").data(data)
// 3. ENTER + UPDATE
// works on just-added nodes too
// vary the radius according to data
// d is the datum for each join.
circles.attr(“r”, function(d) {
return d.radius;
});
Slide 46
Slide 46 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
// data JOIN circle nodes
circles = svg.selectAll("circle").data(data)
// 4. EXIT
// remove nodes that aren’t in data anymore
circles.exit().remove();
Slide 47
Slide 47 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
fade-in
ANIMATION?
ENTER
transition
UPDATE
fade-out
EXIT
Slide 48
Slide 48 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
http://bl.ocks.org/3808218
EXAMPLES
Slide 49
Slide 49 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
Scalable Vector Graphics
SVG
Slide 50
Slide 50 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
IE9+
PAGEWEIGHT
HIGH-DPI (RETINA)
Slide 51
Slide 51 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
Slide 52
Slide 52 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
HTML
CSS
URL(../IMG/MY.SVG)
CSS
URL(../IMG/MY.SVG)
Slide 53
Slide 53 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
My Awesome SVG
...Wasn’t that awesome?
Slide 54
Slide 54 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
.special {
fill: red;
stroke: black;
stroke-width: 2px;
}
HTML
CSS
Slide 55
Slide 55 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
.special {
fill: red;
stroke: black;
stroke-width: 2px;
}
CSS
.special:hover {
fill: blue;
stroke: white;
stroke-width: 10px;
}
Slide 56
Slide 56 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
document.getElementByClassName(“special”);
HTML
JAVASCRIPT
Slide 57
Slide 57 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
JQUERY
$(".station[data-id=216]");
D3
d3.selectAll('.station[data-id="216"]');
Slide 58
Slide 58 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
… jQuery
SVG DOM != HTML DOM
Slide 59
Slide 59 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
$(".special").addClass("foo");
$(".special").attr("class", "foo");
d3.selectAll('.special').attr("class", "foo");
d3.selectAll('.special').classed("foo", true);
Slide 60
Slide 60 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
http://keith-wood.name/svg.html
JQUERY SVG
Slide 61
Slide 61 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
events
styling
properties
appending/removing from DOM
mostly, it Just Works™
RELAX
Slide 62
Slide 62 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
s/python/javascript/
IT’S JUST PYTHON!
Slide 63
Slide 63 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
Slide 64
Slide 64 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
Slide 65
Slide 65 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
github.com/idan/telostats
TELOSTATS.COM
YUVAL ADAM
@yuvadm
IDAN GAZIT
@idangazit
Slide 66
Slide 66 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
Slide 67
Slide 67 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
Slide 68
Slide 68 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
integrating D3-rendered layers into a map
mapbox.js
GEO
Slide 69
Slide 69 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
most visualizations still assume a
relatively fixed canvas
RESPONSIVE
Slide 70
Slide 70 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
it’s so easy to build neat stuff...
EXCITING
Slide 71
Slide 71 text
@idangazit
PEOPLE IN THE BACK HAVE A HARD TIME SEEING THIS AREA. HI THERE, I’M
gazit.me
@idangazit
github.com/idan
GO MAKE SOMETHING!
LONG
SHORT
CODE