Animated graph in Plotly and Scattergl

📊 Plotly Python
1

I want to use Scattergl to create animated Plotly graphs. I actively work with regular Scatter, as well as with Scatter3d - no problems.

I have a problem with Scattergl - all subsequent frames are not displayed.

I’ve added a small minimally reproducible example of my problem. If you change Scattergl to Scatter, then everything works fine. What am I doing wrong?

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(go.Scattergl(x=[4, 2, 56, 3, 1], y=[2, 35, 2, 12, 5], mode="markers"))

frames = [
    go.Frame(name=0, data=go.Scattergl(x=[12, 4, 1, 6, 5], y=[4, 2, 5, 45, 23], mode="markers")),
    go.Frame(name=1, data=go.Scattergl(x=[8, 6, 5, 3, 8], y=[9, 7, 6, 4, 11], mode="markers"))
]

fig.update_layout(updatemenus=[dict(type="buttons",
                                    buttons=[dict(label="►", method="animate", args=[None, {"fromcurrent": True}])])])

fig.frames = frames

fig.show()

And yes, I can’t just use Scatter. In my real work, there are tens and hundreds of thousands of points on each frame. I need hardware acceleration.

2

@Favorite1878 Unlike the animation of other traces, in this case the animation is activated only if in the definition of a frame you give the attributes to be changed as dictionary, not within a go.Scattergl:

import plotly.graph_objects as go
import numpy as np
fig = go.Figure()

fig.add_trace(go.Scattergl(x=[1, 2, 3, 4, 5], y=[2, 35, 7, 12, 5],
                           mode="markers", marker_size=8))

frames = [go.Frame(data=[dict(y=np.random.randint(1, 35, 5))],
                 name=k) for k in range(15)]

fig.update_layout(updatemenus=[dict(
            type="buttons",
            x=1.075, y=0.99,
            buttons=[dict(
                         label='Play',
                         method='animate',    
                         args=[None, dict(frame=dict(duration=150), 
                                             transition=dict(duration=0),
                                             fromcurrent=True,
                                             mode='immediate')])])] )
        
fig.update(frames=frames)
fig.show()
2 Likes
3

I came to this decision and tried it. But in this case the performance is the same as when using Scatter. Those. the first frame will be Scattergl, and all subsequent frames, as I concluded, are regular Scatter.

After 3 days of searching for a solution to this problem, I came to create a slider and use the update method. In this case the performance is good. The downside is that I can’t assign a button to automatically scroll through the slider. But I can make this compromise.

4

@Favorite1878 You are right, the frames are of type scatter with such a definition. I omitted in their definition type=‘scattergl’, i.e.

frames=[go.Frame(data=[dict(type='scattergl', y=np.random.randint(1, 35, 5))],  
                 name=k,
              ) for k in range(15)]

and in this case the type was set on the default value,scatter.
The final conclusion is that you cannot create a scattergl animation. You should open an issue on the plotly.js repository.

5

I can confirm this. I was spending a lot of hours trying to figuring out why my scattergl plots were not displayed when animating. Then I change everything to scatter and it works. Also I can confirm that mixing scatter and scattergl elements doesn’t work properly. I was trying using scattergl because I need to render a background “plot” behind my scatter points that change over the time (only these points change, not the background). That background has a lot of elements. If there is another way to do this, I will appreciate it very much. Here you have an image that could explain what I mean.

output

6

@FelipeCordero

Check the new plotly version.

It allows setting the z index of the trace, if I understand everything correctly, that might help your issue, since you should not need to mix scatter and scattergl, to get a background scatter.

2 Likes