title: d3: how to visualize a simple 2D matrix?
body: <p>I'm stuck at trying to bind two-dimensional data in d3. I want to display a matrix of green squares. I'm building a matrix like this: </p>
  
  <pre><code>var size = 10;
  dataset = [];
  for(var y = 0; y&lt;size; y++){
      var tempData = [size];
      for(var x = 0; x&lt;size; x++){
          tempData[x] = 5;
      };
      dataset.push(tempData);
  };
  </code></pre>
  
  <p>I'm not sure how to bind the data correctly. I sort of understand Mike Bostock's <a href="http://bost.ocks.org/mike/nest/" rel="nofollow">tutorial on nested selections</a>, but he's binding a matrix of fixed size to already existing elements. How would I use <code>enter()</code> to create new rectangles? This is how I tried to apply the tutorial's advice to first bind the outer, then the inner arrays.. not surprised that it doesn't work but I also don't know where to go from here..</p>
  
  <pre><code>svg.selectAll("rect")
     .data(dataset)
     .selectAll("rect")
     .data(function (d,i) {return d;})
     .enter()
     .append("rect")
     .attr("x", function(d,i){
              return i*20})
     .attr("y", function(d,i){
              return i*20;})
     .attr("height", 15)
     .attr("width", 15)
     .attr("fill", "green");
  </code></pre>