Utahjs D3
Upcoming SlideShare
Loading in...5
×
 

Utahjs D3

on

  • 643 views

Getting started presentation on using D3

Getting started presentation on using D3

Statistics

Views

Total Views
643
Views on SlideShare
640
Embed Views
3

Actions

Likes
2
Downloads
19
Comments
0

1 Embed 3

https://twitter.com 3

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Utahjs D3 Utahjs D3 Presentation Transcript

  • 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. @mbostock View slide
  • 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 View slide
  • 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)
  • 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 compatibility layer, so if your browser doesn't support standards, you're out of luck. Sorry!"** https://github.com/shawnbot/aight
  • 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); svg  =  svg.append("g")    .attr("transform",  "translate(20,20)");
  • 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/mike/join/
  • .exit() selection of no longer needed elements .enter()selection of new elements generally gets an `append()` generally gets a `remove()`
  • .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 `remove()`
  • 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  })
  • scales yScale  =  d3.scale.linear()                    .domain([  0,  d3.max(dataset)  ])                    .range([  0,  h  ]); domain 890 range 5800
  • bar height .attr("width",  (w  /  dataset.length)  -­‐  3) .attr("height",  function(d,i){  return  yScale(d)})
  • 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
  • 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
  • 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)})
  • axis yAxis  =  d3.svg.axis()                    .scale(yScale)                    .orient("left")                    .ticks(5)                    .tickSize(1); function  drawAxis  ()  {    svg.append("g")        .attr("class",  "axis")        .call(yAxis); }
  • 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  ]);
  • 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-scales-and-color/
  • Thanks @jason_madsen knomedia