Plotly graphs in "Jupyter Books", possible?

Has anyone tried this, or would it be even feasible?

Jupyter Books intro: https://jupyter.org/jupyter-book/intro.html

Example: https://jupyter.org/jupyter-book/features/notebooks.html

@caiyij I have done offline plots before in Jupyter Notebooks before, and had great success at it within the Jupyter Notebook environment. It is in Jupyter Books that I am having trouble (click links above). Jupyter Books are an HTML rendered version of Jupyter Notebooks, with an interactive cells option.

In a Jupyter Book, my plotly output is a white canvas.

Working notbook in Jupyter Notebook (MyBinder): https://mybinder.org/v2/gh/mathieuboudreau/introML-book/master?filepath=content%2F01%2Fmvp_sos.ipynb

Jupyter Book of same notbook resulting in blank canvas (must run all cells in order, some take a little bit more time than others) : https://mathieuboudreau.github.io/introML-book/01/mvp_sos.html

Image of both outputs after running all cells

Jupyter Notebook:

Jupyter Book:

Sorry I thought you meant Jupiter notebook. Just want to let you know that I opened both the link and they are both blank. Also there’s similar problem for Jupiter notebook in Github as well, not sure it this is related: https://github.com/plotly/plotly.py/issues/396 . When I open the “Working notbook in Jupyter Notebook (MyBinder)”:

@caiyij Sorry for not being clear. Yes, it will be blank by default when you first open it because MyBinder sets all jupyter notebooks to “Not Trusted” (see top right of your pic), meaning that javascript won’t run automatically. If you run all the cells (under Kernel I think), then after a few minutes, the figure will generate. This is not the case if you run all the cells in the other links.

Hi @mathieuboudreau,

I’ve not worked with Jupyter Books before, but it looks really interesting! My guess is that the plotly.js library (which is injected into the notebook during init_notebook_mode) is not being preserved in the Jupyter Book conversion process.

Do you get any browser console errors when you open the Jupyter Book output with the blank plot?

Does Jupyter Book provide any options for adding custom HTML/JavaScript snippets to the output? If so, we might be able to tell it to load plotly.js by some other method.

-Jon

1 Like

Thanks for the advice/hint @jmmease ! I will look into that with them.

Also see this Github issue: https://github.com/jupyter/jupyter-book/issues/93

We were able to get something running (a plotly figure on my page), but by not using “offline” mode and instead calling pl.tools.set_credentials_file. This has two caveats. 1) it still doesn’t show on first load, and 2) this implementation requires that Plotly secret keys are executed in a call in the first cell, so obviously I can’t commit and push them in my public Github repo where the Jekyll site built and is hosted. I know that these credentials can be set in a file, but since our site is hosted by GitHub, the keys would still be public. Specific details on how to replicate this are in the above link.

I will still explore what you suggested though.

SOLVED.

I found out by looking at the Plotly documentation that while plotly.offline.iplot() does not output HTML, plotly.offline.plot() does by saving it to a file. So by then loading that file with display(HTML("FILENAME.html")) , it worked, meaning 1) the plot is now displayed in the Jupyter Book when it is first loaded (live demo), 2) the Plotly HTML is loaded/displayed correctly by running the inline code in the Jupyter Book,and 3) credentials aren’t needed (still in Plotly offline mode), so no worries about public keys being shared.

e.g. this line:

iplot(fig, filename = 'figure_1.html', config = config)

was replaced with these lines:


plot(fig, filename = 'figure_1.html', config = config)
display(HTML('figure_1.html'))

Note that the Plotly figure does not display when MyBinder Jupyter Notebook is first opened, but it didn’t for iplot either. It also does not display using the above commands when the cells of the Jupyter Notebook are run, so iplot... should be used instead (either an if…else, or have it commented it out and instruct the user to switch them).

Thanks to all the folks how gave some input here and on the Jupyter Book GitHub issue

2 Likes