# Subplots heatmap animation

**URL:** <https://community.plotly.com/t/subplots-heatmap-animation/38019>\
**Category:** 📊 Plotly Python\
**Created:** [April 19, 2020, 6:47am UTC](https://community.plotly.com/t/subplots-heatmap-animation/38019 "2020-04-19T06:47:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![wizardnh](https://avatars.discourse-cdn.com/v4/letter/w/ecc23a/32.png) [@wizardnh](https://community.plotly.com/u/wizardnh)\
**Post date:** [April 19, 2020, 6:47am UTC](https://community.plotly.com/t/subplots-heatmap-animation/38019/1 "2020-04-19T06:47:34Z")

</div>

Hi All,

I am trying to create some animation of heatmaps. I was successful to do this when this is only one plot but got stuck for subplots.

```auto
from plotly.subplots import make_subplots
import plotly.graph_objects as go
import numpy as np

fig = make_subplots(rows=1, cols=2, subplot_titles = ('Subplot (1,1)', 'Subplot(1,2)'))

#
fig.add_trace(go.Scatter(
          x= [-2.0, -1.0, 0.01, 1.0, 2.0, 3.0],
          y= [4, 1, 1, 1, 4, 9],
          mode = 'markers+lines',
          hoverinfo='name',
          legendgroup= 'f1',
          line_color= 'rgb(255, 79, 38)',
          name= 'f1',
          showlegend= True), row=1, col=1)

#
fig.add_trace(go.Scatter(
          x= [-2.0, -1.0, 0.01, 1.0, 2.0, 3.0],
          y= [3, 8.3, 5.5, 4.24, 6.7, 7],
          mode = 'markers+lines',
          hoverinfo='name',
          legendgroup= 'f1p',
          line_color= 'rgb(79, 38, 255)',
          name= 'f1p',
          showlegend= True), row=1, col=1)

fig.add_trace(go.Heatmap(z=np.random.rand(4, 10)), row=1, col=2)

# Define frames
number_frames = 100
frames = [dict(
    name=k,
    data=[go.Scatter(y=4 + 5 * np.random.rand(6)), # update the trace 1 in (1,1)
          go.Scatter(y=2 + 6 * np.random.rand(6)), # update the second trace in (1,1)
          go.Heatmap(z=np.random.rand(4,10)) # update the trace in (1,2)
          ],
    traces=[0, 1, 2] 
) for k in range(number_frames)]

# Play button
updatemenus = [dict(type='buttons',
                    buttons=[dict(label='Play',
                                  method='animate',
                                  args=[[f'{k}' for k in range(number_frames)],
                                        dict(frame=dict(duration=500, redraw=False),
                                             transition=dict(duration=0),
                                             easing='linear',
                                             fromcurrent=True,
                                             mode='immediate'
                                             )]),
                             dict(label='Pause',
                                  method='animate',
                                  args=[[None],
                                        dict(frame=dict(duration=0, redraw=False),
                                             transition=dict(duration=0),
                                             mode='immediate'
                                             )])
                             ],
                    direction='left',
                    pad=dict(r=10, t=85),
                    showactive=True, x=0.1, y=0, xanchor='right', yanchor='top')
               ]

# Slider
sliders = [{'yanchor': 'top',
            'xanchor': 'left',
            'currentvalue': {'font': {'size': 16}, 'prefix': 'Frame: ', 'visible': True, 'xanchor': 'right'},
            'transition': {'duration': 0, 'easing': 'linear'},
            'pad': {'b': 10, 't': 50},
            'len': 0.9, 'x': 0.1, 'y': 0,
            'steps': [{'args': [[k], {'frame': {'duration': 0, 'easing': 'linear', 'redraw': False},
                                      'transition': {'duration': 0, 'easing': 'linear'}}],
                       'label': k, 'method': 'animate'} for k in range(number_frames)
                      ]}]

fig.update(frames=frames),
fig.update_layout(updatemenus=updatemenus,
                  sliders=sliders)
fig.show() 

```

It can show the heatmap for subplot (1,2) for the 1st frame but the heatmap would disappear after the animation starts.  
It worked pretty well for line/scatter/bar plots but I couldn’t find the issue…  
Does anyone have similar issues or know how to fix it?  
Thanks a lot for any help!

---

<div class="post-metadata">

**Author:** ![empet](https://avatars.discourse-cdn.com/v4/letter/e/977dab/32.png) [@empet](https://community.plotly.com/u/empet)\
**Post date:** [April 19, 2020, 7:56am UTC](https://community.plotly.com/t/subplots-heatmap-animation/38019/2 "2020-04-19T07:56:50Z")

</div>

Hi @wizardnh,

Only `scatter` type traces, updated within animation frames, work with the setting `redraw=False`. All other types need `redraw=True`. Hence since your frames update a heatmap, too, you ust define the Play button as follows:

```auto
 buttons=[dict(label='Play',
                                  method='animate',
                                  args=[[f'{k}' for k in range(number_frames)],
                                        dict(frame=dict(duration=500, redraw=True), #MODIFY JUST THIS redraw to True
                                             transition=dict(duration=0),
                                             easing='linear',
                                             fromcurrent=True,
                                             mode='immediate'
                                             )]),

```

---

<div class="post-metadata">

**Author:** ![wizardnh](https://avatars.discourse-cdn.com/v4/letter/w/ecc23a/32.png) [@wizardnh](https://community.plotly.com/u/wizardnh)\
**Post date:** [April 19, 2020, 4:32pm UTC](https://community.plotly.com/t/subplots-heatmap-animation/38019/3 "2020-04-19T16:32:49Z")

</div>

Hi @empet,

Thanks for your answer! It’s working now. Really appreciate your help 🙂

---

<div class="post-metadata">

**Author:** ![josiahls](https://avatars.discourse-cdn.com/v4/letter/j/b9bd4f/32.png) [@josiahls](https://community.plotly.com/u/josiahls)\
**Post date:** [October 3, 2021, 6:16pm UTC](https://community.plotly.com/t/subplots-heatmap-animation/38019/4 "2021-10-03T18:16:56Z")

</div>

I actually have a question about this redraw/duration thing. I’m doing a subplot also, but with a robot simulation video. I have a bunch of graphs to show along with the video.

I found that if you want to speed up the video, like duration=50, redraw=True, the video ends up blank. I think this is because it’s moving to the next frame before the previous one can load. Is there is way to have it wait for the frame to load?