A presentation I gave at RORO at Inspire9

1. d3 is cool
maps data to DOM
Sunday, 7 April 13

2. # jQuery-esque API
d3
.select("body")
.append("p")
.text("New paragraph!")
.attr("class", "yep")
.style("height", "10px")
Sunday, 7 April 13

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. maps data to DOM
Sunday, 7 April 13

5. svg is cool
DOM for vector graphics & text
Sunday, 7 April 13

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. 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. 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. # scales - d3's 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/left
Sunday, 7 April 13

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. 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. # 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. 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. 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. d3 is cool
Thanks!
http://alignedleft.com/tutorials/d3/
@markbrown4
Sunday, 7 April 13