How to make an interactive notebook with nbinteract
This is a quick tutorial for turning jupyter notebooks into an interactive webpage everyone can see and use. You need:
- a jupyter notebook you want to put online (which already runs locally)
- nbinteract (https://www.nbinteract.com/)
- a github (https://github.com/) account and a git repository for this project
- some way of hosting the final webpage (i.e., on the group webpage or on https://pages.github.com/)
First, create the notebook as needed. Use ipwidgets or nbinteract features for interactive sliders and user input. Commit and push the notebook to the github repository. run
nbinteract notebook.ipynb
to generate html code from this notebook, it should generate a file called notebook.html
. Edit this file and replace spec: 'yourgitusername/ReproName/master',
with spec: 'yourgitusername/ReproName/main',
. It should be right above a line containing https://mybinder.org
Otherwise, your widgets won't load properly.
Second, open the webpage locally with a browser. Change notebook and repeat until happy. Commit and push every time, otherwise the binder server doesn't update.
Once finished, the html code can be uploaded either on the group webpage with cPanel, or directly hosted on github.io.