vscode-jupyter: Plotly graph animations do not work in jupyter notebook
Environment data
- VS Code version: XXX
- Jupyter Extension version (available under the Extensions sidebar): 2020.12.414227025
- Python Extension version (available under the Extensions sidebar): 2020.12.424452561
- OS (Windows | Mac | Linux distro) and version: Windows 10 Home Version 1909 OS Build 18363.1256
- Python and/or Anaconda version: 3.7.6
- Type of virtual environment used (N/A | venv | virtualenv | conda | …): conda
- Jupyter server running: Local | Remote | N/A: Local
Expected behaviour
See: https://plotly.com/python/animations/
Actual behaviour
Animation does not work in Visual Code with plotly.express but works in Google Collaboratory.
The output from VisualCode-jupyter is pasted below. In case of executing the code in Visual Code the graph does not animate and moving the slider has no effect on the graph.
Steps to reproduce:
The code tested for plotting with animation is:
import plotly.express as px
df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", animation_frame="year", animation_group="country",
size="pop", color="continent", hover_name="country", facet_col="continent",
log_x=True, size_max=45, range_x=[100,100000], range_y=[25,90])
fig.show()
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 7
- Comments: 52 (23 by maintainers)
This seems to be an issue with the ‘plotly_mimetype’ renderer that is used in VS Code per default (‘vscode’ is an alias of 'plotly_mimetype). There are two possible work-arounds depending what Plotly API is used.
If using
plotly.express, the default renderer can be changed:This will change the renderer to a version that uses the Plotly JS code directly and in online mode.
If using
plotly.graph_objectsyou can change the default renderer as above or call out the renderer explicitly duringfig.show()calls:The renderer can also be changed to ‘notebook’ which is the offline version of ‘notebook_connected’ but it will increase the size of your notebook files. Both methods produce animated and interactive Plotly graphs as expected. Another side effect is that the graphs will also scale with the output cell now.
This method also applies to #4578. #1589 and maybe others.
FWIW, on a recently-updated version of VSCode/this plugin, I can get everything Plotly-related working (
fig.show()andFigureWidget) with every interaction except for animations (i.e. panning, zooming, hovering, legend-clicking) without messing with the default renderer.Using
fig.show("notebook")andfig.show("notebook_connected")do result in animations working for me.Should be fixed in our latest renderer extension.
@EelcoLeo the workaround is to do this:
That will force a copy of the renderer to load in every output and animations should work.
This issue is to figure out why the global renderer does not support animations. It has not been resolved yet.
Putting in October due to number of users running into this.
Let’s consider adding a statement to the Readme and/or FAQ for this.
Similar problem for html5 animation.
I’ve commented in the PR… Sorry to be so out of the loop for a while there!
True, you can’t force Plotly to use one renderer instead of another from VSCode’s code, but my hope would be that we can figure out why animations specifically aren’t working in VSCode using the current mime-type renderer, which works fine in JupyterLab. There’s something about the way things are loaded right now that doesn’t work, and I’d like to actually fix it instead of just switching up the way things work, if possible.
@nicolaskruchten yes we’d love to collaborate. Let me chat with people internally on the when and how.