CODEWITHSUNDEEP
dc.jscrossfilter
Anthony Clark
Anthony Clark

Reputation: 573

How to set the width and height of a dcjs Heatmap based on the filtered group?

In the sample of my code below, I want to set the width and height based on the number of values in the filtered group. Is there a best way to do this? Should I be tracking a count in the group add/remove functions?

    myHeatMap
        .width(45 * 20)
        .height(45 * 30)
        .dimension(heatDim)
        .group(heatGroup)
        .title(function (d) {
            return "Value: " + d.value;
        })
        .keyAccessor(function (d) { return d.key[0]; })
        .valueAccessor(function (d) { return d.key[1]; })
        .colorAccessor(function (d) { return d.value; })
        .colors(["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"])
        .calculateColorDomain();

Upvotes: 2

Views: 738

Answers (1)

Gordon
Gordon

Reputation: 20120

This is an interesting question. In the general case, one would want the heatmap to change size when the number of rows or columns changes.

If you're not concerned with that, I think doing a count of of the elements is about the best you can do, with d3.set one easy way to get this:

var data = heatGroup.all();
var ncols = d3.set(data.map(function(x) { return x.key[0]; })).size();
var nrows = d3.set(data.map(function(x) { return x.key[1]; })).size();

myHeatMap.width(ncols*45).height(nrows*45)

Feel free to file a feature request, or better yet, a PR, if you'd like to see the more general case. The heatmap is already doing something like this internally, although it doesn't have to compute the unique set since it relies on the ordinal scale for that.

Upvotes: 1

Related Questions