diff -r efd9c589177a -r c0b4a8b5a012 toolkit/javascript/d3/examples/stream/stack.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/stream/stack.js	Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,119 @@
+var n = 4, // number of layers
+    m = 64, // number of samples per layer
+    data = d3.layout.stack()(stream_layers(n, m, .1)),
+    color = d3.interpolateRgb("#aad", "#556");
+
+var p = 20,
+    w = 960,
+    h = 500 - .5 - p,
+    mx = m,
+    my = d3.max(data, function(d) {
+      return d3.max(d, function(d) {
+        return d.y0 + d.y;
+      });
+    }),
+    mz = d3.max(data, function(d) {
+      return d3.max(d, function(d) {
+        return d.y;
+      });
+    }),
+    x = function(d) { return d.x * w / mx; },
+    y0 = function(d) { return h - d.y0 * h / my; },
+    y1 = function(d) { return h - (d.y + d.y0) * h / my; },
+    y2 = function(d) { return d.y * h / mz; }; // or `my` to not rescale
+
+var vis = d3.select("#chart")
+  .append("svg:svg")
+    .attr("width", w)
+    .attr("height", h + p);
+
+var layers = vis.selectAll("g.layer")
+    .data(data)
+  .enter().append("svg:g")
+    .style("fill", function(d, i) { return color(i / (n - 1)); })
+    .attr("class", "layer");
+
+var bars = layers.selectAll("g.bar")
+    .data(function(d) { return d; })
+  .enter().append("svg:g")
+    .attr("class", "bar")
+    .attr("transform", function(d) { return "translate(" + x(d) + ",0)"; });
+
+bars.append("svg:rect")
+    .attr("width", x({x: .9}))
+    .attr("x", 0)
+    .attr("y", h)
+    .attr("height", 0)
+  .transition()
+    .delay(function(d, i) { return i * 10; })
+    .attr("y", y1)
+    .attr("height", function(d) { return y0(d) - y1(d); });
+
+var labels = vis.selectAll("text.label")
+    .data(data[0])
+  .enter().append("svg:text")
+    .attr("class", "label")
+    .attr("x", x)
+    .attr("y", h + 6)
+    .attr("dx", x({x: .45}))
+    .attr("dy", ".71em")
+    .attr("text-anchor", "middle")
+    .text(function(d, i) { return i; });
+
+vis.append("svg:line")
+    .attr("x1", 0)
+    .attr("x2", w - x({x: .1}))
+    .attr("y1", h)
+    .attr("y2", h);
+
+function transitionGroup() {
+  var group = d3.selectAll("#chart");
+
+  group.select("#group")
+      .attr("class", "first active");
+
+  group.select("#stack")
+      .attr("class", "last");
+
+  group.selectAll("g.layer rect")
+    .transition()
+      .duration(500)
+      .delay(function(d, i) { return (i % m) * 10; })
+      .attr("x", function(d, i) { return x({x: .9 * ~~(i / m) / n}); })
+      .attr("width", x({x: .9 / n}))
+      .each("end", transitionEnd);
+
+  function transitionEnd() {
+    d3.select(this)
+      .transition()
+        .duration(500)
+        .attr("y", function(d) { return h - y2(d); })
+        .attr("height", y2);
+  }
+}
+
+function transitionStack() {
+  var stack = d3.select("#chart");
+
+  stack.select("#group")
+      .attr("class", "first");
+
+  stack.select("#stack")
+      .attr("class", "last active");
+
+  stack.selectAll("g.layer rect")
+    .transition()
+      .duration(500)
+      .delay(function(d, i) { return (i % m) * 10; })
+      .attr("y", y1)
+      .attr("height", function(d) { return y0(d) - y1(d); })
+      .each("end", transitionEnd);
+
+  function transitionEnd() {
+    d3.select(this)
+      .transition()
+        .duration(500)
+        .attr("x", 0)
+        .attr("width", x({x: .9}));
+  }
+}