visual-studio-codejupyter-notebookbokehinteractive

bokeh: interactive slider in vscode


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?


Solution

  • 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):

    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))