CODEWITHSUNDEEP
jupyter-notebookbokehpelican
Eyal S.
Eyal S.

Reputation: 1159

Using Bokeh, Jupyter Notebook and Pelican for interactive plots

I created a jupyter notebook with interactive plots using Bokeh. An example notebook looks like this:

import pandas as pd
import numpy as np
from bokeh.plotting import figure, show
from bokeh.charts import ColumnDataSource
from bokeh.io import output_file
from bokeh.models import HoverTool 

df = pd.DataFrame(np.random.normal(0,5,(100,2)),columns=['x','y'])

output_notebook()

source = ColumnDataSource(df)
hover = HoverTool(
        tooltips=[
            ("x", "@x"),
            ("y", "@y"),
        ]
    )
p = figure(plot_width=800, plot_height=500, tools=[hover])

p.circle('x', 'y', size=7, fill_alpha=0.5,source=source)

show(p)

Things work on the notebook itself and the figure is interactive.

I'm using pelican static website generator with the pelican-ipynb plugin (https://github.com/danielfrg/pelican-ipynb) in order to convert the notebook to html. When the html is created the Bokeh plots don't show up. I can't seem to figure out how to get an html with the interactive Bokeh plots. I inspected the html and there is nothing after the show(p) line.

How do I get the Bokeh plot work with pelican?

Upvotes: 0

Views: 1458

Answers (1)

Marcos
Marcos

Reputation: 631

Bokeh uses JavaScript for the client-side of the interactive part (BokehJS) and that JS code is not embedded when you export the notebook to HTML ouside Bokeh.

You need to export the Bokeh code to HTML using Bokeh’s own functions to generate standalone HTML.
To generate the HTML, simply add to your code:

from bokeh.resources import CDN
from bokeh.embed import file_html 
p_html = file_html(p, CDN)

For an example, see this Jupyter Notebook with your original code and the generated HTML (too long to embed it here in SO, about 45 K characters for your simple example).

Upvotes: 3

Related Questions