The order of Heatmap and Contour cannot be changed in Animations

📊 Plotly Python
1

I observed during animating heatmaps over Contour plots, it is simply not possible. No matter what trace order I use, the Heatmap always comes below the Contour plot. A demo code to test it out can be as follows.

import plotly.graph_objects as go
import numpy as np

matrix = np.random.randint(2,size = (10,10))
frame_arr = []
for _ in range(20):
  x_arr = np.random.randint(10,size=(10,10))
  y_arr = np.random.randint(10,size=(10,10))
  matrix = np.random.randint(2,size = (10,10))
  frame_arr.append(go.Frame(data=[go.Heatmap(z = matrix),go.Contour(z = matrix,opacity=0.5)]))

fig = go.Figure(
    data=[go.Heatmap(z = matrix),go.Contour(z = matrix)],
    layout=go.Layout(
         xaxis=dict(range=[0, 9], autorange=False),
        yaxis=dict(range=[0, 9], autorange=False),
        title="Start Title",
        updatemenus=[dict(
            type="buttons",
            buttons=[dict(label="Play",
                          method="animate",
                          args=[None])])]
    ),
    frames=frame_arr
)

fig.show()

In this code the Heatmap should be above the Contour plot but it simply is not no matter what you do.

2

@shivamshaiv
Since your Frame.data definition contains more than one chart instantiation, you have to set Frame.traces =[0,1] to let plotly.js know that the go.Heatmap, defined as the Frame.data[0], updates fig.data[0], while 'go.Contour` updates fig.data[1].

Hence frame_arr.append(go.Frame(data=[go.Heatmap(z = matrix),go.Contour(z = matrix,opacity=0.5)])) defined at the end of the for loop, must be written:

frame_arr.append(go.Frame(data=[go.Heatmap(z = matrix),
                                go.Contour(z = matrix,opacity=0.5)],
                          traces = [0,1]))
3

Thankyou, that solved the order of the traces. But still the Heatmap seems to be always generate below the Contour.

4

@shivamshaiv
This code works for me, i.e. the trace order is respected:

 matrix = np.random.randint(2,size = (10,10))
frame_arr = []
for _ in range(20):
    x_arr = np.random.randint(10,size=(10,10))
    y_arr = np.random.randint(10,size=(10,10))
    matrix = np.random.randint(2,size = (10,10))
    frame_arr.append(go.Frame(data=[go.Heatmap(z = matrix),
                                    go.Contour(z = matrix)],
                              traces=[0,1]))

fig = go.Figure(
            data=[go.Heatmap(z = matrix),
                  go.Contour(z = matrix, opacity=0.75)],
            layout=go.Layout(
                         xaxis=dict(range=[0, 9], autorange=False),
                         yaxis=dict(range=[0, 9], autorange=False),
                title="Start Title",
        updatemenus=[dict(
            type="buttons",
            buttons=[dict(label="Play",
                          method="animate",
                          args=[None])])]
    ),
    frames=frame_arr
)