Plotly Animation: Move back and forth by one frame

📊 Plotly Python
1

Hi.
I am trying to create an animated plot where, in addition to the slider and the play/pause buttons that exist by default, I need buttons for moving one frame forward and backward. Here is some code for a small example that shows the animation for which I am trying to achieve this:

import pandas as pd
import numpy as np
from plotly import express as px

data = np.random.uniform(size=(100, 30))
rows = []
for i in range(100):
    for j in range(30):
        rows.append([i, j+1, data[i, j]])

df = pd.DataFrame(rows, columns=["curve_id", "X", "Y"])

fig = px.line(df, x="X", y="Y", animation_frame="curve_id", animation_group="curve_id")

# set the framerate of the animation
fig.layout.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 200
# make the transition between frames instant
fig.layout.updatemenus[0].buttons[0].args[1]["transition"]["duration"] = 0

fig.layout.sliders[0]["tickcolor"] = "white"
fig.layout.sliders[0]["font"]["color"] = "white"
fig.layout.sliders[0]["currentvalue"]["font"]["color"] = "black"
fig.layout.sliders[0]["currentvalue"]["prefix"] = "curve_id: "

fig.show()

In this example, the animation contains 100 curves (frames). In practice, the animation is supposed to contain multiple thousand frames. Because of this, it will not be practical to search the animation for specific frames using the slider. I am not sure if this plays a role for the solution but I want to use this animation inside of a Dash application.
Any help with this is greatly appreciated!

1 Like
2

Hello I’m currently looking into animation right now as well. My first thought you could make a dash button and somehow increment the frame thats being shown. But i dont see any properties that get triggered when the animation is playing or the frames are changing in the dcc.graph object.

I found this Trigger callback on animation frame change which says to possibly animate it with just dcc.interval and dcc.store instead or use javascript

3

Hey, thank you for your reply. I already tried animating the plot using dcc.Interval. This works in principle but unfortunately it doesn’t seem to solve my exact problem. I need to update the plot very frequently, up to 5 times per second, as indicated by the 200ms frame duration in the example that I posted. When using dcc.Interval for the animation, the transition between frames is significantly slower than it is when using the built-in plotly express animation. When using intervals of less than 1000ms, frames might even completely be skipped.

4

In case anyone is having a similar issue: I managed to storing the data that I want to show in a dcc.Store component and by updating the plot using clientside callbacks.