Animate 2 simultaneous heatmaps with 1 cursor

📊 Plotly Python
1

Hello,
I have two matrices which evolve with each iteration. In the code below, I would like to display the heatmap of these two matrices, with a cursor which will make it evolve simultaneously.
It almost works, I feel like I’m not missing much. The code displays the two heatmaps and the cursor correctly. Iteration 0 is ok. On the other hand, moving the cursor updates heatmap 1 (the one on the left), but places the second one (the one on the right) in its final configuration, and does not change it.

here is my code :

# input datas
m=11
n=11
M_1, M_2 = input_datas.fleche(m,n)

# matrix storage for display
M_10 = np.copy(M_1)
M_20 = np.copy(M_2)

# Colormap
custom_colorscale = [[0, "white"], [0.5, "yellow"], [1, "red"]]

# Create the initial figure
fig = make_subplots(rows=1, cols=2, subplot_titles=["name_1", "name_2"], specs=[[{'type': 'heatmap'}, {"type": "heatmap"}]])

heatmap_1 = go.Heatmap(z=M_1, colorscale = custom_colorscale)
heatmap_2 = go.Heatmap(z=M_2, colorscale="gray")

fig.add_trace(heatmap_1, row=1, col=1)
fig.add_trace(heatmap_2, row=1, col=2)

# Formating cursor settings
steps = []
step = {'args':[{"z": [M_1, M_2]}], "label": f"Itération {0}", "method": "update"}
steps.append(step)

iterations = np.arange(it_tot+1)

for it in np.range(10):
    M_1, M_2 = update_matrices(M_1, M_2)

    heatmap_1 = go.Heatmap(z=M_1, colorscale=custom_colorscale)
    heatmap_2 = go.Heatmap(z=M_2, colorscale="gray")

    step = {'args':[{"z": [M_1, M_2]}], "label": f"Itération {it+1}", "method": "update"}
    steps.append(step)

# So that the first image is iteration 0
fig.data[0].update(z=M_10)
fig.data[1].update(z=M_20)

sliders = [{"active":0, "steps":steps}]

fig.update_layout(sliders=sliders)

fig.show()

Thank you ! I’m taking all opinions :slight_smile: