var elevation = [
  7.508297771455666,
  9.023944997629208,
  -74.65599810336653,
  -51.119487908961595,
  -6.220957799905168,
  -0.18681839734471314,
  -5.55049786628734,
  -4.893551446183025,
  14.870554765291608,
  -9.7674253200569,
  -7.170697012802276,
  10.026078710289237,
  24.510431484115696,
  -11.699383594120436,
  2.0303461356092933,
  -18.709103840682786,
  -3.96040777619725,
  11.117354196301564,
  21.820056899004268,
  -25.025130393551446,
  9.838786154575628,
  2.4772403982930298,
  10.820056899004268,
  2.3572783309625414,
  -7.381697486960645,
  7.175201517306781,
  1.4959696538643907 ];

var annotations = [
  {time: '3:00', mph: 8.7},
  {time: '3:30', mph: 7.5},
  {time: '4:00', mph: 6.5},
  {time: '4:30', mph: 5.8},
]

var bar = fc.seriesSvgBar()
    .crossValue(function(d, i) { return i; })
    .mainValue(function(d) { return d; })
    .barWidth(fc.seriesFractionalBarWidth(1.0))
    .decorate(function(sel) {
      sel.attr('fill', function(d) { return d < 0 ? '#fc8d59' : '#91cf60'; })
    });

var chart = fc.chartSvgCartesian(
              d3.scaleLinear(),
              d3.scaleLinear()
            )
    .xDomain([0, 26])
    .yDomain([-100, 100])
    .yOrient('left')
    .yTicks(2)
    .yLabel('Elevation Change (m)')
    .xLabel('Distance (miles)')
    .plotArea(bar);

d3.select('#elevation')
    .datum(elevation)
    .call(chart);

d3.text('splits.csv', function(text) {
  var splits = d3.csvParseRows(text, d => d.map(Number));

  var series = fc.seriesSvgLine()
      .crossValue(function(d, i) { return i; })
      .mainValue(function(d, i) { return 60 / (d / 60); })
      .curve(d3.curveCatmullRom.alpha(0.5));

  var annotation = fc.annotationSvgLine()
      .value(d => d.mph)
      .label(d => d.time);

  var multi = fc.seriesSvgMulti()
      .series(splits.map(function() { return series; }).concat(annotation))
      .mapping(function(data, index) { return data[index]; });

  var chart = fc.chartSvgCartesian(
                d3.scaleLinear(),
                d3.scaleLinear()
              )
      .xDomain([0, 26])
      .yDomain([3, 12])
      .yOrient('left')
      .yLabel('Speed (mph)')
      .chartLabel('London Marathon 2016 Pacing - 7,100 Strava Athletes')
      .plotArea(multi);

  d3.select('#chart')
      .datum(splits.concat([annotations]))
      .call(chart);
});