unrolling line chart

_.md

[ Launch: unrolling line chart ] 9669689 by DeBraid

config.json

{"description":"unrolling line chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/xG1FJ5B.png"}

data.csv

inlet.js

var width = 583,
    height = 300;

var svg = d3.select('svg');
var points = 10; 

console.log(points);

data = d3.range(points).map(function(d) { return Math.random(); }) 

var x = d3.scale.linear().domain([0,points]).range([0,width]); 

var y = d3.scale.linear().range([height,0]);  

var myline = svg.append("path")
      .attr({"d": line(data,0), "class": "line" })
      .style({"fill": "none", "stroke":"steelblue" });

function roll (myline, k) {
  if (k < points) 
  {
      myline.transition().ease("slow")
        .attr("d", line(data, k))
        .each("end", function() { roll(myline, k+1 ); } );
  }
}

function line (data, k) {
  
  data = data.map(function(d,i) {
    if (i>k) {
      return [ k, data[k] ];
    } else {
      return [ i, d ];
    }
  });

  
  
  return d3.svg.line()
  			.x(function(d) {return x(d[0]);})
  			.y(function(d) {return y(d[1]);})(data);
} 

roll(myline,0);  

style.css

.line {
	stroke: red;
    fill: red;
}