D3 & SVGJason Madsen
$ whoami
@jason_madsen
What is D3?
JS library for manipulating documents based on data. D3
helps you bring data to life using HTML, SVG and CSS.
...
Examples
http://bost.ocks.org/mike/uberdata/
http://hn.metamx.com/
http://bl.ocks.org/tjdecke/5558084
http://bl.ocks.org/m...
What is it doing?
Create and bind data to DOM elements
Add, remove data, update DOM w/transitions
Map domain data to displ...
D3 and Me
Compatibility
http://caniuse.com/svg
Compatibility
http://caniuse.com/svg
"You'll need a modern browser to use SVG and
CSS3 Transitions. D3 is not a compatibil...
Getting Started
https://github.com/knomedia/utahjs_blank_d3
Creating SVG
svg	
  =	
  d3.select("#chart").append("svg")
.selectAll(selector)
.select(selector)
$foo.find(".bar")
.append(element)
add a child tag
.attr(prop [,value])
setter / getter for attribute values
lots `o chaining
svg	
  =	
  d3.select("#chart").append("svg")
	
  	
  .attr("width",	
  w)
	
  	
  .attr("height",	
  h);...
Margin Conventions
http://bl.ocks.org/mbostock/3019563
.data(array)
bind data to the selection
Joins
separate into sections: existing, enter, exit
http://mbostock.github.io/d3/tutorial/circle.html
http://bost.ocks.org...
.exit()
selection of no longer needed elements
.enter()selection of new elements
generally gets an `append()`
generally ge...
.enter()selection of new elements
generally gets an `append()`
data	
  =	
  [50,	
  50,	
  50];
?
.enter()selection of new elements
generally gets an `append()`
data	
  =	
  [50,	
  50,	
  50];
element in enter selection
data	
  =	
  [50,	
  50];
.exit()
selection of no longer needed elements
generally gets a `remove()`
data	
  =	
  [50,	
  50];
element in exit selection
.exit()
selection of no longer needed elements
generally gets a `remov...
simple bars
svg.selectAll(".bars")
	
  	
  .data(dataset)
	
  	
  .enter().append("svg:rect")
	
  	
  	
  	
  .attr("class...
scales
yScale	
  =	
  d3.scale.linear()
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  .domain([	
  0,	
  d3.max(dataset)	
  ])
	...
bar height
.attr("width",	
  (w	
  /	
  dataset.length)	
  -­‐	
  3)
.attr("height",	
  function(d,i){	
  return	
  yScale...
scales for color
colorScale	
  =	
  d3.scale.category20c();
https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical...
transition
.transition()
	
  	
  .delay(	
  ms	
  )
	
  	
  .ease("cubic-­‐in-­‐out")
	
  	
  .duration(	
  ms	
  )
	
  	
...
transitions
.transition()
	
  	
  .delay(	
  function(d,i){	
  return	
  i	
  *	
  250	
  })
	
  	
  .ease("cubic-­‐in-­‐o...
axis
yAxis	
  =	
  d3.svg.axis()
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  .scale(yScale)
	
  	
  	
  	
  	
  	
  	
  	
  	
...
axis
Rethink height and y for bars.
Swap yScale range
.attr("height",	
  function(d,i){	
  return	
  h	
  -­‐	
  yScale(d)...
Plus lots more
Circles Arcs Lines Paths
Resources
http://bost.ocks.org/mike/
http://alignedleft.com/tutorials/d3/
http://www.jeromecukier.net/blog/2011/08/11/d3-s...
Thanks
@jason_madsen
knomedia
Upcoming SlideShare
Loading in...5
×

Utahjs D3

493

Published on

Getting started presentation on using D3

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
493
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Utahjs D3

  1. 1. D3 & SVGJason Madsen
  2. 2. $ whoami @jason_madsen
  3. 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. 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. 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. 6. D3 and Me
  7. 7. Compatibility http://caniuse.com/svg
  8. 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. 9. Getting Started https://github.com/knomedia/utahjs_blank_d3
  10. 10. Creating SVG svg  =  d3.select("#chart").append("svg")
  11. 11. .selectAll(selector) .select(selector) $foo.find(".bar")
  12. 12. .append(element) add a child tag
  13. 13. .attr(prop [,value]) setter / getter for attribute values
  14. 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. 15. Margin Conventions http://bl.ocks.org/mbostock/3019563
  16. 16. .data(array) bind data to the selection
  17. 17. Joins separate into sections: existing, enter, exit http://mbostock.github.io/d3/tutorial/circle.html http://bost.ocks.org/mike/join/
  18. 18. .exit() selection of no longer needed elements .enter()selection of new elements generally gets an `append()` generally gets a `remove()`
  19. 19. .enter()selection of new elements generally gets an `append()` data  =  [50,  50,  50]; ?
  20. 20. .enter()selection of new elements generally gets an `append()` data  =  [50,  50,  50]; element in enter selection
  21. 21. data  =  [50,  50]; .exit() selection of no longer needed elements generally gets a `remove()`
  22. 22. data  =  [50,  50]; element in exit selection .exit() selection of no longer needed elements generally gets a `remove()`
  23. 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. 24. scales yScale  =  d3.scale.linear()                    .domain([  0,  d3.max(dataset)  ])                    .range([  0,  h  ]); domain 890 range 5800
  25. 25. bar height .attr("width",  (w  /  dataset.length)  -­‐  3) .attr("height",  function(d,i){  return  yScale(d)})
  26. 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. 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. 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. 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. 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. 31. Plus lots more Circles Arcs Lines Paths
  32. 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. 33. Thanks @jason_madsen knomedia
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×