Render hvPlot in jupyter notebooks on github with bokeh backend

LinuxIsCool · April 14, 2023, 5:36am

Matplotlib and plotly can render on github from inside notebooks when they are pushed, creating impressive outputs directly available in the browser on github. It would be great if hvplot charts could be rendered inline in jupyter notebooks on github as well.

I tried wrapping plots as panels and using combinations of save and embed as described here: Display and Export — Panel v0.14.4

But over all I had no luck getting charts to render in github.

Does anyone know how this can be accomplished?

The notebook I am working in can be found here:

github.com

CommonsBuild/StakeholderStudy/blob/cd0ae5a157e913a7b3aad9e60e0cb7d7f318c65d/Notebooks/HoursTracking.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 35,
   "id": "8b6e7880-ee44-4d6e-b6a6-b0fcb0e6c030",
   "metadata": {
    "tags": []
   },
   "outputs": [
    {
     "data": {
      "application/javascript": [
       "(function(root) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  var force = true;\n",
       "\n",

This file has been truncated. show original

LinuxIsCool · December 19, 2023, 11:08pm

Any update on this? I would love to display hvplots on github with bokeh backend!

ahuang11 · December 19, 2023, 11:28pm

I think only GitHub pages work; python - Embedding interactive Bokeh or Plotly figures in Github-hosted site - Stack Overflow

Maybe https://htmlpreview.github.io/

maximlt · December 20, 2023, 12:01pm

Hey @LinuxIsCool, this is actually a limitation of Github that doesn’t render HTML/CSS/Javascript for security reasons, you can read more on their site Working with non-code files - GitHub Docs (funnily their example of what notebooks can’t be rendered well on Github is a Bokeh example). They advise using nbviewer when trying to visualize a notebook with interactive content.

Plotly offers ways to pick a different renderer (e.g. png, svg) and that can be used as a work around to save notebooks that can be visualized on Github, you can read more about it in this issue How to display plotly outputs on Github? · Issue #931 · plotly/plotly.py · GitHub. But I don’t think you can render an interactive Plotly plot on Github?

As for setting HoloViews to generate static Bokeh plots:

if I remember correctly producing PNG requires Selenium, I don’t think I’ve ever tried that but I guess the experience isn’t great (probably quite slow!)
the SVG backend of Bokeh is not yet supported in HoloViews (SVG Support for Bokeh Backend · Issue #2966 · holoviz/holoviews · GitHub)

I think overall Plotly is better as producing static representations of its interactive plots compared to Bokeh.

Marc · December 21, 2023, 6:51pm

If you are ok with using Matplotlib or Plotly backend, then its possible.

The below can probably be simplified.

LinuxIsCool · December 22, 2023, 3:44am

I find bokeh to be the most aesthetic and useful backend to work with. I really look forward to a day where I can embed static bokeh outputs into github. I’m not concerned with interactive functionality, just getting a static display would be really nice.

It’s a little surprising since the bokeh widgets have the ‘save’ tool which exports as png. I would think that would imply that there is an easy way to set outputs to be png in the notebook? I believe this is how plotly achieves rendering.

maximlt · December 22, 2023, 6:43pm

I believe the Bokeh ‘save’ tool relies on some browser capabilities and doesn’t involve Python, while what we’re trying to achieve is to create static plots running Python. Bokeh plots can be produced as PNG but you need Selenium + some browser drivers, so in the end it does rely on the browser but it’s all driven by Python. Plotly plots are generated thanks to GitHub - plotly/Kaleido: Fast static image export for web-based visualization libraries with zero dependencies that look like an interesting project. In general it’d be very cool for someone to explore that space and list the options available, and ideally do the work to improve Bokeh!