@gosforth The colorscale in the iris example is a discrete colorscale with three colors corresponding to the three flower classes. More precisely, colormapping data in an interval [a,b] consists in two steps:
first the interval [a, b] is mapped to [0,1], i.e. data are normalized. Then each value in [0,1] is mapped via linear interpolation to a Plotly colorscale of the form:
[[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)']]
For example if [a, b] =[-1, 3] then the map f:[a,b]–>[0,1] is defined as follows:
f(x)=(x-a)/(b-a)
Such a map however is defined by the plotly.js, not the user in his code.
If your value is -0.5, then f(-0.5) =(-0.5+1)/(3+1)=0.5/4=1/8 =0.125. This normalized value, 0.125 is mapped by plotly.js to a color computed by linear interpolation. That color “lies” between the color in the colorscale associated to 0.1, i.e. ‘rgb(201, 235, 177)’, and the color associated to 0.2, ‘rgb(145, 216, 163)’.
When your data is discrete, consisting in four classes, encoded 0, 1, 2, 3, then the colorscale is a discrete one
defined as follows (here I use hexcolor codes):
my_colorscale = [[0, '#700208'],
[0.25, '#700208'],
[0.25, '#ba2461'],
[0.5, '#ba2461'],
[0.5, '#e081c3'],
[0.75, '#e081c3'],
[0.75, '#e6bae4'],
[1, '#e6bae4']]
How is interpreted this discrete colorcale? Any normalized value between [0, 0.25] is mapped to the color
'#700208' (i.e. in this case the linear interpolation of the colors associated to the interval ends is the same and equal to ''#700208'). Any value between (0.25, 0.5] is mapped to the color ' '#ba2461', and so on.
Now the normalized codes for the classes 0, 1, 2, 3, are 0, 1/3, 2/3, 3/3=1.
0 is mapped to the color ''#700208'
1/3 to ''#ba2461''
2/3 to '#e081c3'
1 to ''#e6bae4'