It doesn't work the second time because you are operating on the .enter() selection, which will be empty the second time draw() is called because the elements exist already.

To fix this, move the declaration of row and col outside the draw() function. Inside the draw() function, only keep the code that actually changes. Something like

function draw(minval,maxval){
    var colorScale = d3.scale.linear()
         .domain([minval, maxval])
         .range([colorLow, colorHigh]);"fill", function(d) { return colorScale(d.value); });

Related Query