Getting started presentation on using D3

1. D3 & SVGJason Madsen

2. $ whoami
@jason_madsen

3. What is D3?
JS library for manipulating documents based on data. D3
helps you bring data to life using HTML, SVG and CSS.
@mbostock

4. Examples
http://bost.ocks.org/mike/uberdata/
http://hn.metamx.com/
http://bl.ocks.org/tjdecke/5558084
http://bl.ocks.org/mbostock/3883245
http://bl.ocks.org/mbostock/3884914

5. What is it doing?
Create and bind data to DOM elements
Add, remove data, update DOM w/transitions
Map domain data to display data (scales)

6. D3 and Me

7. Compatibility
http://caniuse.com/svg

8. Compatibility
http://caniuse.com/svg
"You'll need a modern browser to use SVG and
CSS3 Transitions. D3 is not a compatibility layer,
so if your browser doesn't support standards,
you're out of luck. Sorry!"**
https://github.com/shawnbot/aight

9. Getting Started
https://github.com/knomedia/utahjs_blank_d3

10. Creating SVG
svg
=
d3.select("#chart").append("svg")

11. .selectAll(selector)
.select(selector)
$foo.find(".bar")

12. .append(element)
add a child tag

13. .attr(prop [,value])
setter / getter for attribute values

14. lots `o chaining
svg
=
d3.select("#chart").append("svg")
.attr("width",
w)
.attr("height",
h);
svg
=
svg.append("g")
.attr("transform",
"translate(20,20)");

15. Margin Conventions
http://bl.ocks.org/mbostock/3019563

16. .data(array)
bind data to the selection

17. Joins
separate into sections: existing, enter, exit
http://mbostock.github.io/d3/tutorial/circle.html
http://bost.ocks.org/mike/join/

18. .exit()
selection of no longer needed elements
.enter()selection of new elements
generally gets an `append()`
generally gets a `remove()`

19. .enter()selection of new elements
generally gets an `append()`
data
=
[50,
50,
50];
?

20. .enter()selection of new elements
generally gets an `append()`
data
=
[50,
50,
50];
element in enter selection

21. data
=
[50,
50];
.exit()
selection of no longer needed elements
generally gets a `remove()`

22. data
=
[50,
50];
element in exit selection
.exit()
selection of no longer needed elements
generally gets a `remove()`

23. simple bars
svg.selectAll(".bars")
.data(dataset)
.enter().append("svg:rect")
.attr("class",
"bars
bright")
.attr("height",
function(d,i){
return
d})
.attr("width",
50)
.attr("y",
function(d,i){
return
h
-­‐
d})
.attr("x",
function(d,i){
return
i
*
100
})

24. scales
yScale
=
d3.scale.linear()
.domain([
0,
d3.max(dataset)
])
.range([
0,
h
]);
domain 890
range 5800

25. bar height
.attr("width",
(w
/
dataset.length)
-­‐
3)
.attr("height",
function(d,i){
return
yScale(d)})

26. scales for color
colorScale
=
d3.scale.category20c();
https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors
colorScale
=
d3.scale.linear()
.domain([0,
d3.max(dataset)])
.range(["blue",
"green"]);
or

27. transition
.transition()
.delay(
ms
)
.ease("cubic-­‐in-­‐out")
.duration(
ms
)
.attr(“prop”,
“value”);
** could also use CSS3 transitions
https://github.com/mbostock/d3/wiki/Transitions#wiki-d3_ease

28. transitions
.transition()
.delay(
function(d,i){
return
i
*
250
})
.ease("cubic-­‐in-­‐out")
.duration(
300
)
.attr("height",
function(d,i){
return
yScale(d)})
.attr("y",
function(d,i){
return
h
-­‐
yScale(d)})

29. axis
yAxis
=
d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5)
.tickSize(1);
function
drawAxis
()
{
svg.append("g")
.attr("class",
"axis")
.call(yAxis);
}

30. axis
Rethink height and y for bars.
Swap yScale range
.attr("height",
function(d,i){
return
h
-­‐
yScale(d)})
.attr("y",
function(d,i){
return
h
-­‐(h
-­‐
yScale(d))})
.range([
h,
0
]);

31. Plus lots more
Circles Arcs Lines Paths

32. Resources
http://bost.ocks.org/mike/
http://alignedleft.com/tutorials/d3/
http://www.jeromecukier.net/blog/2011/08/11/d3-scales-and-color/

33. Thanks
@jason_madsen
knomedia