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
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
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