Black Lives Matter. Please consider donating to Black Girls Code today.

Animating Plotly Scatter Mapbox

Hi,

I’m having two issues with attempting to animate my first plotly chart.

I have single data points across a number of years.
To chart an animation, I grouped the data by year.

When I run the script, the map populates as a year by year animation.

However, I have two issues.

  1. The slider does not work. The map initially populates an animation. And the play button will replay the animation. On its own, the slider will move but it will not change the data.
  2. The map initially loads as the ‘open-street-map’ style, but it changes to a more basic style once the animation begins. I guess that I’m overriding the style setting somehow but I can’t see it.

Thanks for any help!

# Create the figure and feed it all the prepared columns
data = [go.Scattermapbox(
    lat=df['city.coords.lat'],
    lon=df['city.coords.long'],
    mode='markers',
    opacity=0.7,
    customdata=custom,
    hovertemplate=
    "Country: %{customdata[0]}<br />"
    "City: %{customdata[1]}<br />"
    "Area: %{customdata[2]}<br />"
    "Date: %{customdata[3]}<br />"
    "<extra>List: %{customdata[4]}</extra>",

    marker=go.scattermapbox.Marker(
        size=10,
        color=df['year'],
        showscale=True,
        colorbar={'title': 'Year', 'titleside': 'top', 'thickness': 4},
    )

)

]

# Specify layout information
layout = go.Layout(
    mapbox=dict(
        accesstoken=token,
        style='open-street-map',
        center=go.layout.mapbox.Center(lat=45, lon=-73),
        zoom=2
    )
)

# Group sets by year for animation in frame
new_set = df.groupby(df['year'])

frames = list()
lon_data = []
lat_data = []

for index, year in enumerate(list_years):
    for item in (new_set['city.coords.long'].get_group(year)):
        lon_data.append(item)
    for item in (new_set['city.coords.lat'].get_group(year)):
        lat_data.append(item)

    frames.append(
        go.Frame(data=[go.Scattergeo(lon=lon_data, lat=lat_data)])
    )

# Create and add slider
steps = []
for i, year in enumerate(list_years):
    step = dict(
        method="update",
        args=[{"visible": [False] * len(list_years)},
              ],  # layout attribute
        label='Year: {}'.format(year))  # label to be displayed for each step (year)# )

    step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
    steps.append(step)

sliders = [dict(
    active=0,

    pad={"t": 50},
    steps=steps
)]


layout.update(updatemenus=[dict(type='buttons', showactive=False,
                                y=0,
                                x=1.05,
                                xanchor='right',
                                yanchor='top',
                                pad=dict(t=0, r=10),
                                buttons=[dict(label='Play',
                                              method='animate',
                                              args=[None,
                                                    dict(frame=dict(duration=100,
                                                                    redraw=False),
                                                         transition=dict(duration=0),
                                                         fromcurrent=False,
                                                         mode='immediate'
                                                         )
                                                    ]
                                              )
                                         ]
                                )
                           ],
              sliders=sliders);


fig = go.Figure(data=data, layout=layout, frames=frames)

plotly.offline.plot(fig)