Improving performance when rendering animated scatterplot using Plotly Express

📊 Plotly Python
1

Hi,

I’m currently using Plotly Express to render an animated scatterplot using data that is roughly 120,000 rows (it is an animated football match). It takes about 1/2 hour to render just 50,000 rows at the moment (I dare not try the entire thing). Then I’m displaying it using Dash. Is there any way to improve the initial HTML rendering performance prior to displaying it in Dash? Here’s my current code:

fig = px.scatter(df, x="X", y="Y", color="teamId", hover_name="NickName", animation_frame="GameTime", animation_group="NickName", range_x=[-4,110], range_y=[-4,72], size='size', size_max=8, width=900, height=700, color_discrete_map=color_discrete_map, title="Match Demo")
# Remove side scale and hide zero and gridlines
fig.update_layout(
    coloraxis_showscale=False,
    xaxis=dict(showgrid=False, zeroline=False),
    yaxis=dict(showgrid=False, zeroline=False),
)
# Disable axis ticks and labels
fig.update_xaxes(showticklabels=False)
fig.update_yaxes(showticklabels=False)
fig.update_xaxes(title_text='')
fig.update_yaxes(title_text='')
image_file = 'WhitePitch.png'
image_path = os.path.join(os.getcwd(),image_file)

from PIL import Image
img = Image.open(image_path)

fig.add_layout_image(
        dict(
            source=img,
            xref="x",
            yref="y",
            x=-5,
            y=72,
            sizex=115,
            sizey=77,
            sizing="stretch",
            opacity=0.5,
            layer="below")
)

# Sets background to white vs grey
fig.update_layout(template="plotly_white")

Would really appreciate anyone pointing me in the right direction. Thanks!