Animation with facet_row, how to order the groups and change colors of the frames?

📊 Plotly Python
1

Hi there,

I’m working with an animated plotly_express chart and it’s not working as I desire to.

fig = px.bar(df_new,
             x="variable", y="value", color="new", 
             facet_row="vars2",
             animation_frame="order", 
             range_y=[0, .8],
             animation_group="variable",
             barmode="group", height=800)

image
image1121×794 31.7 KB

I want the second chart to be shown in the first place. How can I change the order of the charts?

Also, I have used a snippet to set the orange color

fig.update_traces(texttemplate='%{value:.2f}%',
                  textposition='auto', marker_color="#f0602b")

how can I set the color orange for each frame in the animation?

image
image1051×697 22.3 KB

Looking forward to understanding more about it;

Best Regards,
Leonardo

2

You can use category_orders to control order of anything categorical, and color_discrete_map to map specific colors to categories: https://plotly.com/python/styling-plotly-express/

3

Hey Nicolas, thank you very much for your answer bro!!!

I have already solved the two problems (order & color), but now I’m facing the worst problem… I will post my complete code below to people who have some references for the future…

title_str = f"{testing['batter'].unique()[0]} x {testing['pitcher'].unique()[0]} <br> Angel Stadium | Temperature 4ºF | Pitcher Count 4  "

fig = px.bar(df_new,
             x="variable", y="value", color="new", 
             facet_row="vars2", #barmode='group',
             animation_frame="order", 
             range_y=[0, .8], category_orders={"vars2": [True, False]},
             animation_group="variable",
             color_discrete_map=
             barmode="group", height=800,
             labels={'variable': 'Metric',
                         'value': "Value", "new": 'Comparison by'},
             title=title_str)

fig.update_xaxes(matches=None)
fig.update_xaxes(showticklabels=True)

fig.update_traces(texttemplate='%{value:.2f}%',
                  textposition='auto', marker_color="#f0602b")

for a in fig.layout.annotations:
    a.text = ""
    
fig.update_layout(title_x=.5, showlegend=False,
                  
                  images=[
        dict(
            source=f"assets/baserunners/0000.jpg",
            # xref="paper", yref="paper",
            x=.15, y=1.05,
            sizex=0.4, sizey=0.15,
            xanchor="left", yanchor="bottom")
    ],
                                           margin=dict(
            l=0,
            r=0,
            b=0,
            t=150))

fig.layout['updatemenus'] = [
    {
        'buttons': [
            {
                'args': [[None], {'frame': {'duration': 0, 'redraw': True}, 'mode': 'immediate',
                  'transition': {'duration': 0}}],
                'args2': [None, {'frame': {'duration': 1500, 'redraw': True},
                                'fromcurrent': True, 
                                'transition': {'duration': 500, 'easing': "exp-in"}}],
                'label': 'Play/Pause',
                'method': 'animate'
            },
        ],
        'direction': 'right',
        'pad': {'r': 10, 't': 0},
        # 'showactive': True,
        'type': 'buttons',
        'x': 0.1,
        'xanchor': 'right',
        'y': 1.1,
        'yanchor': 'bottom'
    }
]

for k in range(len(fig.frames)):

    tmp = df_new[df_new['order'] == int(fig.frames[k]['name'])][['outs', 'on_1b', 'on_2b', 'on_3b']].values[0]
    fig.frames[k]['layout'].update(title_text='title')
    fig.frames[k]['layout'].update(images=[
        dict(
            source=f"assets/baserunners/{tmp[0]}{int(tmp[1])}{int(tmp[2])}{int(tmp[3])}.jpg",
            # xref="paper", yref="paper",
            x=.15, y=1.05,
            sizex=0.4, sizey=0.15,
            xanchor="left", yanchor="bottom"),
    ],
                                           margin=dict(
            l=0,
            r=0,
            b=0,
            t=150), title_x=.5
                     )
    fig.frames[k]['data'][0]['marker']['color'] = "#f0602b"
    fig.frames[k]['data'][1]['marker']['color'] = "#f0602b"
    fig.frames[k]['data']
    fig.layout['sliders'][0]['steps'][k]['label'] = '' #f"Outs: {tmp[0]} | on1: {int(tmp[1])} | on2: {int(tmp[2])} | on3: {int(tmp[3])}"

fig.layout['sliders'][0]['currentvalue'] = {'prefix': ""}

## This function I got in github issues
fig = modify_facet_spacing(fig, 2, 1, .01, .2)

My animation isn’t doing a “soft” transition as you can see on the gif below… How can I solve it, could you help me?

animation-page7-problem

1 Like