@sibowi
Let me explain how the colormapping of some data to a Plotly colorscale works.
First the colorscale is defined by a scale, i.e. a list of ordered values in [0,1]:
and a list of color codes, one for each scale entry:
my_colorscale = [[0.0, 'rgb(253, 253, 204)'],
[0.1, 'rgb(201, 235, 177)'],
[0.2, 'rgb(145, 216, 163)'],
[0.3, 'rgb(102, 194, 163)'],
[0.4, 'rgb(81, 168, 162)'],
[0.5, 'rgb(72, 141, 157)'],
[0.6, 'rgb(64, 117, 152)'],
[0.7, 'rgb(61, 90, 146)'],
[0.8, 'rgb(65, 64, 123)'],
[0.9, 'rgb(55, 44, 80)'],
[1.0, 'rgb(39, 26, 44)']]
The scale is the list of values [0, 0.1, 0.2, .....1]
.
Now suppose that your trace defintion colormaps uni-dimensional data, vals
, of range [valmin, valmax]
.
First plotly.js normalizes vals,
i.e. maps them via the normalization function:
val --> norm_val=(val-valmin)/(valmax-valmin) in [0,1]
if the norm_val
coincides with one of the scale entry, then to val
is assigned the corresponding color in my_colorscale
. Otherwise, plotly.js finds the interval of consecutive values in the scale, that contains the norm_val
and calculates the corresponding color by interpolating linearly the color codes corresponding the the interval ends.
From your posted image and the red arrow I do not understand how would you like to get the colormapping.
Could you point out a surface image on the web plotted with another tool that maps values to colors and no interpolation is performed?