Running transitions and animations with area graphs in D3.JS

Question

I want the region graph to draw itself at the beginning of the program from left to right. I already have one line in my graph that does this, but I can’t get the area under the line to animate correctly, or “draw” myself when the page first loads. This is currently what I have for my area.

var area = d3.svg.area()
    .x(function(d) {return xScale(d.date); })
    .y0(line_chart_height)
    .y1(function(d) {return yScale(d.close); });

line_chart.append("path")
    .datum(data)
    .attr("class", "area")
    .attr("d", area)

I can get the area there well and draw a line perfectly, but I cannot make it so that the first time the page is loaded, the area essentially "draws" itself from left to right, like the line in this example, EXCEPT from left to right, and not from right to left.

Any help is appreciated, I tried using the following and it did not work for me.

.datum(data)
.transition().duration(2500)
.attr("d", area)

Thanks in advance Sam

Answer 1

svg clipPath, :

svg.append("clipPath")
    .attr("id", "rectClip")
  .append("rect")
    .attr("width", 0)
    .attr("height", height);

, :

d3.select("#rectClip rect")
  .transition().duration(3000)
    .attr("width", width);

jsfiddle: http://jsfiddle.net/qAHC2/688/.