I am trying to make a heatmap layer on my plot and I have a white background instead of black so the given gradient fades to black. I would like to keep the same "direction" so that red is the "hottest" etc but instead of black as the minimum color, I would like it to be white so it looks like it fits with my original plot. Here is my fiddle: http://jsfiddle.net/davidreed0/2hvLkf35/9/
I change the background from black to white here:
defaultColor = this.bgcolor || [0, 0, 0, 0];
but I can't figure out where the gradient is actually computed.
After playing a little with your fiddle, I think I've discovered where the gradient is computed.
It uses HSL encoding to represent the colors. The key is the Luminosity here. As the value goes down , the luminosity goes down too. A HSL defines the Hue and Saturation for the tone, where the luminosity defines the brightness. A luminosity of 0 will be black, just your case.
So tweaking the routine:
HeatCanvas.defaultValue2Color = function(value) {
var h = (1 - value );
// now we make luminosity inversely proportional
var l = 1 - value * 0.6;
var s = 0.8;
var a = 1;
return [h, s, l, a];
}
effectively fades to white.
You might need to tweak those constants (0.6 and 0.8) to get a better result. Take a look at the updated fiddle to see if it suits your needs!