✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Improving performance when rendering animated scatterplot using Plotly Express

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!