Your SlideShare is downloading. ×
0
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Utahjs D3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Utahjs D3

481

Published on

Getting started presentation on using D3

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
481
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
2
Embeds 0
No embeds

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

×