Save Jupyter Notebook with Plotly Express widgets displaying

Question

I have a Jupyter notebook (python) where I used plotly express to plot in the notebook for analysis purposes. I want to share this notebook with non-coders, and have the interactive visuals be available still - but it does not seem to work.

I tried following recommendations made here but even after saving widgets state and using nbconvert, when I open the new HTML file, the visuals are not available.

A sample line of plotting can be seen below:

import plotly_express as px
fig = px.scatter(
    df, 
    x='size', 
    y='size_y', 
    color='clients',
    hover_data=['id'], 
    marginal_y="histogram", 
    marginal_x="histogram"
)
fig.show()

Betaine

Can you share a link to your notebook? Are you using FigureWidget? If you're not, then just figure.show() to display the chart and export to HTML, works without issue for me. – Like

I cannot share the notebook fully, but added a the line of code where I plot. I used figure.show() but it gave the same results, of not displaying the figures when exported to html – Betaine

which version of Jupyter and Nbconvert are you using? what's the nbconvert command you're running? this works for me... – Like

nbconvert 5.4.1 and jupyter 1.0.0 (with Anaconda 2019.03) – Betaine

I've also received this warning when trying to convert: C:\ProgramData\Anaconda3\lib\site-packages\nbconvert\filters\datatypefilter.py:41: UserWarning: Your element with mimetype(s) dict_keys(['application/vnd.plotly.v1+json']) is not able to be represented. mimetypes=output.keys()) – Betaine

For those looking to do this with notebooks you can publicly share, you can use the intact notebook hosted on Github and then provide others with the URL pointing nbviewer at the notebook at Github. nbviewer will render the widget. Example at Github not rendering Plotly: github.com/fomightez/3Dscatter_plot-binder/blob/master/…. Example of same notebook with nbviewer pointing at Github-posted notebook with Plotly actice still: nbviewer.org/github/fomightez/3Dscatter_plot-binder/blob/master/… . – Troublemaker

Answer 1

After running plotly.offline.init_notebook_mode() in a cell, you can export the notebook with full interactivity via the file menu: File --> Export Notebook as... --> Export Notebook to HTML.

Gervais

This worked for me in Visual Studio Code interactive mode, which builds on the jupyter notebook. – Capriccioso

This works for me using plotly_express library as well. – Penury

Answer 2

I was having similar issues but with JupyterLab. Followed the instructions here: https://plot.ly/python/renderers/ .

import plotly.io as pio
pio.renderers.keys()

I had to add the following snippet to my script:

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

Exporting as HTML after that worked for me. You can read "Overriding the default renderer".

I suppose you would need

pio.renderers.default = 'notebook' 

Wormseed

Tried doing that, but am still getting an error when creating the html version: UserWarning: Your element with mimetype(s) dict_keys(['application/vnd.plotly.v1+json']) is not able to be represented. which I'm assuming has to do with the fact I can't see the figures? – Betaine

I think the renderers would be available in newer versions of plotly. The 4.0 update has some info on this: community.plot.ly/t/introducing-plotly-py-4-0-0/25639 – Wormseed

This answer produces charts in the HTML output, but the charts are static. For example, tooltips and the interaction menu do not appear. – Cowbell

Answer 3

You can specify the default renderers from plotly with:

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

or when displaying the images with:

    fig.show(renderer="pdf")

The 2 choices for you are:

• 'notebook': work well with jupyter notebook;
• 'pdf': perfect when using nbconvert to convert to HTML or LATEX

You can also join the 2 with "notebook+pdf" so you have iterative plots when running the notebook and static images when converting with nbconvert.

Shunt

Answer 4

I just had a problem that resulted in this error message.

nbconvert/filters/widgetsdatatypefilter.py:69: UserWarning: Your element with mimetype(s) dict_keys(['application/vnd.plotly.v1+json']) is not able to be represented.
  warn("Your element with mimetype(s) {mimetypes}"

Google brought me here, but I could not find a solution from the answers above.

I'm sharing the setup which caused my problem and the solution.

I was running the notebook in VS Code and then on the command line using: jupyter nbconvert

To solve it, I had to start jupyter lab and then run it and save it before running nbconvert.

Delusion