Binder

Binder with Jupyter Notebook and Notebook Interact Setup

  1. Create an repositry with a requirements.txt file and jupyter notebook.
  2. Go to the binder website.
  3. Edit the fields and launch.
  4. You can now play around the jupyter notebook online with link, once it is launched. I cannot embed it in iframe.
  5. Try this link. https://mybinder.org/v2/gh/zcemycl/zcemycl.github.io/master?filepath=resources%2Fdemobinder.ipynb.

Binder with nbinteract Setup

This solves the problem of that the binder cannot be embedded in iframe.

  1. In your target repo, install nbinteract creating .nbinteract.json, 
    2. 
pip install nbinteract
nbinteract init
git add -A
git commit -m "Setup nbinteract"
git push origin master
  2. Convert the notebook into an HTML file, run command, 
    3. 
nbinteract resources/demobinder.ipynb
git add -A
git commit -m "Publish nb"
git push origin master
  3. The demo is published as this url. https://zcemycl.github.io/resources/demobinder.html
  4. To only show the output (the interactive plot), we can edit the html file. resources/demobinder.html
  5. Insert the display none style into input div.
    6. 
<div class="input" style="display:none;">
<button class="js-nbinteract-widget" style="display:none;">

References

  1. Jupyter Widgets Using Interact
  2. Embed Interactive Jupyter Notebooks in Static Websites for Free
  3. binder website
  4. Publishing a Webpage nbinteract