Plotly: How to interactively set heatmap colorscale using buttons?

Question

I am using Plotly to make some heatmaps. I would like to have an interactive color bar in order to be able to shift and/or change the scale, the same way as for the x and y axes but for the color scale. As a MWE consider the first code in this link :

import plotly.graph_objects as go

fig = go.Figure(data=go.Heatmap(
                    z=[[1, 20, 30],
                      [20, 1, 60],
                      [30, 60, 1]]))
fig.show()

The x,y default functionality I want to replicate in the color bar can be seen in this video . Basically I want to partially replicate the functionality of SAOImageDS9 . This functionality can be seen in this video , if you right click and move the mouse you can change the color scale.

Answer 1

There may be more elegant ways. But the following suggestion sets up buttons with args for all colors available to go.Heatmap() by default by building one figure for every colorscale, "stealing" those colorscales one by one, and then making them available as updates to your figure throgh:

# buttons, temporary figures and colorscales
for i, scale in enumerate(scales):
    colors.append(go.Figure(data=go.Heatmap(z=z,colorscale = scale)).data[0].colorscale)
    buttons.append(dict(method='restyle',
                        label=scale,
                        visible=True,
                        args=[{'colorscale':[colors[i]],
                                }, ],
                        )
                  )

Figure with update button:

Some details about the solution:

So why the hassle with colors.append(go.Figure(data=go.Heatmap(z=z,colorscale = scale)).data[0].colorscale) ? As I said, there might be more elegant ways. But this approach at least ensures that the colorscales keep the same sructure for all colors in:

(Heatmap({
     'colorscale': [[0.0, 'rgb(237, 229, 207)'], [0.16666666666666666, 'rgb(224,
                    194, 162)'], [0.3333333333333333, 'rgb(211, 156, 131)'], [0.5,
                    'rgb(193, 118, 111)'], [0.6666666666666666, 'rgb(166, 84, 97)'],
                    [0.8333333333333334, 'rgb(129, 55, 83)'], [1.0, 'rgb(84, 31,
                    63)']],
     'z': [[1, 20, 30], [20, 1, 60], [30, 60, 1]]
 }),)

Which is the structure you're editing through buttons and updatemenu.

Complete code:

# imports 
import plotly.graph_objects as go

# data
z=[[1, 20, 30],
  [20, 1, 60],
  [30, 60, 1]]

# every colorscale available to go.Heatmap() by default
scales =     ['aggrnyl', 'agsunset', 'algae', 'amp', 'armyrose', 'balance',
             'blackbody', 'bluered', 'blues', 'blugrn', 'bluyl', 'brbg',
             'brwnyl', 'bugn', 'bupu', 'burg', 'burgyl', 'cividis', 'curl',
             'darkmint', 'deep', 'delta', 'dense', 'earth', 'edge', 'electric',
             'emrld', 'fall', 'geyser', 'gnbu', 'gray', 'greens', 'greys',
             'haline', 'hot', 'hsv', 'ice', 'icefire', 'inferno', 'jet',
             'magenta', 'magma', 'matter', 'mint', 'mrybm', 'mygbm', 'oranges',
             'orrd', 'oryel', 'peach', 'phase', 'picnic', 'pinkyl', 'piyg',
             'plasma', 'plotly3', 'portland', 'prgn', 'pubu', 'pubugn', 'puor',
             'purd', 'purp', 'purples', 'purpor', 'rainbow', 'rdbu', 'rdgy',
             'rdpu', 'rdylbu', 'rdylgn', 'redor', 'reds', 'solar', 'spectral',
             'speed', 'sunset', 'sunsetdark', 'teal', 'tealgrn', 'tealrose',
             'tempo', 'temps', 'thermal', 'tropic', 'turbid', 'twilight',
             'viridis', 'ylgn', 'ylgnbu', 'ylorbr', 'ylorrd']

# scales = scales[10:13]
colors =[]
buttons = []

# buttons, temporary figures and colorscales
for i, scale in enumerate(scales):
    colors.append(go.Figure(data=go.Heatmap(z=z,colorscale = scale)).data[0].colorscale)
    buttons.append(dict(method='restyle',
                        label=scale,
                        visible=True,
                        args=[{'colorscale':[colors[i]],
                                }, ],
                        )
                  )

# Initial figure:
fig = go.Figure(data=go.Heatmap(z=z, colorscale = scales[0]))

# some adjustments to the updatemenus
updatemenu = []
your_menu = dict()
updatemenu.append(your_menu)
updatemenu[0]['buttons'] = buttons
fig.update_layout(showlegend=False, updatemenus=updatemenu)

# f = fig.
fig.show()