0

I am using Plotly Express to make an animated graph, and the output is perfect.

But when I try to use this function in my PyWebIO app using put_html(), the animation of the markers over time does not work as intended. The output from Plotly seems to be fine if the figure is saved as .html and run in chrome or run in jupyterlab with fig.show(). Is there something in the code which prevents the animation of the marker colors from working with PyWebIO put_html()?

Animation Failure (markers don't update) gif of failed animation

How it's supposed to look: gif of normal animation

Hopefully someone has run into this before, full code below:

`

# Web-side imports
from pywebio.input import input, FLOAT, TEXT, radio, input_group, NUMBER
from pywebio.output import *
from pywebio import start_server, config, pin
import nest_asyncio
nest_asyncio.apply()
from pywebio.session import run_js

#Plotting libraries
import pandas as pd
import plotly.express as px
import warnings
warnings.simplefilter(action='ignore', category=pd.errors.PerformanceWarning)

def generate_heatmap_zipcode(df, mapbox_style="open-street-map"):
    df = df.sort_values(['Year & Q'], ignore_index=True, ascending=True)
    fig = px.scatter_mapbox(
        df,
        lat=df.Latitude,
        lon=df.Longitude,
        color='Price Per Square Foot',
        #color_continuous_scale=["green", 'blue', 'red', 'gold'],
        color_continuous_scale=['green', 'blue', 'red', 'gold'],
        animation_frame='Year & Q',
        animation_group='Price Per Square Foot',
        hover_name='Zip Code',
        zoom=9,
        range_color=[0, df['Price Per Square Foot'].quantile(0.95)], # to negate outliers
        height=600,
        width=800,
        title='Quarterly $/SF over Time',
        opacity=.5,
        center={
            'lat': df.Latitude.mode()[0],
            'lon': df.Longitude.mode()[0]
        })
    fig.update_layout(mapbox_style=mapbox_style)
    fig.update_layout(margin={"r": 0, "l": 0, "b": 0})
    fig.layout.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 2000
    fig.layout.updatemenus[0].buttons[0].args[1]['transition']['duration'] = 1000
    
    fig.write_html("Quarterly Price per SF over Time.html")  **->animation works fine, loaded in Chrome from local**
    fig.layout.template = 'plotly_dark'
    #fig.show()                                              **->animation works fine, output in jupyterlab**
    fig.to_html(include_plotlyjs='require', full_html=True)  
    put_html(fig)                                            **->animation of marker color does not work**


df = pd.read_pickle('C:/Users/PC/Desktop/rent_stats/sales/city/sold_df.pkl')
generate_heatmap_zipcode(df)

`

0 Answers0