Search code examples
jupyter-notebooksliderbokeh

Get interact sliders from jupyter notebook to work in the bokeh html file

Hello this is my first question (iam noob in everything) and iam kind of nervous not to get on your nervouse.

My overall goal is to create a 30 min lesson (part) where pupils can see:

  • interactive graphics and the super-fency CODE.

    • get attracted to become software engineers_innen or at least start to read the code. (me Measure the impact)

For this i think Jupyter notebook is the best weapon. For usability reason and different levels of interactivity i started to think about creating html-files to have remote access (my admins will kill me before letting me install sth. more on the school enviroment)

So i saw this:

from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import file_html

plot = figure()
plot.circle([1,2], [3,4])

html = file_html(plot, CDN, "my plot")

to create a html out of a bokeh figure.

But how to get nice interact sliders to this standalone html-file.

So how to (even if its non-sense) convert this example:

from ipywidgets import interact
import numpy as np

from bokeh.io import push_notebook, show, output_notebook
from bokeh.plotting import figure
output_notebook()

In [ ]:

x = np.linspace(0, 2*np.pi, 2000)
y = np.sin(x)

In [ ]:

p = figure(title="simple line example", plot_height=300, plot_width=600, y_range=(-5,5))
r = p.line(x, y, color="#2222aa", line_width=3)

In [ ]:

def update(f, w=1, A=1, phi=0):
    if   f == "sin": func = np.sin
    elif f == "cos": func = np.cos
    elif f == "tan": func = np.tan
    r.data_source.data['y'] = A * func(w * x + phi)
    push_notebook()

In [ ]:

show(p, notebook_handle=True)

In [ ]:

interact(update, f=["sin", "cos", "tan"], w=(0,100), A=(1,5), phi=(0, 20, 0.1))

Into sth. like this: https://demo.bokeh.org/sliders

Thanks for every comment. sry my english is not as good as look like, but iam not as smart as i look like

Solution

  • There's not any straightforward way that I know of to make this work in standalone HTML with Jupyter interactors. However, you can make standalone output that accomplishes this with Bokeh's own widgets:

    https://docs.bokeh.org/en/latest/docs/gallery/slider.html

    There is some ongoing work that should be out with Bokeh 2.0 that will allow Jupyter interactors to work with Bokeh server apps (not standalone output).