Pulse Animation in Plolty Express on ScatterMapbox

📊 Plotly Python
1

Hi together,
As described in the title, I am trying to animate the points on a ScatterMapbox with a Pulse effect. This seems to be possible with Mapbox in general, but I can’t find a way to do it with Dash and Plotly Express.

The goal of the app is the following: New data sets are read in sequentially and visualised on a ScatterMapbox. The new data records are fetched every X minutes from a web service. Each data record is then added to the previous data within a callback function for X minutes / Y entries * 1000 seconds. This already works very well. My problem now is that I would like to animate each new data point as soon as it is set on the map. The whole thing should be done without buttons and user interaction. As mentioned above, there is exactly this possibility of animation in Javascript, but unfortunately I cannot adapt this for Python. I hope you can help me!

Here is the link to the animation in Javascript with Mapbox GL: Add an animated icon to the map | Mapbox GL JS | Mapbox

Many thanks in advance

2

No luck, I’m assuming? That would be a great addition to any map plot in plotly dash ecosystem.

3

Plotly can generate the pulse animation, but it can be trigerred only by a button:

import plotly.graph_objects as go

fig=go.Figure()
fig.update_layout(width=400, height=400, xaxis_range=[-1,2], yaxis_range=[-1,2],
                 yaxis_scaleratio=1, yaxis_scaleanchor='x', 
                 xaxis_visible=False, yaxis_visible=False)
fig.add_shape(type="circle",
              xref="paper", yref="paper",
              x0=0.33, y0=0.33, x1=0.67, y1=0.67,
              fillcolor="rgba(255, 0, 0, 0.35)",          
              line_width=0)
fig.add_shape(type="circle",
                          xref="paper", yref="paper",
                         x0=0.35, y0=0.35, x1=0.65, y1=0.65,
                         fillcolor="rgba(255, 0, 0, 1)",          
                         line_color="white")

frames=[]
for k in range(36):
    opacity=round(0.35-round(k*0.01,2),2)
    X0=round(0.33-round(k*0.01,2), 2)
    X1=round(0.67+round(k*0.01,2), 2)
    frames.append(go.Frame(layout=dict(shapes=[dict(type="circle",
                                                    xref="paper", yref="paper",
                                                    x0=X0, y0=X0, x1=X1, y1=X1,
    
                                                    fillcolor=f"rgba(255, 0, 0, {opacity})",          
                                                    line_width=0,
                                                    )])))
fig.update_layout(updatemenus = [
                      dict(type="buttons",
                           buttons=[dict(label="Play",
                                         method="animate",
                                         args=[None,
                                               dict(frame=dict(duration=10, redraw=True),
                                                    fromcurrent=True,
                                                    transition_duration=0)
                            
                                              ])
                                   ])
                                 ])   
fig.update(frames=frames)

Similarly can be created a pulse as a mapbox layer.
pulse150

2 Likes
5

Nice, thank you! Will be using this in the future for sure!