title: Drawing heatmap with d3
body: <p>I am trying to draw a heatmap with d3 using data from a csv: this is what I have so far</p>
  
  <p>Given a csv file:</p>
  
  <pre><code>row,col,score
  0,0,0.5
  0,1,0.7
  1,0,0.2
  1,1,0.4
  </code></pre>
  
  <p>I have an svg and code as follows:</p>
  
  <pre><code>&lt;svg id="heatmap-canvas" style="height:200px"&gt;&lt;/svg&gt;
  
  &lt;script&gt;
  d3.csv("sgadata.csv", function(data) {
      data.forEach(function(d) { 
      d.score = +d.score;
      d.row = +d.row;
  d.col = +d.col;
  });
  //height of each row in the heatmap
  //width of each column in the heatmap
  var h = gridSize;
  var w = gridSize;
  var rectPadding = 60;
  
  $('#heatmap-canvas').empty();
  
  var mySVG = d3.select("#heatmap-canvas")
  .style('top',0)
  .style('left',0);
  
  var colorScale = d3.scale.linear()
  .domain([-1, 0, 1])
  .range([colorLow, colorMed, colorHigh]);
  
  rowNest = d3.nest()
  .key(function(d) { return d.row; })
  .key(function(d) { return d.col; });
  
  dataByRows = rowNest.entries(data);
  mySVG.forEach(function(){
  var heatmapRow = mySVG.selectAll(".heatmap")
      .data(dataByRows, function(d) { return d.key; })
      .enter().append("g");
  
      //For each row, generate rects based on columns - this is where I get stuck
      heatmapRow.forEach(function(){
      var heatmapRects = heatmapRow
          .selectAll(".rect")
          .data(function(d) {return d.score;})
          .enter().append("svg:rect")
                      .attr('width',w)
          .attr('height',h)
          .attr('x', function(d) {return (d.row * w) + rectPadding;})
          .attr('y', function(d) {return (d.col * h) + rectPadding;})
          .style('fill',function(d) {
              if(d.score == NaN){return colorNA;}
              return colorScale(d.score);
                   })
  
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>My problem is with the nesting. My nesting is based on 2 keys, row first (used to generate the rows) then for each row, there are multiple nested keys for the columns and each of these contain my score. 
  I am not sure how to proceed i.e. loop over columns and add rectangles with the colors</p>
  
  <p>Any help would be appreciated</p>