Accepted answer

This is possible and reasonable. There is a tutorial that approaches this at the D3 Nested Selection Tutorial which describes nesting of data.

Below is code that I hacked from your fiddle to demonstrate this.

var data = [        

var width = 625,
    height = 350;

var x = d3.scale.linear()
    .domain([0,data[0].length])   // Hack. Computing x-domain from 1st array
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0,d3.max(data[0])])  // Hack. Computing y-domain from 1st array
    .range([height, 0]);

var line = d3.svg.line()
    .x(function(d,i) { return x(i); })
    .y(function(d) { return y(d); });

var area = d3.svg.area()

var svg ="body").append("svg")
    .attr("width", width)
    .attr("height", height)

var lines = svg.selectAll( "g" )
  .data( data );  // The data here is two arrays

// for each array, create a 'g' line container
var aLineContainer = lines

    .attr("class", "area")
    .attr("d", area);*/

    .attr("class", "area")
    .attr("d", area);

    .attr("class", "line")
    .attr("d", line);*/

    .attr("class", "line")
    .attr("d", line);

    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);*/
// Access the nested data, which are values within the array here
  .data( function( d, i ) { return d; } )  // This is the nested data call
    .attr("class", "dot")
    .attr("cx", line.x())
    .attr("cy", line.y())
    .attr("r", 3.5);

One deficiency is that I computed the domain for the x and y axes off the first array, which is a hack, but not pertinent to your question exactly.

Sample of output image

Related Query