Drawing heatmap with d3

Question

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
<         


        

Answer 1

While you could used a subselect (see d3.js building a grid of rectangles) to work with nested data in d3 it's not really needed in this case. I put together an example using your data at http://jsfiddle.net/QWLkR/2/. This is the key part:

var heatMap = svg.selectAll(".heatmap")
    .data(data, function(d) { return d.col + ':' + d.row; })
  .enter().append("svg:rect")
    .attr("x", function(d) { return d.row * w; })
    .attr("y", function(d) { return d.col * h; })
    .attr("width", function(d) { return w; })
    .attr("height", function(d) { return h; })
    .style("fill", function(d) { return colorScale(d.score); });

Basically you can just use the row and col to calculate the correct position of the squares in your heatmap.