✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Keep heatmap when animation starts

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()

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.

Hi @empet,

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

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

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.

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