Keep heatmap when animation starts

📊 Plotly Python
1

Hello all,

I’m building a heatmap with a cumulative scatter animation to plot important points. When I begin the scatter animation, the heatmap goes away when the scatter animation begins. I’m drawing my scatter animation in my main figure and my heatmap is drawn as a trace. How can I keep heatmap as a background and have my scatter draw over it? Should I draw my heatmap in the main figure and have my scatter as a trace? Thanks!

data = [go.Scatter(
    x=[],
    y=[],
    mode='markers',
    marker=dict(color=scatterDataX)
)]

dataX = list(scatterDf['Time'])
dataY = list(scatterDf['Depth'])

frames = [dict(data= [dict(type='scatter',
                           x=dataX[:k+1],
                           y=dataY[:k+1])],
               traces= [1],
               name='frame{}'.format(k)       
              )for k  in  range(1, len(scatterDf))]           

layout = go.Layout(
    autosize=True,
    hovermode='closest'
)

sliders = [dict(steps= [dict(method= 'animate',
                           args= [[ 'frame{}'.format(k) ],
                                  dict(mode= 'immediate',
                                  frame= dict( duration=100, redraw= False ),
                                           transition=dict( duration= 0)
                                          )
                                    ],
                            label='{:d}'.format(k)
                             ) for k in range(len(scatterDf))], 
                transition= dict(duration= 0 ),
                x=0,#slider starting position  
                y=0, 
                currentvalue=dict(font=dict(size=12), 
                                  prefix='Point: ', 
                                  visible=True, 
                                  xanchor= 'center'),  
                len=1.0)
           ]

layout.update(updatemenus=[dict(type='buttons', showactive=False,
                            y=0,
                            x=1.05,
                            buttons=[dict(label='Play',
                            method='animate',
                            args=[None, 
                                dict(frame=dict(duration=100,
                                                redraw=False),
                                        transition=dict(duration=0),
                                        fromcurrent=True,
                                        mode='immediate'
                                ) 
                            ]
                        )
                    ]
                )
            ],
        sliders=sliders)

fig = go.Figure(data=data, layout=layout, frames=frames)
fig.add_heatmap(z=z2, zauto=False, zmin=-1, zmax=1)
fig.update_yaxes(autorange="reversed", range=[5000, -1000])
fig.update_xaxes(range=[0, 2000])
fig.show()
2

Hi @jrotta,
Welcome to forum! I tested my similar animation that worked before, but now the heatmap disappears. This behaviour occurs only for heatmap and contour as a constant trace during animation. I tried with other chart types and they remained visible. I think this is a plotly.js issue. You can open it here: https://github.com/plotly/plotly.js/issues.

3

Hi @empet,

Thanks for the reply. Okay that kinda stinks, do you recommend anything that might work?

4

@jrotta I don’t see another solution if you want to display the heatmap as a background for all your frames.

5

Hi, any updates on this?

Got the same issue. With a heatmap trace + scatter trace, tried most of commands on documentation, but the heatmap keeps dissapearing during animation. It only renders on first and last frames.

Thanks in advance.

6

@symrzknr
Adding visible =True for the heatmap, in each frame, keeps it displayed in each frame.

7

Hi, I tried visible=True in order to keep the go.Contour displayed, however, when the animation start with the dynamic scatter plot, the contour plot keeps flickering. I don’t know whether it is the normal case or I miss some of the setting :thinking:

Here is my code in python:

fig = make_subplots(rows=1, cols=2, specs=[[{'type': 'surface'}, {'type': 'contour'}]])
            fig.add_trace(go.Surface(x=xx1, y=xx2, z=fx), row=1, col=1)
            fig.add_trace(go.Scatter3d(x=None, y=None, z=None), row=1, col=1)
            fig.add_trace(go.Surface(x=None, y=None, z=None, showscale=False, colorscale='Blues'), row=1, col=1)
            fig.add_trace(go.Contour(x=xx1_o, y=xx2_o, z=fx), row=1, col=2)
            fig.add_trace(go.Scatter(x=None, y=None), row=1, col=2)
            frames = [go.Frame(data=[go.Surface(visible=True, showscale=False, opacity=0.8),
                                     go.Scatter3d(x=np.array(self.xn_list)[:k,0], y=np.array(self.xn_list)[:k,1], z=f_xn),
                                     go.Surface(x=xx1_tangent, y=xx2_tangent, z=z[k]),
                                     go.Contour(visible=True),
                                     go.Scatter(x=np.array(self.xn_list)[:k, 0], y=np.array(self.xn_list)[:k, 1])], 
                               traces=[0, 1, 2, 3, 4]) for k in range(len(f_xn))]
            fig.frames = frames
            fig.update_layout(height=800, updatemenus=[dict(type="buttons", buttons=[dict(label="Play", method="animate", args=[None, dict(fromcurrent=True, transition= {'duration': 0}, frame=dict(redraw=True, duration=500))]), \
                                                                         dict(label="Pause", method="animate", args=[[None], \
                                                                         dict(fromcurrent=True, mode='immediate', transition={'duration': 0}, frame=dict(redraw=True, duration=0))])])])
fig.show()