Database Reference
In-Depth Information
for this example. Next, the data is stacked using the stack layout, and the
maximum value calculated so that the scales may be obtained:
var stack = d3.layout.stack()
.offset("wiggle");
values = stack(values);
var max = 0;
for(i in values) {
var m = d3.max(values[i],function(d) { return d.y +
d.y0; });
if(m > max) max = m;
}
Next,thescalesforthex-axis,they-axisandthecolorrangeareconstructed.
An area path generator is used to render the output of the stack layout:
var x =
d3.scale.linear().domain([0,99]).range([0,width]);
var y =
d3.scale.linear().domain([0,max]).range([height,0]);
var color = d3.scale.linear().range(["#000","#ccc"]);
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
Finally, the shape generator and the layout data are applied to a path
selection to produce the final output implemented in dashboard/views/
d3_ex3.jade :
svg.selectAll("path").data(values)
.enter().append("path")
.attr("d",area)
.style("fill",function(d) { return
color(Math.random()); });
Search WWH ::




Custom Search