dreed75 dreed75 - 4 months ago 8x
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:

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 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!