Exporting Bokeh to HTML slides

[jbednar]

I love RISE, and just gave a talk using it that's full of plots from Matplotlib (via Pandas) and Bokeh (via HoloViews): https://anaconda.org/jbednar/bednar_index_2018

I'd like to be able to export the whole thing to PDF as described at https://damianavila.github.io/RISE/usage.html#pdf-export, but none of the Bokeh plots show up in the HTML version, so I wasn't able to even get to the PDF generation.

So, focusing on generating HTML, the plots all work if I do:

jupyter nbconvert --to html Bednar_INDEX_2018.ipynb

That's a useful version, but it's in a single-page format rather than slides, which has some advantages but doesn't work as a reference for a class to go slide by slide in a printout, and it doesn't work as a backup copy of the presentation in case the live Jupyter session fails.

Unfortunately, if I instead try to make slides:

jupyter nbconvert --to slides Bednar_INDEX_2018.ipynb

none of the Bokeh plots show up. Any idea where to start debugging this? Matplotlib-based plots show up fine whether from Pandas or from HoloViews, but that's presumably because they are just PNG at that point rather than requiring JavaScript like Bokeh plots do.

[damianavila]

but that's presumably because they are just PNG at that point rather than requiring JavaScript like Bokeh plots do.

Yep, that would be my intuition as well... but not sure yet why it is working with --to html and not with --to slides since the slides template derived from the html template in nbconvert.

Maybe this can help: bokeh/bokeh#4859 (comment)

Btw, alternative, did you try the decktape-based approach: https://damianavila.github.io/RISE/usage.html#using-decktape

[jbednar]

I tried decktape a few months ago, but that was a very convoluted process and I never did get it all set up. Luckily, your suggestion did the trick -- that bokeh comment revealed that the key is not to "skip" the cell that contains hv.extension() (the HoloViews equivalent of Bokeh's output_notebook). That cell is very inviting to skip, as it contains imports and settings rather than actual content, but as long as it's not skipped, everything works! The Bokeh-based plots now show up for --to slides, and they work in the PDF output as well. There are various formatting issues in the PDF version that make it not be a very good copy of what's shown in HTML, but at least something works now! Thanks so much.

[damianavila]

but as long as it's not skipped, everything works!

Nice!

There are various formatting issues in the PDF version that make it not be a very good copy of what's shown in HTML, but at least something works now!

Can I ask you which ones?

[jbednar]

Sure. If I start with the RISE slideshow that I've put on Anaconda Cloud and look at a slide that works well in a RISE presentation:

and I do jupyter nbconvert --to slides Bednar_INDEX_2018.ipynb --post serve, I get a running server where the slides all work, but the fonts and sizes are different:

The sizes change again, a bit, when I then change the URL to http://127.0.0.1:8000/Bednar_INDEX_2018.slides.html?print-pdf:

If then print that page to PDF, I get a similar version but where the Bokeh toolbar shows up as part of a string from some url "(https://b...":

I can get rid of (http... by turning off the Bokeh toolbars, which aren't useful in an export anyway, so there's a good workaround for that issue.

The rest of the formatting issues are just to do with sizing of things; the fonts are much smaller in the PDF export than in the live presentation, and the plots are bigger, so that wider plots than the one above get cut off to the right, and taller plots get spread over two pages in the PDF. It's definitely useful to be able to have this PDF version as a shareable version of the talk, but with all the formatting changes it doesn't work for a backup copy in case of technical difficulties.

(I give a lot of talks and thus encounter all manner of technical issues, and several times I've had to resort to a PDF copy of the talk that I stashed on a web server or USB stick ahead of time. So far all my RISE presentations have worked fine on the day, but I'm worried about not having a universal backup option...)

[damianavila]

Yes, the difference between the slides exported by nbconvert and slides provided by RISE are something to wait for because they don't actually have the same set of CSS rules. You can probably add a custom.css to the exported slide to be close to the appearance of the RISE-based slide. But that is something that will take you some time... I have plans to make the slides exported by nbconvert closer to the RISE slides appearance, but I did not have time to do it yet 😉.

[jbednar]

Sounds like what I expected; thanks a lot!