CastorisCausa

Without any question, Jupyter Notebooks are an amazing medium to present and share code, equations, graphics, among others. There are multiple ways to share them: as only view in GitHub or with nbviewer; to fully interactive in Binder, where an the Notebook runs in an live environment.

In this post, I tested the embedding of an interactive Jupyter Notebook in to this website. The interaction is achieved by using ipywidgets (Interactive HTML Widgets) in the Notebook. The steps to do this are described in this post: https://elc.github.io/posts/embed-interactive-notebooks/.

Finally, notes at the end of this post add more details for certain steps in the process.

Result

This is the embedded Jupyter Notebook. To use the widgets, click first on Show Widgets.

The original one can be found as a Gist, and in

Notes

1. The list of requirements for the Jupyter Notebook can be obtained by converting the notebook to a Python script with nbconvert, and the using pipreqs.

   1 2	$ jupyter nbconvert --to script notebook_name.ipynb $ pipreqs .

2. An iframe element is used to inserting the HTML file created with nbinteract to the static webpage. By default the height of the iframe element needs to be defiend before hand, however, it can be automatically adjusted to the size of its content by adding a javascript function to the onlad attribute of the iframe. As such, the HTML code to place in the static site is:

   1 2 3 4 5 6

   <iframe src="/htmls/notebook_name.html" frameborder="0" id="iframe" onload='javascript:resizeIframe(this);'></iframe> <script language="javascript" type="text/javascript"> function resizeIframe(obj) { obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px'; } </script>

   The height of the loaded HTML is usually smaller than the height of the HTML once the widgets are loaded. Thus, the height may need to be further adjusted depending on the type and quantity of widgets.

3. To have a better presentation of the Notebook, I changed the the class container in the HTML file created with nbinteract to have a width of 100%.