px.scatter_mapbox animation issue: color shows the 1st frame and won't update

[Lisazhiyuan]

Please see the test csv file and code below. And Thank you so much!

The goal is to show all points on the map with different color ["EV"]: if "EV" is 1, show red; "0" show blue. As year goes, variable "EV" is changing from 0 to 1, expecting color changing from blue to red. However, the color stays at 1st frame and cannot updating as time goes. Even when I hover on the dots and see the EV value has updated, the dot color is not changing.

All points ("parcel_id") are consistent and included throughout frames (year 1 to 10). For the 1st frame (year1), there are both red and blue (EV=1 and EV=0).

I can see color changing if I am using px.scatter animation (same code, just change x=df['Lat'], y=df['Long']). But I really need to show these dots on map. Why it's not working with scatter_mapbox? Can scatter_mapbox handle this? Thanks a lot!

test data
test.csv

df = pd.read_csv("test.csv")
px.set_mapbox_access_token(open(".mapbox_token").read())
fig = px.scatter_mapbox(df, lat=df['Lat'],
lon=df['Long'],
color=df["EV"],
size = df["EV"]+1,
color_continuous_scale= [[0, "rgb(17, 141, 255)"],[1, "rgb(161,52,60)"]],
animation_frame="Year",
animation_group= "parcel_id",
title="EV Adoption")
fig.update_layout(mapbox_style="open-street-map")
fig.show()

[AaronStiff]

Hi @Lisazhiyuan. This seems to be working for me in Chromium (Brave) with current versions of Plotly.py and Plotly.js. What versions are you using, and does this happen in other browsers?

[Lisazhiyuan]

Thanks so much Aaron! I was using 5.11.0 version. After updating to 5.13.0, the issue disappears. Both Microsoft Edge and Chrome brower work!

[AaronStiff]

Awesome! No problem.