Having Trouble with Heatmap

[Eric]

I am trying to use a heatmap to show a discrete probability distribution of variables X and Y then show how it changes when I filter on another variable Z, which is represented in another chart.   

When I filter on values of Z, the chart renders correctly and the color scheme appears to be correct. But when I use a tooltip to show the underlying data in the heatmap's cells, the values are not different from the original, unfiltered data. So basically, right color, wrong data. 

Any advice?

d3.csv("csvfile", function (data) {

    var ndx = crossfilter(data);

    var all = ndx.groupAll(); 

    xyDimension = ndx.dimension(function(d) { return [+d.x, +d.y]; })

    xyGroup = xyDimension.group().reduceCount();

    

   

    var zDimension = ndx.dimension(function (d) { return d.z; });

    var zGroup = zDimension.group().reduceCount()

    

    var heatColorMapping = function(d) {

            return d3.scale.linear().domain([0,1]).range(["#ffffff", "#000000"])(d);

    };

    heatColorMapping.domain = function() {

        return [0,1];

    };

    heatmapChart

        .width(600)

        .height(800)

        .dimension(xyDimension)

        .group(xyGroup)

        .keyAccessor(function(d) { return +d.key[0]; })

        .valueAccessor(function(d) { return +d.key[1]; })

        .colorAccessor(function(d) {return +d.value/(all.value()); }) //CORRECT VALUE BETWEEN [0,1] WHICH DETERMINES COLOR

        .title(function(d) {return 'Value ' + d.value + '\nTotal ' + all.value()}) //INCORRECT VALUES, DIFFERENT THAN THOSE ABOVE 

        .colors(heatColorMapping)

        .calculateColorDomain();

    ...Also include a row chart of dimension Z

    dc.renderAll();

});

Also, two other things: 

- Is there a simple way to show labels on the axes of the heatmap?

- Is there any built-in functionality of allowing elastic axes?

Thanks so much. 

[Jacob Rideout]

> When I filter on values of Z, the chart renders correctly and the color scheme appears to be correct. But when I use a tooltip to show the underlying data in the heatmap's cells, the values are not different from the original, unfiltered data. So basically, right color, wrong data. 

This is a bug. Looking at the code, it seems we create titles once, but don't update them as the data is filtered.

> Is there a simple way to show labels on the axes of the heatmap?

.xAxisLabel, .yAxisLabel

> Is there any built-in functionality of allowing elastic axes?

Howso? Do you mean dynamically size the heatmap boxes?

[Allan Vieira]

Hello.

I went through the same problem, and I ended up solving the following way:

heatMapChart.on("postRedraw", function(chart, filter){chart.render();});

\-/

[mohamed imran]

Hello Allan,

I was looking for this solution from the last 4 hours but couldn't. But finally found your post and resolved the issue. thank you!

[Gordon Woodhull]

You could also try upgrading to dc.js 2.0, where it is fixed.

https://github.com/dc-js/dc.js/pull/798