Hover_over_coloring_grid

inlet.js

var canvas = d3.select("svg");

var width = 500;
var height = 500;
var amount = 10;
var data = [];
var intervalW = width/amount;
var intervalH = height/amount;

for (i=0;i<amount;i++){
  for (j=0;j<amount;j++){
    data.push([i*intervalW,j*intervalH]);
  }
}

var canvas = canvas.attr("width",width)
.attr("height",height);

var g = canvas.append("g");

var rects = g.selectAll("rect")
.data(data)
.enter()
.append("rect")

rects
.attr("width",width/amount)
.attr("height",height/amount)
.attr("x",function(d){return d[0]})
.attr("y",function(d){return d[1]})
.attr("fill","#cee2f1")
.attr("stroke","grey")

rects.on("mouseover",function(){
  d3.select(this)
  .attr("fill","black");
})