console.clear()

d3.select('html').selectAppend('div.tooltip')

d3.loadData('data.tsv', (err, res) => {
  data = res[0]

  var sel = d3.select('#graph').html('')
  var c = d3.conventions({parentSel: sel, height: 460})

  c.x.domain([-6, 6])
  c.y.domain([0, .5])

  var area = d3.area()
    .x(d => c.x(d.x))
    .y0(d => c.y(d.y))
    .y1(c.height)
    .curve(d3.curveBasis)

  var pathSel = c.svg.append('defs')
    .append('mask')
    .at({id: 'blue-mask'})
    .append('path')
    .at({
      d: area(data.filter(d => d.year == 1951)),
      fill: '#fff'
    })

  var start = -6
  var colors = [
    {fill: '#085B84', end: -3.00},
    {fill: '#73ACC6', end: -0.43},
    {fill: '#E5E5E5', end:  0.43},
    {fill: '#DB90BA', end:  3.00},
    {fill: '#C92E92', end:  6.00},
  ]
  colors.forEach(d => {
    d.start = start
    start = d.end
  })

  c.svg.appendMany(colors, 'rect')
    .at({
      fill: d => d.fill,
      x: d => c.x(d.start),
      width: d => c.x(d.end) - c.x(d.start),
      height: c.height,
      mask: 'url(#blue-mask)'
    })

  var yearSel = c.svg.append('text').text(1951)
    .at({fontSize: 30, x: 600, y: 100})

  var years = '1951 1983 1994 2005'.split(' ')
  var curIndex = 0

  if (window.histTimer) window.histTimer.stop()
  window.histTimer = d3.interval(() => {
    curIndex = ++curIndex % years.length
    var curYear = years[curIndex]

    pathSel.transition().duration(500)
      .at({d: area(data.filter(d => d.year == curYear))})

    var i = d3.interpolate(yearSel.text(), curYear)
    yearSel.transition().duration(500)
      .attrTween('year-text', () => {
        return t => yearSel.text(Math.round(i(t)))
      })
  }, 1000)
})