dreed75 dreed75 - 6 months ago 19
jQuery Question

How do I change the gradient of this heat map for the background to be white instead of black

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.

Answer

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 strength of the color. A luminosity of 0 will be black.

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!

http://jsfiddle.net/2hvLkf35/14/