bokeh: interactive slider in vscode

Question

I want to add some interactive sliders for bokeh plots. This has been done using bokeh server. This file shows how this is implemented.

However, it only works in web browser, but not in Visual Studio Code, because Bokeh server doesn't yet support VScode.

Is there any other way to add interactive sliders in VSCode?

Answer 1

Yes, it is possible to make interactive sliders for bokeh plots in VS-code notebooks:

Steps:

1. Install Jupyter_Bokeh.
2. Follow the usual steps, like shown in the example, but with some modifications to make it work in VS code (in addition to working on Jupyter lab):

• Wrap the graphs with a jupyter_bokeh.widgets.BokehModel
• Instead of show, use IPython.display
• Remove push notebook

Fully functional example:

from IPython.display import display
from jupyter_bokeh.widgets import BokehModel
from bokeh.io import output_notebook
from bokeh.plotting import figure
from ipywidgets import interact
import numpy as np

output_notebook()

x = np.linspace(0, 2*np.pi, 2000)
y = np.sin(x)
fig = figure(title="simple line example", height=300, width=600, y_range=(-5,5),
           background_fill_color='#efefef')
r = fig.line(x, y, color="#8888cc", line_width=1.5, alpha=0.8)

def update(w=1):
    r.data_source.data['y'] = np.sin(w * x)

interact(update, w=(0,50))

display(BokehModel(fig))