Colorscale mismatches colors in plotly (python)

Question

I try to make a heatmap using Plotly in Python 3.5.3. The idea is to pass the coordinates of each point on the grid (x,y) and to color them according to the property z (z has three values - 0, 1, 2).

from plotly import offline as py

colors = [
    [0, 'rgb(0,0,255)'], #blue 
    [1, 'rgb(255, 0, 0)'], #red
    [2, 'rgb(188, 188, 188)'] #gray
]

data = [dict(z=z, y=y, x=x, type='heatmap',  colorscale=colors, showscale=True)]

py.plot({'data': data, 'layout': {'width': 500, 'height': 500}}, filename="plot.html")

However, in the resulting plot the colors are completely mismatched. I tried searching into Plotly documents, but still have no clue what is wrong here.

Answer 1

From the documentation

The colorscale must be an array containing arrays mapping a normalized value to an rgb, rgba, hex, hsl, hsv, or named color string. At minimum, a mapping for the lowest (0) and highest (1) values are required. For example, [[0, 'rgb(0,0,255)', [1, 'rgb(255,0,0)']] .

In your example the colorscale ranges from 0 to 2. If you normalize it to a maximum of 1, it should work.

from plotly import offline as py

colors = [[0, 'rgb(0,0,255)'], #blue 
          [0.5, 'rgb(255, 0, 0)'], #red
          [1, 'rgb(188, 188, 188)'] #gray
         ]
z = [[1, 20, 30],
     [20, 1, 60],
     [30, 60, 1]]
data = [dict(z=z,
             type='heatmap',
             colorscale=colors, 
             showscale=True)]

py.plot({'data': data})