// Inspired by Lee Byron's test data generator. function bumpLayer(n, o) { function bump(a) { var x = 1 / (.1 + Math.random()), y = 2 * Math.random() - .5, z = 10 / (.1 + Math.random()); for (var i = 0; i < n; i++) { var w = (i / n - y) * z; a[i] += x * Math.exp(-w * w); } } var a = [], i; for (i = 0; i < n; ++i) a[i] = o + o * Math.random(); for (i = 0; i < 5; ++i) bump(a); return a.map(function(d, i) { return {x: i, y: d, w: Math.random()*100}; }); } var n = 4, // number of layers m = 5, // number of samples per layer stack = d3.layout.stack(), layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })), yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }), yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); }), wGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.w; })}); var margin = {top: 40, right: 10, bottom: 20, left: 10}, width = 600 - margin.left - margin.right, height = 600 - margin.top - margin.bottom; var x = d3.scale.ordinal() .domain(d3.range(m)) .rangeRoundBands([0, width], .08); var y = d3.scale.linear() .domain([0, yStackMax]) .range([height, 0]); var color = d3.scale.category10() .domain(d3.range(n - 1)) .range(["#EA8825", "#FCBC6E", "#FF5800", "#F58025"]) var xAxis = d3.svg.axis() .scale(x) .tickSize(0) .tickPadding(6) .orient("bottom"); var svg = d3.select("#chart").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var layer = svg.selectAll(".layer") .data(layers) .enter().append("g") .attr("class", "layer") .style("fill", function(d, i) { return color(i); }); var rect = layer.selectAll("rect") .data(function(d) { return d; }) .enter().append("rect") .attr("x", function(d) { return x(d.x) + (x.rangeBand() * (1 - d.w / wGroupMax)) / 2; }) // .attr("x", function(d) { return x(d.x); }) .attr("y", height) .attr("width", function(d) { return x.rangeBand() * d.w / wGroupMax; }) .attr("height", 0); rect.transition() .delay(function(d, i) { return i * 10; }) .attr("y", function(d) { return y(d.y0 + d.y); }) .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis);