"use strict";

var svg = d3.select("body").append("svg")
  .attr("width", 1000)
  .attr("height", 400)

var data = d3.range(1, 30)
var colors = d3.scale.linear().domain([1, 15, 30]).range(["grey", "blue", "red"])


svg.on("mousemove", function(d) {
  return update(d3.mouse(this)[0])
})


function update(x) {
  var d = Math.ceil(x / 25);
  var k = svg.selectAll("rect").data(data.slice(d - 1, d + 5), function(m) {
    return m
  })

  k.attr("opacity", .5);

  k.enter().append("rect")
    .attr({
      width: 25,
      height: 100,
      y: 62
    })
    .attr("x", function(d) {
      return d * 25
    })
    .attr("fill", function(d) {
      return colors(d)
    })
    .attr("stroke", "white");

  k.exit().remove();
}