I am trying to draw a heatmap with d3 using data from a csv: this is what I have so far

Given a csv file:

row,col,score

0,0,0.5

0,1,0.7

1,0,0.2

1,1,0.4

I have an svg and code as follows:

<svg id=heatmap-canvas style=height:200px></svg>



<script>

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);

                 })



})

</script>

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

Any help would be appreciated