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()

[jackthepanisher]

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:

import plotly.io as pio
pio.renderers.default = 'notebook_connected'

This will change the renderer to a version that uses the Plotly JS code directly and in online mode.

If using plotly.graph_objects you can change the default renderer as above or call out the renderer explicitly during fig.show() calls:

fig.show(renderer='notebook_connected')

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.

[nicolaskruchten]

FWIW, on a recently-updated version of VSCode/this plugin, I can get everything Plotly-related working (fig.show() and FigureWidget) with every interaction except for animations (i.e. panning, zooming, hovering, legend-clicking) without messing with the default renderer.

Using fig.show("notebook") and fig.show("notebook_connected") do result in animations working for me.