Utahjs D3

579
-1

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
579
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

×