Scentle5S - 10 months ago 66

Javascript Question

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

`0`

`1`

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 :

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

`0`

Answer Source

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';
};
```