Embedding Live Interactive Widgets in HTML via nbconvert or other methods?

[Mike Stewart]

Hello,

I am trying to include interactive widgets in an html rendering of a jupyter notebook via nbconvert:

jupyter nbconvert --to html --allow-errors --execute "$1" --output output_files/"$2"

However, the html includes only the static rendering of my widgets, even though they work totally fine in the notebook itself. I know there must be a way to embed the live versions as I've seen it around the web, but I can't for the life of me get anything to work.

I am trying to use the html as the output of an analysis I'm doing in lieu of google slides or the like, so I need to be able to easily share the output and have the interactive widgets work for various people on different machines that likely don't have jupyter notebook etc. on them.

I'm having similar difficulty getting a qgrid view of a dataframe to embed (I can't even see a static version of the grid in HTML), but this is a much less pressing problem.

Any assistance would be very much appreciated!!

Warmest regards,
-M

[Mike Stewart]

Hi all,

I just wanted to see if anyone had any input on this?

Thank you,
-M

[Tyler Drobbin]

Hi Mike, I had a similar problem recently with plotly. One thing you might want to check is that if you have any js dependencies that they are actually being loaded (either in the beginning or end of the static html that the nbconvert tool generates - also if it is being included, it may need to go at the beginning?). I think you can explicitly load js directly into the notebook with the %%javascript magic (see here: http://blog.thedataincubator.com/2015/08/embedding-d3-in-an-ipython-notebook/). Hope that helps.

Best,

Tyler

[brian...@aunalytics.com]

I ran into the exact same issue -- widgets work well with:

$ jupyter notebook

but once I convert with 

$jupyter nbconvert -to=html --ExecutePreprocessor.enabled=True test.ipynb --post serve

I do not get the widgets in the browser. 

[Phuoc Do]

You can use embed iframe, send data to iframe. Some examples:

http://nbviewer.jupyter.org/github/vidalab/vida-notebook/blob/master/visualizations.ipynb

Phuoc Do