Update stack.js

stack.js

+var data=[{group:1,x:6,y:8},
+          {group:1,x:4,y:4},
+          {group:1,x:1,y:2},
+          {group:2,x:8,y:3},
+          {group:2,x:1,y:6},
+          {group:2,x:7,y:5},
+          {group:3,x:7,y:1},
+          {group:3,x:6,y:6},
+          {group:3,x:3,y:2}];
+
+var height = 600
+var width = 800
+
+var svg = d3.select("body")
+  .append("svg")
+  .attr("height", "100%")
+  .attr("width", "100%");
+
+var colours = ["#0000FF",
+              "#FF0000",
+              "#00FF00"];
+
+var line = d3.line()
+  .x(function(d, i) {  return d.x * 20;  })
+  .y(function(d, i) {  return d.y * 20;  })
+  .curve(d3.curveNatural);
+
+function tweenDash() {
+  var l = this.getTotalLength(),
+  i = d3.interpolateString("0," + l, l + "," + l);
+  return function(t) {  return i(t);  };
+}
+
+function transition(selection) {
+  selection.each(function() {
+    d3.select(this).transition()
+      .duration(5000)
+      .attrTween("stroke-dasharray", tweenDash)
+      .ease(d3.easeLinear);
+  })
+}
+
+var dataGroup = d3.nest()
+                  .key(function(d) {  return d.group; })
+                  .entries(data);
+
+dataGroup.forEach(function(d, i) {
+
+  var path = svg.append("path")
+                .attr("d", line(d.values))
+                .attr("stroke", colours[i])
+                .attr("stroke-width", 1)
+                .attr("fill", "none");
+
+  transition(d3.selectAll("path"))
+
+});