d3 is cool                     maps data to DOMSunday, 7 April 13
# jQuery-esque API            d3               .select("body")               .append("p")               .text("New paragra...
data = []            for num in [0..25]              data.push Math.random() * 30            d3.select("#bar") # get a wra...
maps data to DOMSunday, 7 April 13
svg is cool                     DOM for vector graphics & textSunday, 7 April 13
<svg height="200" width="700">              <rect x="0" y="0" width="500" height="50">              <circle cx="10" cy="10...
svg = d3.select("body")              .append("svg")              .attr("width", w)              .attr("height", h)        ...
data = [              [5, 20],              ...              [220, 88]            ]            svg = getSVG()            s...
# scales - d3s best feature            # functions that map an input range to an output range            xScale = d3.time....
readings = [{              read_at: 2013-03-27T00:04:00Z              wind_speed: 28,              gust: 34,              ...
speeds = []            gusts = []            for reading in data              x = xPoint reading              speeds.push ...
# arrow heads            arrowTransform = (reading)->              "translate(#{xPoint(reading)}, #{yPointBySpeed(reading)...
yPointBySwellPeriod = (reading)->              yScale(reading.swell_period)            swellLine = d3.svg.line()          ...
Lots of things I’m yet to play with..                                      Transitions                                Even...
d3 is cool                                  Thanks!                     http://alignedleft.com/tutorials/d3/              ...
Upcoming SlideShare
Loading in...5
×

d3 is cool

572

Published on

A presentation I gave at RORO at Inspire9

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

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

No notes for slide

Transcript of "d3 is cool"

  1. 1. d3 is cool maps data to DOMSunday, 7 April 13
  2. 2. # jQuery-esque API d3 .select("body") .append("p") .text("New paragraph!") .attr("class", "yep") .style("height", "10px")Sunday, 7 April 13
  3. 3. data = [] for num in [0..25] data.push Math.random() * 30 d3.select("#bar") # get a wrapper element .selectAll("div") # get an array .data(data) # get a data-bound array .enter() # creates new nodes .append("div") # adds to DOM .style("height", (d)-> d * 5 + "px")Sunday, 7 April 13
  4. 4. maps data to DOMSunday, 7 April 13
  5. 5. svg is cool DOM for vector graphics & textSunday, 7 April 13
  6. 6. <svg height="200" width="700"> <rect x="0" y="0" width="500" height="50"> <circle cx="10" cy="100" r="50" fill="red"> <text x="250" y="50">Easy-peasy</text> <path d="M 100 100 L 300 100 L 200 300 z" stroke-width="3"> <image> <font> # fek yeah </svg>Sunday, 7 April 13
  7. 7. svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h) circles = svg.selectAll() .data(dataset) .enter() .append("circle") .attr("cx", (d, i)-> i * 22) .attr("cy", 50) .attr("r", (d)-> d / 2) .attr("fill", (d)-> "rgb(" + Math.floor(d * 6) + ",0,150)")Sunday, 7 April 13
  8. 8. data = [ [5, 20], ... [220, 88] ] svg = getSVG() svg.selectAll() .data(data) .enter() .append("circle") .attr("cx", (d)-> d[0]) .attr("cy", (d)-> d[1]) .attr("r", 4)Sunday, 7 April 13
  9. 9. # scales - d3s best feature # functions that map an input range to an output range xScale = d3.time.scale() .domain([xMin, xMax]) .range([0, w]); yScale = d3.scale.linear() .domain([yMin, yMax]) .range([h, 0]); # y output reversed because elements are positioned top/leftSunday, 7 April 13
  10. 10. readings = [{ read_at: 2013-03-27T00:04:00Z wind_speed: 28, gust: 34, wind_direction: 287.3 }...] xPoint = (reading)-> xScale(new Date(reading.read_at)) yPointBySpeed = (reading)-> yScale(reading.wind_speed) yPointByGust = (reading)-> yScale(reading.gust) speedLine = d3.svg.line() .x(xPoint) .y(yPointBySpeed) # dark blue line svg.append("svg:path") .attr("d", speedLine(readings)) .attr("stroke-width", 2) .attr("stroke", "#04C8FF") .attr("fill", "none")Sunday, 7 April 13
  11. 11. speeds = [] gusts = [] for reading in data x = xPoint reading speeds.push [x, yPointBySpeed(reading)] gusts.push [x, yPointByGust(reading)] # light blue area # array of speed(x,y) followed by array of gust(x,y) reversed svg.selectAll("path.area") .data([speeds.concat(gusts.reverse())]) .enter() .append("path") .attr("fill", "#04C8FF") .attr("fill-opacity", .2) .attr("d", d3.svg.area())Sunday, 7 April 13
  12. 12. # arrow heads arrowTransform = (reading)-> "translate(#{xPoint(reading)}, #{yPointBySpeed(reading)}), rotate(#{reading.wind_direction})" svg.selectAll("polygon") .data(data) .enter() .append("polygon") .attr("transform", arrowTransform) .attr("points", "0,-7.8 -5.1,7.8 0,5.4 5.1,7.8") .attr("stroke-width", 1) .attr("stroke", "#fff") .attr("fill", "#04C8FF")Sunday, 7 April 13
  13. 13. yPointBySwellPeriod = (reading)-> yScale(reading.swell_period) swellLine = d3.svg.line() .x(xPoint) .y(yPointBySwellPeriod) .interpolate("cardinal") # Many ways for svg paths to be drawn around the points svg.append("svg:path") .attr("d", swellLine(data)) .attr("stroke-width", 2) .attr("stroke", "#28d7bd") .attr("fill", "none")Sunday, 7 April 13
  14. 14. Lots of things I’m yet to play with.. Transitions Events - mouse, touches Ajax Colors Axes Other scale types Other shapes Time Intervals Cluster, Force, Hierarchy, Histogram, Pack, Partition, Pie, Stack, Tree, Treemap, Geography, Projections, Zoom etc..Sunday, 7 April 13
  15. 15. d3 is cool Thanks! http://alignedleft.com/tutorials/d3/ @markbrown4Sunday, 7 April 13
  1. A particular slide catching your eye?

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

×