I embedded an interactive plotly graph (a timelapse choropleth graph (plotly.express.choropleth) created with playable animation and made with python/plotly.express) into a Hugo template using the JSON/shortcode instructions found here. I basically wrote the graph into a json using ‘fig.write_json’ and put it into the static folder in the Hugo folder organization, made the corresponding short codes (load-plotly.html and plotly.html), put ‘plotly: true’ into the front matter for the post, and used the shortcodes on the page I wanted the graph on.
After finishing all these steps, I was able to see the graph when rendering of my webpage ( hugo server , but unfortunately the graph isn’t ‘playable’. It just appears, and I can zoom in and out so it’s ‘interactive’, but the play button doesn’t result in progression and display of the data.
This is what the json file looks like: {"data":[{"coloraxis":"coloraxis","geo":"geo",&.... I’m new to Hugo and Plotly, but I’m wondering if it’s because the original graph is created with the plotly.express submodule and the Hugo embedding process above does not work for that. Could the problem be the “script src” found in the instructional link in the load-plotly.html (https://cdn.plot.ly/plotly-latest.min.js) that isn’t compatible with a plotly.express created graph?
Would love any help in figuring out where Hugo and plotly are not quite matching up for this graph.