Single subplot animations

đź“Š Plotly Python
1

Hi All,

I’m trying to add animations on one of my two subplots. I’ve seen examples of animations done on ALL subplots in a figure but not only on one (like done here: https://plot.ly/~empet/15243/animating-traces-in-subplotsbr/#/ ). I’m quite certain I need to have my figure declaration done with “make_subplots” so I’m pretty confused on how to approach.

Is this possible? Thanks!

plot-capture-animation.PNG
plot-capture-animation.PNG1778Ă—841 320 KB

1 Like
2

Hi @jrotta

Here is an example of animating the trace in a single subplot:

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

fig = make_subplots(
    rows=1, cols=2, subplot_titles=('Title1', 'Title2'),
    horizontal_spacing=0.051
)

fig.add_trace(go.Bar(x=['A', 'B', 'C', 'D'], y=[4, 2, 1, 5]), row=1, col=1) #this is the trace of index 0
fig.add_trace(go.Scatter(x=['A', 'B', 'C', 'D'], y=[2, 1.45, 0.25, 2.1],
                        line_width=3), row=1, col=1)   # trace of index 1

fig.add_trace(go.Scatter(x=np.arange(10),
                         y=1+3*np.random.rand(10),
                        marker_size=6), row=1, col=2)  #trace of index 2


#traces=[0, 1, 2]` in the frame definition makes the difference: it tells that 
#the traces of index 0, 1 from the subplot(1,1), are unchanged, and we only ensure their visibility in each #frame (because neither x nor y are modified)
#while the trace 2 from the subplot(1,2) is animated, because the y-values are changed. 

frames =[go.Frame(data=[go.Bar(visible=True),
                        go.Scatter(visible=True),
                        go.Scatter(y=2+3*np.random.rand(10))],
                  traces=[0,1,2]) for k in range(20)]   # define 20 frames

fig.frames=frames
button = dict(
             label='Play',
             method='animate',
             args=[None, dict(frame=dict(duration=50, redraw=False), 
                              transition=dict(duration=0),
                              fromcurrent=True,
                              mode='immediate')])
fig.update_layout(updatemenus=[dict(type='buttons',
                              showactive=False,
                              y=0,
                              x=1.05,
                              xanchor='left',
                              yanchor='bottom',
                              buttons=[button] )
                                      ],
                 width=800, height=500)
                              
fig.update_layout(yaxis2_range=[0, 5.5], yaxis2_autorange=False)

Update to this QA: https://community.plotly.com/t/keep-heatmap-when-animation-starts/33671. Just now I realized that
adding visible =True for the heatmap, in each frame, doesn’t delete it from frame to frame.

This is a newer requirement, because some time ago, pointing out only the traces that are involved in animation was enough to make the subplot animation work.

1 Like
3

empet,
Thanks for this answer, just what I needed now!
I am a beginner with Plotly.
The “go.Bar(visible=True)” looks like a trick for me.
That’s because I do not yet see the “forest” but only the “trees” !
Would you know where the “principles” of Plotly would be explained?
This could help me to get more intuition.
Thanks

4

@maajdl
Welcome to plotly community.! Plotly has a lot of tutorials: https://plotly.com/python/plotly-fundamentals/
and references: https://plotly.com/python/reference/
so that you can have a mild learning curve. Good luck!!!

5

Thanks empet

There is indeed a lot of documentation.
And it is always possible to find solutions by adapting some of the many exemples provided!
That’s what I did for a graph with three animated subplots.

However, I am a bit tired (my age ? ;>)) ) of proceeding in this way.
Therefore I would be also interrested in a general description of the principles.
And eventually a kind of explanation of the hierarchy of objects.
For my three subplots animation (100 lines) I am still looking at each item to see if it is really needed, to understand its exact role and context, and to see if this is the best way to do it, etc …
Of course each keyword can be searched for in the documentation.

Any such reference?

Thanks again

Michel