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:
Finally, notes at the end of this post add more details for certain steps in the process.
This is the embedded
Jupyter Notebook. To use the widgets, click first on
The original one can be found as a Gist, and in
$ jupyter nbconvert --to script notebook_name.ipynb $ pipreqs .
iframeelement is used to inserting the HTML file created with nbinteract to the static webpage. By default the
onladattribute of the
iframe. As such, the HTML code to place in the static site is:
1 2 3 4 5 6
heightof the loaded
HTMLis usually smaller than the
heightof the HTML once the widgets are loaded. Thus, the
heightmay need to be further adjusted depending on the type and quantity of widgets.
To have a better presentation of the Notebook, I changed the the class
containerin the HTML file created with nbinteract to have a