Database Reference
In-Depth Information
domain set, taking advantage of D3's
clamp
option to restrict the output
range regardless of the input values:
function region(min,max) {
var y = d3.scale.linear()
.domain([min,max])
.range([height,0])
.clamp(true);
var area = d3.svg.area()
.x(function(d,i) { return x(i); })
.y0(height)
.y1(function(d,i) { return y(d.y); });
var path = g.append("g")
.append("path")
.data([data])
.attr("class","horizon");
return function() {
path.attr("d",area);
}
}
Note that each region actually maintains a pointer to the overall data so
there is no extra data maintenance. This next function simply divides the
domain into a number of regions. It is called with three regions over the
appropriate domain to produce the horizon chart:
function make(min,max,split) {
var regions = [];
var last = min;
var incr = (max-min)/split;
for(var i=0;i<split;i++) {
var to = last+incr;
regions.push(region(last,to));
last = to;
}
return regions;
}
var regions = make;
