Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Are there limitations on the duration of animated plots?

Hi, I am currently using Plotly, python, and Dash to animate team sport data (e.g. graphical recreation of match activity). However, I have noticed that when I begin to render the graph that it gets “stuck” and never renders if I attempt to animate more than 24 minutes of a match. Here’s the animated graph rendering portion of the code currently:

fig = px.scatter(df, x="X", y="Y", color="Team", hover_name="NickName", animation_frame="GameTime",
                 animation_group="NickName", range_x=[-4,110], range_y=[-4,72], size='size', size_max=9,
                 width=900, height=700, color_discrete_map=color_discrete_map,
                 hover_data={'X': False,'Y':False,'GameTime':False,'size':False, 'Team':False, 'Position':False})

Is there a current limitation on the duration or size of an animated graph? Ultimately I’d like to animate 45 minutes+ of a match but that doesn’t seem possible currently.

Thank you!

Hi @doogra what is the size of the dataframe df which you are passing to px.scatter? I don’t think there is a hard-coded limitation for the number of frames, however please note that you are passing the whole dataset to the browser and that browsers are struggling with large datasets.

I’m just guessing here, but if the size of the dataset is the problem, you can divide the dataset in several chunks, each of them being used in an animated scatter plot like what you are doing at the moment, and have a callback updating the figure (based on a slider, a dropdown, or a dcc.Interval if you want something automatic).

Hi, thanks for responding. My dataframe is 1.4 million rows. Basically an entire match of data. Would it be helpful to use something other than pandas? Or am I going to run into limitations or bottlenecks regardless? Thank you :slight_smile:

In the case where I have to break the dataframe up, is there an example available of how to do as you suggested? Can the existing slider be used somehow so that I don’t need to add an additional component? Thanks!

Never mind. I found the documentation here :