0

Can anyone help me understand why the frame playthrough is so slow? This is just an example of a process I want to implement over 100s of images with data points. When I did add the play button it would not be able to load the image fast enough through each frame, but the scatter points would update for each frame fine. Even moving the slider manually shows quite a bit of delay to load the image component. Is there a more efficient way with plotly to create this type of animation?

import numpy as np
import plotly
import plotly.express as px
import plotly.graph_objects as go

imgR = np.random.rand(360, 700)
x=np.random.randint(200,size=10)
y=np.random.randint(200,size=10)

fig=px.imshow(imgR,
              color_continuous_scale='gray',
              origin='lower'
              )
fig.add_trace(go.Scatter(name='Flame Front',
                         x=x, 
                         y=y,
                         mode='markers'                  
                         )
)


frames = []
for i in range(5):
    if i > 0:
        np.random.shuffle(x)
        np.random.shuffle(y)
    # need to name the frame for slider, plus make sure both traces are using
    # correct axes
    frames.append(
        go.Frame(
            name=str(i),
            data=[
                px.imshow(np.random.rand(360, 700) if i > 0 else imgR).data[0],
                go.Scatter(x=x, y=y)
            ],
        )
    )




# now have all parts to puild figure
figa = go.Figure(data=fig.data, frames=frames, layout=fig.layout)

# add slider
figa.update_layout(
    sliders=[
        {
            "active": 0,
            "currentvalue": {"prefix": "animation_frame="},
            "len": 0.9,
            "steps": [
                {
                    "args": [
                        [fr.name],
                        {
                            "frame": {"duration": 0, "redraw": True},
                            "mode": "immediate",
                            "fromcurrent": True,
                        },
                    ],
                    "label": fr.name,
                    "method": "animate",
                }
                for fr in figa.frames
            ],
        }
    ],
)

figa.update_layout(
    showlegend=True,
    title="Plot Title",
    xaxis_title="X Axis",
    yaxis_title="Y Axis",
    legend_title="Legend Title",
    legend=dict(
        xanchor='right',
        yanchor='top',
        traceorder="reversed",
        title_font_family="Times New Roman",
        font=dict(
            family="Courier",
            size=12,
            color="black"
        )
    )
)

figa.show()
JON
  • 23
  • 1
  • 5
  • A technique suggested by [this community](https://community.plotly.com/t/how-do-i-add-a-background-image-with-animation-graph/35725) is to set the image to be used as a background. This would contribute to speed improvement. – r-beginners Mar 16 '22 at 13:45
  • @r-beginners If possible, I would like to avoid setting as a background since I want to preserve the coordinates of the image with respect to the scatter plot. – JON Mar 16 '22 at 14:05

0 Answers0