Animation - two different plots using traces

[geosphere]

Hello,

I’m trying to make a functional plot where I am using two plots. So far it looks like this:

Now, I want to make both plots to be animated, so that every frame the state changes in both. Currently, only the BarPolar is being animated.

I’ve attempted to animate the bar chart below so that for each frame a another bar is added, it starts as 1 and then for each frame a new bar is added while preserving the ones rendered in previous frame. So far I failed to do so, it’s not consistent with what I wanted to achieve. In the sense that the Barpolar changes its state as it should, but the barchart is either one single bar that is as wide as the whole barchart then it disappears and so on.

Some of my attempts with animating the bar chart:

Animating Bar chart one after the other

Is it possible to animate a Bar chart so that each bar appears in the animation sequentially? [image] For example, in the image above, I want for each frame, a new bar to show up but I don’t want the previously rendered ones to disappear thus if I’m at frame 5 then I’d like to show all the bars until that frame. requests_df = pd.DataFrame({'requests': total_requests}) fig = go.Figure(data = [go.Bar(x=requests_df.index.tolist(), y=requests_df['requests'])], frames=[ …

Code:

trace2 = go.Bar(name="Traffic Requests", x=[requests_df.loc[0]['frame']], y=[requests_df.loc[0]['requests']], opacity=0.15)

frames=[dict(name=str(k), 
             data=[go.Barpolar(r=test_df.loc[k]['scaled_bidrates'], 
                                   theta=test_df.loc[k]['theta'], 
                                   width=test_df.loc[k]['angles'].tolist(),
                                   marker={"color": test_df.loc[k]['winrate']},
                                   customdata=np.stack(
                                      (labels.loc[k], factor_proportion.loc[k], winrates.loc[k], bidrates.loc[k]), axis=-1)),
                   go.Bar(x=[requests_df.loc[k]['frame']], y=[requests_df.loc[k]['requests']])
                                   ], 
             traces=[0, 1]
                )
           for k in range(len_df)
       ]

data = [trace1, trace2]

# add subplots to existing traces
fig = go.Figure(data=data, frames=frames).set_subplots(2, 1, 
                                                       specs=[[{"type": "barpolar"}], 
                                                              [{"type": "bar"}]])

*Trace 1 is theused for BarPolar, basically I’m using a go.BarPolar.

As for references I found these helpful:
https://chart-studio.plotly.com/~empet/15012/animating-subplots-with-more-than-one-t/#/

Multiple traces in multiple animation plots

OK, got the multiple traces per graph working fine by following your example. Thank you for your help. Still have to get plotting online working or I would show results. With respect to your Bcl2 graph. Is it possible to label the outermost leaf of each branch? I saw the hover labels but a static label for each gene in the tree would be useful. May not be possible.

Can anyone help me figure this out?

Thanks!

[empet]

@geosphere
Here is an example of animating simultaneously and cumulatively a go.Barpolar and go.Bar, displayed in a subplot:

import numpy as np
import plotly.graph_objects as go

fig=go.Figure().set_subplots(2,1, vertical_spacing=0.05,
                             specs=[[{"type": "polar"}], [{"type":"bar"}]])

r=[3.5, 1.5, 2.5, 4.5, 4.5, 4, 3]
theta=[65, 15, 210, 110, 312.5, 180, 270]
width=[20,15,10,20,15,30,15]
x= np.arange(1, 8)
bh = [4, 6, 3, 7, 8, 5, 9]


fig.add_trace(go.Barpolar(r=r[:1], theta=theta[:1], width=width[:1], 
                          marker_color="#ff8c00",
                          marker_line_color="black",
                          marker_line_width=1),1, 1)
fig.add_trace(go.Bar(x=x[:1], y=bh[:1], marker_color="green", width=0.95), 2,1);

fig.update_layout(width=800, height=700, xaxis_range=[0.5, 7.5], yaxis_range=[0, max(bh)+0.5]);

frames=[go.Frame(data=[go.Barpolar(r=r[:k+1], theta=theta[:k+1], width=width[:k+1]),
                       go.Bar(x=x[:k+1], y=bh[:k+1])],
                 name=f"fr{k}",
                 traces=[0,1]) for k in range(len(r))]  #r, theta, width, x, bh must have the same len=number of frames

fig.update(frames=frames)

def frame_args(duration):
    return {
            "frame": {"duration": duration},
            "mode": "immediate",
            "fromcurrent": True,
            "transition": {"duration": duration, "easing": "linear"},
        }

fr_duration=50  # customize this frame duration according to your data!!!!!
sliders = [
            {
                "pad": {"b": 10, "t": 50},
                "len": 0.9,
                "x": 0.1,
                "y": 0,
                "steps": [
                    {
                        "args": [[f.name], frame_args(fr_duration)],
                        "label": f"fr{k+1}",
                        "method": "animate",
                    }
                    for k, f in enumerate(fig.frames)
                ],
            }
        ]


fig.update_layout(sliders=sliders,
                  updatemenus = [
                        {
                        "buttons": [
                            {
                             "args": [None, frame_args(fr_duration)],
                             "label": "▶", # play symbol
                             "method": "animate",
                            },
                            {
                             "args": [[None], frame_args(fr_duration)],
                             "label": "◼", # pause symbol
                             "method": "animate",
                            }],
                        "direction": "left",
                        "pad": {"r": 10, "t": 70},
                        "type": "buttons",
                        "x": 0.1,
                        "y": 0,
                        }])