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

          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();

Answer 1

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;