Utahjs D3
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
723
On Slideshare
720
From Embeds
3
Number of Embeds
1

Actions

Shares
Downloads
19
Comments
0
Likes
3

Embeds 3

https://twitter.com 3

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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