Animation with slider not moving when pressing ‘play’ - with Dash and traces?

📊 Plotly Python
1

Dear @empet,

I see that you answered a similar question here: Animation with slider not moving when pressing 'play'

As a newbie, im not entirely sure how to proceed with my code (using Dash). The figure is updated based on the slider fine, but the play button doesn’t advance the slider automatically, which is what I would like.

app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='year-slider',
        min=result['Year'].min(),
        max=result['Year'].max(),
        value=result['Year'].min(),
        marks={str(year): str(year) for year in result['Year'].unique()},
        step=None
    ),
    # html.Button('play', id="play-button")

])


@app.callback(
    Output('graph-with-slider', 'figure'),
    [Input('year-slider', 'value')])
def update_figure(selected_year):
    filtered_df = result[result['Year'] == selected_year]
    fig = px.scatter_mapbox(filtered_df, lat="Lat", lon="Lon", 
                            animation_frame='Year', animation_group='Index',
                            color_discrete_sequence=["yellow"], zoom=7,
                            height=500, width=1500,
                            )


    fig.update_layout(mapbox_style="open-street-map")
    fig.update_layout(margin={"r": 0, "t": 0, "l": 0, "b": 0})

    # finding the right index for the selected year in our list of all_years_labels_medians
    years = {'2015': 0, '2016': 1, '2017': 2, '2018': 3, '2019': 4, '2020':5}
    index = years[str(selected_year)]
    filtered_df_medians = all_years_labels_medians[index][1]


    traces = []
    traces.append(fig.add_trace(go.Scattermapbox(lat=filtered_df_medians[:, 0], uid=index,
                                    lon=filtered_df_medians[:, 1],
                                    marker=go.scattermapbox.Marker(size=10, color='black', opacity=1),
                                                 name=f'Trace{index}')))
# below doesnt work as expected (just added another trace, but each trace is linked to a specific year)
    #other_df = result[result['Year'] == 2016]
   # other_df_medians = all_years_labels_medians[1][1]
   # traces.append(fig.add_trace(go.Scattermapbox(lat=other_df_medians[:, 0], uid=1,
                                                 lon=other_df_medians[:, 1],
                                                 marker=go.scattermapbox.Marker(size=10, color='black', opacity=1),
                                                 name=f'Trace{1}')))

    sliders = [dict(steps=[dict(method='animate',
                                args=[[f'Trace{k}'],
                                      dict(mode='immediate',
                                           frame=dict(duration=600, redraw=True),
                                           transition=dict(duration=200)
                                           )
                                      ],
                                ) for k in range(0, len(traces))],
                    transition=dict(duration=100),
                    x=0,
                    y=0,
                    currentvalue=dict(font=dict(size=12), visible=True, xanchor='center'),
                    len=1.0)
               ]
    # if value2:
    fig.update_layout(updatemenus=[dict(
        type="buttons",
        buttons=[dict(label='Play',
                      method='animate',
                      args=[None,
                            dict(frame=dict(duration=600,
                                            redraw=True),
                                 transition=dict(duration=200),
                                 fromcurrent=True,
                                 mode='immediate'
                                 )
                            ]
                      )
                 ]
    )
    ], sliders=sliders)

    # fig.update_layout(transition_duration=500)


    return fig

I appreciate your help very much in advance.

2

@newguy123

Yes, I answered a similar question but the animation was created via explicit frame definition, not using plotly express. I don’t know how the animations work with px.

3

sure, will try out other things