text: function gridData() {
  	var data = new Array();
  	var xpos = 1; //starting xpos and ypos at 1 so the stroke will show when we make the grid below
  	var ypos = 1;
  	var width = 10;
  	var height = 10;
  	var click = 0;
  
  
  	for (var row = 0; row < 90; row++) {
  		data.push( new Array() );
  
  		for (var column = 0; column < 45; column++) {
  			data[row].push({
  				x: xpos,
  				y: ypos,
  				width: width,
  				height: height,
  				click: click
  			})
  			// increment the x position. I.e. move it over by 50 (width variable)
  			xpos += width;
  		}
  		// reset the x position after a row is complete
  		xpos = 1;
  
  		ypos += height;
  	}
  	return data;
  }
  
  var gridData = gridData();
  console.log(gridData);
  
  var grid = d3.select("#grid")
  	.append("svg")
  	.attr("width","1410px")
  	.attr("height","300px");
  
  var row = grid.selectAll(".row")
  	.data(gridData)
  	.enter().append("g")
  	.attr("class", "row");
  
  var column = row.selectAll(".square")
  	.data(function(d) { return d; })
  	.enter().append("rect")
  	.attr("class","square")
  	.attr("x", function(d) { return d.x; })
  	.attr("y", function(d) { return d.y; })
  	.attr("width", function(d) { return d.width; })
  	.attr("height", function(d) { return d.height; })
  	.style("fill", "#fff")
  	.style("stroke", "#9A9EAB")
  	.on('mouseover', function(d) {
         d.click ++;
         if ((d.click)%4 == 0 ) { d3.select(this).style("fill","#9A9EAB"); }
  	   if ((d.click)%4 == 1 ) { d3.select(this).style("fill","#5D535E"); }
  	   if ((d.click)%4 == 2 ) { d3.select(this).style("fill","#EC96A4"); }
  	   if ((d.click)%4 == 3 ) { d3.select(this).style("fill","#DFE166"); }
      });
  