Heatmap Color Scales

[Stu]

Just playing with the Heatmap in 3.1.3 and wondered if there was a way to grade the Colours automatically from a start Colour to the End.

This is because we may not know how many variables there are.

In the Michelson–Morley Example we have:

.colorAccessor(function(d) { return +d.value; })

.colors(["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"])

but we're hard-coding the colours here. Can we provide Colour A and Colour B and let d3 grade the colours according to the values?

Cheers, Stu

[Gordon Woodhull]

Sure, .colors() taking an array is a shortcut for scaleQuantize, but it will take any scale.

https://github.com/dc-js/dc.js/blob/master/src/base/color-mixin.js#L83

As usual, if you pass in something that doesn’t make sense, it’s GIGO.

[Stu]

Great stuff. Thanks for making it all clear.

This is what I went with in the end:

.colors(d3.scaleLinear().domain([d3.min(dataSet), d3.max(dataSet)]).range(["white", "green"]));

Although this also gives intriguing results:

.colors(d3.scaleThreshold().domain([0,2000,4000,6000,8000,10000, d3.max(dataSet)]).range(["#ff7373","#ff2626","#ffa64c","#d96c00","#006600","#36d900"]))

Cheers, Stu

(Stay Safe everyone)