Interactive Slider using Bokeh

Question

I'm trying to use a bokeh interactive slider to modify the contents of a plot, similar the example here. I have a two nested lists x and y.

I simply want the slider to change the index of the lists to plot. i.e. If the slider index = 0, then plot x[0] vs y[0], if the slider index is 1, plot x[1] vs y[1], etc...

The documentation example computes the new data on the fly, which is not feasible for the data that I need to work with.

When I run the code below, nothing shows up in the plot... I don't know javascript, so I'm guessing this is where I'm going wrong.

I'm running Python 3.5 and Bokeh 0.12. This is all run within a jupyter-notebook.

import numpy as np
from bokeh.layouts import row
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.plotting import Figure, show
from bokeh.io import output_notebook
from bokeh.resources import INLINE
output_notebook(INLINE)

x = [[x*0.05 for x in range(0, 500)],
     [x*0.05 for x in range(0, 500)]]

y = [np.sin(x[0]), 
     np.cos(x[1])]

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=400, plot_height=400)
plot.line('x'[0], 'y'[0], source=source, line_width=3, line_alpha=0.6)

callback = CustomJS(args=dict(source=source), code="""
        var data = source.get('data');
        var f = cb_obj.get('value');
        x = data['x'][f];
        y = data['y'][f];
        source.trigger('change');
    """)

slider = Slider(start=0, end=1, value=0, step=1, title="index", callback=callback)
layout = row(plot, slider)
show(layout)

@conner.xyz The data comes from a physics simulation code that is too large to include. The simple x and y arrays in the code here have the same structure. Each nested array within x and y corresponds to a different time. The data I have changes with time, so I want to be able to plot the data within x vs y and have slider control the index, which corresponds to time. Essentially, I just want to change the index of the nested array and plot its contents. i.e. If the slider index is 0, plot x[0] vs y[0] and change the slider to 1 to plot x[1] vs y[1]. — smillerc, Jul 24 '16 at 13:10
The `ColumnDataSource` data attribute should be e dict that maps string column names to 1d sequences (the data for the line). That is, passing it a nested list does not make sense in this instance. Nested lists would make sense for `mult_line`, and then you could control the visibility of each line by having a column for the line alphas that the slider updates. — bigreddot, Aug 26 '16 at 14:02

tuomastik · Accepted Answer · 2018-07-13T14:21:54.040

Instead of having a slider changing the index of the data to be plotted, you could define two ColumnDataSources: source_visible and source_available where the first one holds the data that is currently being shown in the plot and the second one acts as a data repository from where we can sample data in CustomJS callback based on user selection on the web page:

import numpy as np
from bokeh.layouts import row
from bokeh.models import ColumnDataSource, Slider, CustomJS
from bokeh.plotting import Figure, show

# Define data
x = [x*0.05 for x in range(0, 500)]
trigonometric_functions = {
    '0': np.sin(x),
    '1': np.cos(x),
    '2': np.tan(x),
    '3': np.arctan(x)}
initial_function = '0'

# Wrap the data in two ColumnDataSources
source_visible = ColumnDataSource(data=dict(
    x=x, y=trigonometric_functions[initial_function]))
source_available = ColumnDataSource(data=trigonometric_functions)

# Define plot elements
plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source_visible, line_width=3, line_alpha=0.6)
slider = Slider(title='Trigonometric function',
                value=int(initial_function),
                start=np.min([int(i) for i in trigonometric_functions.keys()]),
                end=np.max([int(i) for i in trigonometric_functions.keys()]),
                step=1)

# Define CustomJS callback, which updates the plot based on selected function
# by updating the source_visible ColumnDataSource.
slider.callback = CustomJS(
    args=dict(source_visible=source_visible,
              source_available=source_available), code="""
        var selected_function = cb_obj.value;
        // Get the data from the data sources
        var data_visible = source_visible.data;
        var data_available = source_available.data;
        // Change y-axis data according to the selected value
        data_visible.y = data_available[selected_function];
        // Update the plot
        source_visible.change.emit();
    """)

layout = row(plot, slider)
show(layout)

Keep in mind that if your data is large, it might take a while to send it all at once to the client's browser.

I have a seemingly related question and would be grateful if you could have a look. Thanks! https://stackoverflow.com/q/51234876/938408 — László, Jul 10 '18 at 08:28

Interactive Slider using Bokeh

1 Answers1

Linked