title: d3.js building a grid of rectangles
body: <p>I'm trying to build a grid of rectangles in d3.js.</p>
  
  <p>The grid is 7 rows (days in a week), and 24 columns (hours in a day).</p>
  
  <p>The following code only draws (row:column):
  day0:hour0,
  day1:hour1,
  day2:hour2,
  day3:hour3,
  day4:hour4,
  day5:hour5,
  day6:hour6,
  day7:hour7</p>
  
  <p><strong>Question:</strong> Any ideas why the following code wouldn't work?</p>
  
  <pre><code>/**
  *   calendarWeekHour    Setup a week-hour grid: 
  *                           7 Rows (days), 24 Columns (hours)
  *   @param id           div id tag starting with #
  *   @param width        width of the grid in pixels
  *   @param height       height of the grid in pixels
  *   @param square       true/false if you want the height to 
  *                           match the (calculated first) width
  */
  function calendarWeekHour(id, width, height, square)
  {
      var calData = randomData(width, height, square);
      var grid = d3.select(id).append("svg")
                      .attr("width", width)
                      .attr("height", height)
                      .attr("class", "chart");
  
          grid.selectAll("rect")
                .data(calData)
                  .enter().append("svg:rect")
                   .attr("x", function(d, i) { return d[i].x; })
                   .attr("y", function(d, i) { return d[i].y; })
                   .attr("width", function(d, i) { return d[i].width; })
                   .attr("height", function(d, i) { return d[i].height; })
                   .on('mouseover', function() {
                      d3.select(this)
                          .style('fill', '#0F0');
                   })
                   .on('mouseout', function() {
                      d3.select(this)
                          .style('fill', '#FFF');
                   })
                   .on('click', function() {
                      console.log(d3.select(this));
                   })
                   .style("fill", '#FFF')
                   .style("stroke", '#555');
  }
  
  ////////////////////////////////////////////////////////////////////////
  
  /**
  *   randomData()        returns an array: [
                                              [{id:value, ...}],
                                              [{id:value, ...}],
                                              [...],...,
                                              ];
                          ~ [
                              [hour1, hour2, hour3, ...],
                              [hour1, hour2, hour3, ...]
                            ]
  
  */
  function randomData(gridWidth, gridHeight, square)
  {
      var data = new Array();
      var gridItemWidth = gridWidth / 24;
      var gridItemHeight = (square) ? gridItemWidth : gridHeight / 7;
      var startX = gridItemWidth / 2;
      var startY = gridItemHeight / 2;
      var stepX = gridItemWidth;
      var stepY = gridItemHeight;
      var xpos = startX;
      var ypos = startY;
      var newValue = 0;
      var count = 0;
  
      for (var index_a = 0; index_a &lt; 7; index_a++)
      {
          data.push(new Array());
          for (var index_b = 0; index_b &lt; 24; index_b++)
          {
              newValue = Math.round(Math.random() * (100 - 1) + 1);
              data[index_a].push({ 
                                  time: index_b, 
                                  value: newValue,
                                  width: gridItemWidth,
                                  height: gridItemHeight,
                                  x: xpos,
                                  y: ypos,
                                  count: count
                              });
              xpos += stepX;
              count += 1;
          }
          xpos = startX;
          ypos += stepY;
      }
      return data;
  }
  </code></pre>