console.clear()
var sel = d3.select('body').html('')

var c = d3.conventions({sel, margin: {left: 40, right: 20, top: 20, bottom: 20}, height: 1076, totalWidth: 960, layers: 'sc'})
var {x, y, layers: [svg, ctx]} = c
    
var colorValue = d3.scaleLinear()
  .domain([3, 5, -100, -300, -500, -1000])
  .range(['#fff', "#fee0b6", "#fdb863", "#e08214", "#b35806"])

var colorVisits = d3.scaleLinear()
  .domain([1, 20, 80, 160])
  .range(["#d8daeb","#b2abd2","#8073ac","#542788"])

var totalSteps = 29629538
var maxStep = Math.floor(29629538/c.totalWidth)*c.totalWidth
var stepSize = Math.floor(maxStep/c.totalWidth)
var i = 0
var tSteps = 0

d3.text('input.txt', text => {
  var rows = text.split('\n').map(d => +d)

  x.domain([0, maxStep])
  y.domain([rows.length, 0])

  d3.drawAxis(c)

  d3.range(0, maxStep, stepSize).forEach((curStep) => {

    var iVals = {}
    var steps = 0, v
    while (steps < stepSize){
      v = rows[i]
      v >= 3 ? rows[i]-- : rows[i]++
      i += v
      steps++ 
      tSteps++

      iVals[i] ? iVals[i]++ : iVals[i] = 1
    }


    d3.entries(iVals).forEach(d => {
      ctx.beginPath()
      ctx.fillStyle = colorVisits(d.value)
      ctx.rect(c.x(curStep), c.y(d.key), 1, 1)
      ctx.fill()
    })

    rows.forEach((d, i) =>{
      if (d > 0) return
      ctx.beginPath()
      ctx.fillStyle = colorValue(d)
      ctx.rect(c.x(curStep), c.y(i), 1, 1)
      ctx.fill()
    })



  })

})