function shapeData(data, index, title) {
  var series = d3.zip(
    data.map(d => d[index]),
    data.map(d => d[index + 1])
  );
  series.title = title;
  return series;
}


d3.text('mileage-versus-plan.csv').then(text => {
  var data = d3.csvParseRows(text, d => d.map(Number));
  var chartData = [
    shapeData(data, 0, 'sub 3:00 marathon'),
    shapeData(data, 2, 'sub 3:30 marathon'),
    shapeData(data, 4, 'sub 4:00 marathon'),
    shapeData(data, 6, 'sub 4:30 marathon')
  ];

  var upperLine = fc.seriesSvgLine()
      .crossValue((d, i) => i + 1)
      .mainValue(d => d[0]);

  var lowerLine = fc.seriesSvgLine()
      .crossValue((d, i) => i + 1)
      .mainValue(d => d[1]);

  var area = fc.seriesSvgArea()
      .crossValue((d, i) => i + 1)
      .mainValue(d => d[0])
      .baseValue(d => d[1]);

  var gridlines = fc.annotationSvgGridline()
    .yTicks(5);

  var multi = fc.seriesSvgMulti()
      .series([gridlines, area, upperLine, lowerLine]);

  var chart = fc.chartCartesian(
                d3.scaleLinear(),
                d3.scaleLinear()
              )
      .xDomain([0.5, data.length + 0.5])
      .yDomain([0, 65])
      .xLabel('Week')
      .yTicks(5)
      .chartLabel(d => d.title)
      .svgPlotArea(multi);

  d3.select('#chart')
      .selectAll('div')
      .data(chartData)
      .enter()
      .append('div')
      .attr('style', 'height: 200px')
      .call(chart);
});