A CodePen by James Dean. Sample D3 Stacked Area Chart - attempting to refactor live example using csvParse

index.html

<div id="chart"></div>

script.js

var dataCSV = "key,value,date\n" +
        "Group1,37,20120423\n" +
        "Group2,12,20120423\n" +
        "Group3,46,20120423\n" +
        "Group1,32,20120424\n" +
        "Group2,19,20120424\n" +
        "Group3,42,20120424\n" +
        "Group1,45,20120425\n" +
        "Group2,16,20120425\n" +
        "Group3,44,20120425\n" +
        "Group1,24,20120426\n" +
        "Group2,52,20120426\n" +
        "Group3,64,20120426\n",
    dataArray = d3.csv.parse( dataCSV );

// window.alert( dataArray[ 0 ].key + " : " +  dataArray[ 0 ].value + " : " +  dataArray[ 0 ].date );

var w = 700, h = 600,
    margin = {top: 10, right: 15, bottom: 25, left: 30},
    height = h - margin.top - margin.bottom,
    width  = w - margin.left - margin.right,
    format = d3.time.format("%Y%m%d").parse,
    xScale = d3.time.scale().range([0, width]),
//    xAxis  = d3.svg.axis().scale(xScale).orient("bottom").ticks( d3.time.days ),
    xAxis  = d3.svg.axis().scale(xScale).orient("bottom").ticks( d3.time.days ).tickFormat( d3.time.format('%b %d %Y') ),
    yScale = d3.scale.linear().range([height, 0]),
    yAxis  = d3.svg.axis().scale(yScale).orient("left");
    zScale = d3.scale.category20c(),
    stack  = d3.layout.stack()
      .offset("zero")
      .values(function(d) { return d.values; })
      .x(function(d) { return d.date; })
      .y(function(d) { return d.value; }),
    nest   = d3.nest().key(function(d) { return d.key; }),
    area = d3.svg.area()
      .interpolate("cardinal")
      .x(function(d) { return xScale(d.date); })
      .y0(function(d) { return yScale(d.y0); })
      .y1(function(d) { return yScale(d.y0 + d.y); }),
    svg = d3.select("#chart").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

(function(){
  
  for ( var x = 0, len = dataArray.length; x < len; x++ ) {
    var d = dataArray[ x ];
    
// window.alert( d3.time.format( '%Y%m%d' ).parse( d.date ) + ' : ' + format( d.date ) );
    
    d.date = format( d.date );
    d.value = +d.value;
    
  }
  
  var layers = stack( nest.entries( dataArray ) );
  xScale.domain(d3.extent(dataArray, function(d) { return d.date; }));
  yScale.domain([0, d3.max(dataArray, function(d) { return d.y0 + d.y; })]);

  svg.selectAll(".layer")
      .data(layers)
      .enter().append("path")  
      .attr("class", "layer")
      .attr("d", function(d) { return area(d.values); })
      .style("fill", function(d, i) { return zScale(i); });

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
})()

style.css

body {
  font: 10px sans-serif;
}

#chart{
  border: 1px dashed darkblue;
  width: 700px;
  height: 600px;
}

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}