Create an animation of two scatter_mapbox in a subplot

📊 Plotly Python
1

I succeeded in drawing both graphs, but I only succeeded in animating one of the subplots.
I went over all the guides and comments regarding subplots animations, but couldn’t figure out what am I missing.
This is the relevant code:

import plotly.graph_objects as go
from plotly.subplots import make_subplots
import pandas as pd
import numpy as np
import plotly.express as px

mapboxtoken = "mapboxtoken"
mapboxstyle = 'mapboxstyle'

fig = make_subplots(
    rows=1,
    cols=2,
    subplot_titles=('scatter', 'scatter'),
    specs=[[{"type": "scattermapbox"}, {"type": "scattermapbox"}]]
)

df1 = pd.DataFrame({
    'lat': np.random.uniform(-90, 90, 100),
    'lon': np.random.uniform(-180, 180, 100),
    'size': np.random.rand(100),
    'color': np.random.rand(100),
    'frame': np.random.randint(0, 10, 100)
})

scatter1 = px.scatter_mapbox(df1, lat="lat", lon="lon", color="color", size="size",
                             color_continuous_scale=px.colors.cyclical.IceFire, size_max=15, zoom=1,
                             mapbox_style="carto-positron", animation_frame="frame")

df2 = pd.DataFrame({
    'lat': np.random.uniform(-90, 90, 100),
    'lon': np.random.uniform(-180, 180, 100),
    'size': np.random.rand(100),
    'color': np.random.rand(100),
    'frame': np.random.randint(0, 10, 100)
})

scatter2 = px.scatter_mapbox(df2, lat="lat", lon="lon", color="color", size="size",
                             color_continuous_scale=px.colors.cyclical.IceFire, size_max=15, zoom=1,
                             mapbox_style="carto-positron", animation_frame="frame")


fig.add_trace(scatter1.data[0], row=1, col=1)
fig.add_trace(scatter2.data[0], row=1, col=2)

number_frames = len(scatter1.frames)

frames = [dict(
    name=k,
    data=[scatter1.frames[k].data[0],  # update the trace 1 in (1,1)
          scatter2.frames[k].data[0],  # update the second trace in (1,1)
          ],
    traces=[0,1]  # the elements of the list [0,1,2] give info on the traces in fig.data
    # that are updated by the above three go.Scatter instances
) for k in range(number_frames)]

# Convert the list back to a tuple and assign it to fig.frames
fig.update(frames=frames)
fig.update_layout(
    mapbox1_accesstoken=mapboxtoken,
    mapbox1=dict(
        zoom=1,
        style=mapboxstyle,
        center=go.layout.mapbox.Center(lat=np.mean(df1['lat']), lon=np.mean(df1['lon']))
    ),
    mapbox2_accesstoken=mapboxtoken,
    mapbox2=dict(
        zoom=1,
        style=mapboxstyle,
        center=go.layout.mapbox.Center(lat=np.mean(df2['lat']), lon=np.mean(df2['lon']))
    ),
)

updatemenus = [dict(type='buttons',
                    buttons=[dict(label='Play',
                                  method='animate',
                                  args=[[f'{k}' for k in range(number_frames)], 
                                         dict(frame=dict(duration=500, redraw=True), 
                                              transition=dict(duration=0),
                                              easing='linear',
                                              fromcurrent=True,
                                              mode='immediate'
                                                                 )])],
                    direction= 'left', 
                    pad=dict(r= 10, t=85), 
                    showactive =True, x= 0.1, y= 0, xanchor= 'right', yanchor= 'top')
            ]

sliders = [{'yanchor': 'top',
            'xanchor': 'left',
            'currentvalue': {'font': {'size': 16}, 'prefix': 'Frame: ', 'visible': True,
                             'xanchor': 'right'},
            'transition': {'duration': 500.0, 'easing': 'linear'},
            'pad': {'b': 10, 't': 50},
            'len': 0.9, 'x': 0.1, 'y': 0,
            'steps': [
                {'args': [[k], {'frame': {'duration': 500.0, 'easing': 'linear', 'redraw': True},
                                'transition': {'duration': 0, 'easing': 'linear'}}],
                 'label': k, 'method': 'animate'} for k in range(number_frames)
            ]}]

fig.update_layout(updatemenus=updatemenus, sliders=sliders)

fig.show()

Thank you in advance for your the help

2

In the case of reusing animation data from two plotly.express, the name of each subplot will be the same. So you need to update subplot=‘mapbox2’ before reusing the data.

...
fig.add_trace(scatter1.data[0], row=1, col=1)
fig.add_trace(scatter2.data[0], row=1, col=2)

# update
for f in range(len(scatter2.frames)):
    scatter2.frames[f].data[0].subplot = 'mapbox2'

number_frames = len(scatter1.frames)
...

newplot - 2024-08-17T114028.066
newplot - 2024-08-17T114028.0661075×360 42.9 KB

3

Thanks a lot!!! it works!