Heatmap - Specific color for value

plotly.js
1

Hi,

I`m currently working with data that contains a lot of gaps, which are marked as -999.25. I tried using the colorscale to make the heatmap display them as black. The problem comes after the Z range is changed all values that fall under the low threshold are painted black. E.g. z value of 30.5 is painted black with threshold values of min 31 and max 50. It is vital for my project to be able to visually see the gaps on the heatmap for interpretation purposes. I have tried quite a few variations of the code below, but with the same result or with errors.

colorscale: [
      ['0.0', 'rgb(0,0,0)'], // Tried variations of this line with extra 0 and with the values in the next 3 lines
      ['0.000000000001', 'rgb(0,47,95)'],  
      ['0.000001111111', 'rgb(0,47,95)'],
      ['0.099999999999', 'rgb(0,47,95)'],
      ['0.111111111111', 'rgb(33,102,172)'],
      ['0.222222222222', 'rgb(67,147,195)'],
      ['0.333333333333', 'rgb(146, 197, 222)'],
      ['0.444444444444', 'rgb(209,229,240)'],
      ['0.555555555556', 'rgb(253,219,199)'],
      ['0.666666666667', 'rgb(244,165,130)'],
      ['0.777777777778', 'rgb(214,96,77)'],
      ['0.888888888889', 'rgb(255,0,0)'],
      ['0.999999999911', 'rgb(255,1,1)'],
      ['1.000000000000', 'rgb(255,1,2)'],
    ],

I was thinking if I am able to hardcode the -999.25 as black, but have not found such option in the library.

Any help and suggestion will be much appreciated.
Thank you.

2

Sounds like setting zmin and zmax should solve this problem.

If it doesn’t, could you a bit more of your code (a reproducible codepen/jsFiddle would be best) to help us help you? Thanks!

3

@milenmarev I worked before on such a heatmap and I defined the colorscale according to the following algorithm:

  • Find a = min (zvalues that are different from -999.25)
  • b = max(zvalues)
  • dif = (b-a)/9
  • set now all zvalues equal to -999.25 to a new value = a-dif

The interval [a-dif, b] is mapped to [0,1] and then to a colorscale;

dif was chosen such that [a-dif, a] to be mapped to [0, 0.1] and then to a particular color for gaps.

Define a colorscale as follows:

colorscale = [[0, 'green'],
             [0.1, 'green'],
             [0.1, 'rgb(253, 237, 176)'],
             [0.2, 'rgb(249, 198, 139)'],
              [0.3, 'rgb(244, 159, 109)'],
              [0.4, 'rgb(234, 120, 88)'],
              [0.5, 'rgb(218, 83, 82)'],
              [0.6, 'rgb(191, 54, 91)'],
              [0.7, 'rgb(158, 35, 98)'],
              [0.8, 'rgb(120, 26, 97)'],
              [0.9, 'rgb(83, 22, 84)'],
              [1.0, 'rgb(47, 15, 61)']]

I replaced your black color for gaps, because black
is almost indistinguishable from the darkest hue in the above colorscale.
With such an algorithm you’ll get something like this:

heatmap-with-gaps