Is there a way to set a default color for the un-selected boxes in heatmap in dc.js when crossfilter is applied?

Question

When i select a cell in the Heatmap, the surrounding cells turn into a "grey" color which is defined in the DC CSS styling file. When the crossfilter is applied between two heatmaps the remaining un matched cells in the other maps turn to a respective color depending on the data set uploaded i'm assuming. Is there a way to set this to the default "grey" color as in the first selected Heatmap

Lime green should turn into Grey color

          var data = [
         {
      [
   {
 "x54": -0.882989,
"x1": -0.696828,
 "row": 1,
 "column": 1
 },
 {
 "x54": -0.876465,
 "x1": -0.644057,
 "row": 1,
 "column": 2
 },
 {
 "x54": -0.826277,
 "x1": -0.307709,
 "row": 1,
 "column": 3
 },
 {
 "x54": -0.72772,
 "x1": -0.197103,
 "row": 1,
 "column": 4
 },
 {
 "x54": -0.439598,
 "x1": -0.41709,
 "row": 1,
 "column": 5
 },
 {
 "x54": -0.153818,
 "x1": -0.663918,
 "row": 1,
 "column": 6
 },
 {
 "x54": -0.083729,
 "x1": -0.832624,
 "row": 1,
 "column": 7
 },
 {
 "x54": 0.185048,
 "x1": -1.058972,
 "row": 1,
 "column": 8
 },
 {
 "x54": 0.74784,
 "x1": -0.79349,
 "row": 1,
 "column": 9
 },
 {
 "x54": 0.880683,
 "x1": -0.678627,
 "row": 1,
 "column": 10
 },
 {
 "x54": -1.222528,
 "x1": -0.234477,
 "row": 2,
 "column": 1
 },
 {
 "x54": -1.201995,
 "x1": -0.22677,
 "row": 2,
 "column": 2
 },
 {
 "x54": -1.047466,
 "x1": -0.176348,
 "row": 2,
 "column": 3
 },
 {
 "x54": -0.883628,
 "x1": -0.195366,
 "row": 2,
 "column": 4
 },
 {
 "x54": -0.554343,
 "x1": -0.406823,
 "row": 2,
 "column": 5
 },
 {
 "x54": -0.188488,
 "x1": -0.74227,
 "row": 2,
 "column": 6
 },
 {
"x54": -0.153185,
 "x1": -1.211219,
 "row": 2,
 "column": 7
  },
 {
 "x54": -0.123571,
 "x1": -1.544932,
 "row": 2,
 "column": 8
 },
 {
 "x54": 0.307304,
 "x1": -1.222773,
 "row": 2,
 "column": 9
 },
 {
 "x54": 0.760703,
 "x1": -0.794464,
 "row": 2,
 "column": 10
 },
 {
 "x54": -1.787903,
 "x1": 0.53784,
 "row": 3,
 "column": 1
 },
 {
 "x54": -1.759356,
 "x1": 0.456399,
 "row": 3,
 "column": 2
 },
 {
 "x54": -1.597539,
 "x1": -0.003567,
 "row": 3,
 "column": 3
 },
 {
 "x54": -1.494041,
 "x1": -0.208856,
  "row": 3,
 "column": 4
 },
 {
 "x54": -1.203471,
 "x1": -0.276973,
 "row": 3,
 "column": 5
 },
 {
 "x54": -0.237502,
 "x1": -0.613778,
 "row": 3,
 "column": 6
 },
 {
 "x54": -0.043425,
 "x1": -1.219936,
 "row": 3,
 "column": 7
 },
 {
 "x54": -0.157964,
 "x1": -1.560531,
 "row": 3,
 "column": 8
 },
 {
 "x54": -0.109837,
 "x1": -1.596408,
 "row": 3,
 "column": 9
 },
 {
 "x54": 0.313007,
 "x1": -1.216265,
 "row": 3,
 "column": 10
 },
 {
 "x54": -1.848956,
 "x1": 0.711575,
 "row": 4,
 "column": 1
 },
 {
 "x54": -1.786463,
 "x1": 0.516668,
 "row": 4,
 "column": 2
 },
 {
 "x54": -1.66119,
 "x1": -0.071153,
 "row": 4,
 "column": 3
 },
 {
 "x54": -1.626694,
 "x1": -0.207817,
 "row": 4,
 "column": 4
 },
 {
 "x54": -1.277511,
 "x1": -0.107304,
 "row": 4,
 "column": 5
 },
 {
 "x54": 0.285612,
 "x1": 0.301386,
 "row": 4,
 "column": 6
 },
 {
 "x54": 0.566092,
 "x1": -0.054815,
 "row": 4,
 "column": 7
 },
 {
 "x54": 0.250711,
 "x1": -0.731451,
 "row": 4,
 "column": 8
 },
 {
 "x54": -0.011755,
 "x1": -1.239403,
 "row": 4,
 "column": 9
 },
 {
 "x54": -0.056915,
 "x1": -1.204161,
 "row": 4,
 "column": 10
 },
 {
 "x54": -1.227091,
 "x1": 0.295195,
 "row": 5,
 "column": 1
 },
 {
 "x54": -1.034244,
 "x1": 0.36743,
 "row": 5,
 "column": 2
 },
 {
 "x54": -0.965926,
 "x1": 0.2263,
  "row": 5,
 "column": 3
 },
 {
 "x54": -1.044771,
 "x1": -0.037899,
 "row": 5,
 "column": 4
 },
 {
 "x54": -0.352724,
 "x1": 0.032479,
 "row": 5,
 "column": 5
 },
 {
 "x54": 0.829276,
 "x1": 0.548374,
 "row": 5,
 "column": 6
 },
 {
 "x54": 0.980084,
 "x1": 0.609911,
 "row": 5,
 "column": 7
 },
 {
 "x54": 0.836985,
 "x1": 0.39424,
 "row": 5,
 "column": 8
 },
 {
 "x54": 0.433473,
 "x1": 0.266364,
 "row": 5,
 "column": 9
 },
 {
 "x54": 0.002185,
 "x1": 0.946293,
 "row": 5,
 "column": 10
    }
   ];
         var ndx = crossfilter (data);
var  runDim = ndx.dimension(function(d) { return [+d.row, +d.column]; }),
  runGroup = runDim.group().reduceSum(function(d) { return +d.x54; });

var  runDim1 = ndx.dimension(function(d) { return [+d.row, +d.column]; }),
  runGroup1 = runDim1.group().reduceSum(function(d) { return +d.x1; });

         chart
.width(45 * 20 + 80)
.height(45 * 5 + 40)
.dimension(runDim1)
.group(runGroup1)
.keyAccessor(function(d) { return +d.key[0]; })
.valueAccessor(function(d) { return +d.key[1]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
    return "Run:   " + d.key[0] + "\n" +
           "Expt:  " + d.key[1] + "\n" +
           "Speed: " + (299000 + d.value) + " km/s";})         
 .colors(['#000080', '#00008b', '#000097', '#0000a3', '#0000ae', '#0000ba', '#0000c6', '#0000d1', '#0000dd', '#0000e9', '0000f5', '#0000ff', '#0000ff', '#0006ff', '#0011ff', '#001bff', '#0025ff', '#0030ff', '#003aff', '#0044ff', '#00fff', '#0059ff', '#0063ff', '#006dff', '#0078ff', '#0082ff', '#008cff', '#0097ff', '#00a1ff', '#00abff', '#00b6f', '#00c0ff', '#00caff', '#00d5ff', '#00dffc', '#03e9f4', '#0bf3ec', '#14fee3', '#1cffdb', '#24ffd3', '#2cffca', '#35ffc2', '#3dffba', '#45ffb1', '#4effa9', '#56ffa1', '#5eff98', '#67ff90', '#6fff88', '#77ff80', '#80ff77', '#8ff6f', '#90ff67', '#98ff5e', '#a1ff56', '#a9ff4e', '#b1ff45', '#baff3d', '#c2ff35', '#caff2c', '#d3ff24', '#dbff1c', '#e3ff14', '#ecff0b', '#f4f903', '#fcef00', '#ffe600', '#ffdc00', '#ffd300', '#ffc900', '#ffc000', '#ffb600', '#ffad00', '#ffa300', '#ff9900', '#ff9000', '#ff8600', '#ff7d00', '#ff7300', '#ff6a00', '#ff6000', '#ff5700', '#ff4d00', '#ff4400', '#ff3a00', '#ff3100', '#ff2700', '#ff1d00', '#ff1400', '#f50a00', '#e90100', '#dd0000', '#d0000', '#c60000', '#ba0000', '#ae0000', '#a30000', '#970000', '#8b0000','#800000'])
.calculateColorDomain();

          chart1
.width(45 * 20 + 80)
.height(45 * 5 + 40)
.dimension(runDim)
.group(runGroup)
.keyAccessor(function(d) { return +d.key[0]; })
.valueAccessor(function(d) { return +d.key[1]; })
.colorAccessor(function(d) { return +d.value; })
.title(function(d) {
    return "Run:   " + d.key[0] + "\n" +
           "Expt:  " + d.key[1] + "\n" +
           "Speed: " + (299000 + d.value) + " km/s";})
 .colors(['#000080', '#00008b', '#000097', '#0000a3', '#0000ae', '#0000ba', '#0000c6', '#0000d1', '#0000dd', '#0000e9', '0000f5', '#0000ff', '#0000ff', '#0006ff', '#0011ff', '#001bff', '#0025ff', '#0030ff', '#003aff', '#0044ff', '#00fff', '#0059ff', '#0063ff', '#006dff', '#0078ff', '#0082ff', '#008cff', '#0097ff', '#00a1ff', '#00abff', '#00b6f', '#00c0ff', '#00caff', '#00d5ff', '#00dffc', '#03e9f4', '#0bf3ec', '#14fee3', '#1cffdb', '#24ffd3', '#2cffca', '#35ffc2', '#3dffba', '#45ffb1', '#4effa9', '#56ffa1', '#5eff98', '#67ff90', '#6fff88', '#77ff80', '#80ff77', '#8ff6f', '#90ff67', '#98ff5e', '#a1ff56', '#a9ff4e', '#b1ff45', '#baff3d', '#c2ff35', '#caff2c', '#d3ff24', '#dbff1c', '#e3ff14', '#ecff0b', '#f4f903', '#fcef00', '#ffe600', '#ffdc00', '#ffd300', '#ffc900', '#ffc000', '#ffb600', '#ffad00', '#ffa300', '#ff9900', '#ff9000', '#ff8600', '#ff7d00', '#ff7300', '#ff6a00', '#ff6000', '#ff5700', '#ff4d00', '#ff4400', '#ff3a00', '#ff3100', '#ff2700', '#ff1d00', '#ff1400', '#f50a00', '#e90100', '#dd0000', '#d0000', '#c60000', '#ba0000', '#ae0000', '#a30000', '#970000', '#8b0000','#800000'])
.calculateColorDomain();

  dc.renderAll();

Previously asked here (but the answer is incomplete): https://stackoverflow.com/questions/40580748/dc-js-heatmap-deselected-colors I'd ask the same question I commented there: do you want all zeros to display as grey (including zeros directly from the data), or just zeros that result from filtering? — Gordon, Sep 03 '18 at 11:03
In my case just the zeros resulting from filtering. I would like it to be the same shade as defined in the dc.css i.e (#ccc) instead of picking the first color defined in the array of colors. Ex: .colors(['#000080', '#000092', '#0000a4']). An explanation to the first question would be helpful. Thanks in advance @Gordon — vivek raju, Sep 04 '18 at 04:59
The lime green color which appears on applying the crossfilter should also be grey i.e (#ccc). — vivek raju, Sep 04 '18 at 05:22

score 1 · Answer 1 · answered Sep 05 '18 at 16:42

I ran into a similar issue where I wanted my zero values to be a certain color while anything else to fall on the color scale. I came across this page on default values for a d3 color scale and it worked nicely:

d3 quantile scale force first quantile

The idea here is to create a function which wraps a d3 color scale. On a zero value return the default color otherwise pass the value to the internal scale and return the resulting value.

After creating the wrapper function, pass it into .colors() instead of the array of colors

Note that you may need to set the domain and range yourself on the function like this:

colorScale.domain = colorScaleInternal.domain;

colorScale.range = colorScaleInternal.range;

Is there a way to set a default color for the un-selected boxes in heatmap in dc.js when crossfilter is applied?

1 Answers1

Linked