JS Bin // source http://jsbin.com/qacowomako

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style type='text/css'>

</style>
</head>
<body>

var scale= d3.scale.ordinal()
             .rangeBands([0,800])
             .domain(d3.range(0,40));

var data = [];

for(i=0; i<40; i++){
  for(j=0; j<40; j++){
    data.push({x:i,y:j,on:'red'});
  }
}

var rects = svg.selectAll("rect").data(data);

function onClick(rect){
  if(rect.on == 'red'){
    rect.on = 'green';
  }
  else{
    rect.on = 'red';
  }
  console.log(rect);
  return rect;
}

rects.enter()
     .append("rect")
     .attr({
        x: function(d){return scale(d.x);},
        y: function(d){return scale(d.y);},
        fill: function(d){return d.on;},
        width: 20,
        height: 20,
        stroke: "white"
       })
     .style("border","1px")
     .on("mouseover",function(){d3.select(this).style('fill','green');});
</script>

var scale= d3.scale.ordinal()
             .rangeBands([0,800])
             .domain(d3.range(0,40));

var data = [];

for(i=0; i<40; i++){
  for(j=0; j<40; j++){
    data.push({x:i,y:j,on:'red'});
  }
}

var rects = svg.selectAll("rect").data(data);

function onClick(rect){
  if(rect.on == 'red'){
    rect.on = 'green';
  }
  else{
    rect.on = 'red';
  }
  console.log(rect);
  return rect;
}

</script></body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js