Scentle5S Scentle5S - 16 days ago 7
Javascript Question

d3 quantile scale force first quantile

I'm building a heat map with a color gradient from green to red. I want cells with value

0
to be green, and values greater or equal than
1
to take the other colors.
I'm building the scale this way :

var colors = [
'#27C24C',
'#7DB22E',
'#D4A10F',
'#F97C20',
'#F35F40',
'#FF0000'
];

var colorScale = d3.scale.quantile()
.domain([0, d3.max(data, function (d) { return d.value; })])
.range(colors);


But this returns me the following quantiles :

[239.16666666666677, 478.3333333333332, 717.5, 956.6666666666664, 1195.8333333333335]


Therefore, I have the following heatmap :
Wrong heat map

But I would like the pointed cell to be the second shade of green, since its value is strictly greater than
0
.

Answer

You cannot use only quantile scale in this case. Write custom scale function to treat the zero value separately.

var colors = [
  // '#27C24C', this value must not be included in the internal range
  '#7DB22E',
  '#D4A10F',
  '#F97C20',
  '#F35F40',
  '#FF0000'
];

var colorScaleInternal = d3.scale.quantile()
  .domain([0, d3.max(data, function (d) { return d.value; })])
  .range(colors);

var colorScale = function(value) {
  return !!value ? colorScaleInternal(value) : '#27C24C';
};