title: How to use d3.js to animate a timeseries area graph (jsfiddle demo works, but looks weird )
body: <p>I am using the d3.js to emulate a timeseries area graph on the temperature, for every second, the temperature array will shift the oldest value and push a newest value, and then render the graph with the temperature array. </p>
  
  <p>the online demo is shown here.
   <a href="http://jsfiddle.net/qHUU7/" rel="nofollow">http://jsfiddle.net/qHUU7/</a></p>
  
  <p>the online demo works that it updates the graph with transition, but if you looks at the animation closely, it is wield.</p>
  
  <p>I want the timerseries graph to move the area shape from right to left on the x axis, much like <a href="http://square.github.io/cubism/" rel="nofollow">http://square.github.io/cubism/</a>, but my demo doesn't move the graph from right to left, but just update each value in the temperature value vertically. </p>
  
  <p>I know the reason is because my code just render all the values each time. In order to move the area graph, I should use attr("transform", function(d){}), but I still don't figure out how to .</p>
  
  <p>The following is my existing code</p>
  
  <pre><code>var colors = [  "#CDFADB","#75B8C1","#DD8BB9","#BA97C1","#ff6600"];
  var randomcolors = d3.scale.category20();
  
  var data2 = [ {v:3},{v:6},{v:7},{v:5},{v:2},{v:4},{v:8},{v:9},{v:1},{v:3},{v:8},{v:3},{v:6},{v:8},{v:1},{v:3},{v:8},{v:5},{v:2},{v:1}];
  
  var x = d3.scale.linear().domain([0, 10]).range([0, 300]);
  var y = d3.scale.linear().domain([  d3.min( data2, function(d){return d.v;  }) - 1,
                                      d3.max( data2, function(d){return d.v;  }) + 1               
                                   ])
                           .range([0, 70]);
  
  var y_position = 100;                        
  
  var graph = d3.select("#graph").append("svg").attr("width", "600px").attr("height", "300px");
  var statuslayer = graph.append("g").attr('id','statuslayer');
  
  var rooms = [{name:'aa'},{name:'bb'}]
  rooms.forEach(function(room){
      statuslayer.append('path')
                 .attr('class','room room-'+room.name);   
  })
  
  var inter = setInterval(function() {    
      var updateData2 = function(){
          data2.shift();
          data2.push( {v: Math.random(1+10)*10} ); 
          var index = 0;
          var area = d3.svg.area()
              .interpolate("basis")
              .x(function(d,i) { return x(i); })
              .y0(function(d,i) { return 70+ y_position*index; })
              .y1(function(d,i) { return y(d.v) + y_position*index ; });  
  
          rooms.forEach(function(room){           
              d3.select('.room-'+room.name)
                 .datum(data2)               
                 .style("fill",function(){ return colors[index] })
                 .transition().duration(400)
                 .ease("linear")
                 .attr("d", area);
              index +=1;
          })
      }
      updateData2();
  }, 1000); 
  </code></pre>