This document provides an overview of D3, a JavaScript library for manipulating documents based on data. It discusses what D3 is, provides examples of D3 visualizations, and covers key D3 concepts like selecting elements, binding data, scales, transitions, and axes. The document also includes links to resources for learning more about 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