Interactively change a plot in Bokeh using sliders to select column

Question

My question is very similar to this one, but I still cannot find how to adapt the answers to my problem.

I have a dataframe with 100 columns. I want to use two sliders in Bokeh to select one column to show in the plot. I want to do this with CDSView.

Say the columns are named as such: ["11", "12", .."99"]. Plus I have one column, "x", which is the x axis and does not change. The first slider, range [0-9], should select the first digit of the column name. The second slider should select the last two digits in the same way.

This would mean that if the user selects 2, 5 on the first and second sliders, Bokeh would show a plot using the column "25" from my dataframe.

How can I do this?

Answer 1

So I've found a solution, using some snippets from other questions.

Here is a working example (Bokeh 2+), I hope somebody will find it useful in the future.

import pandas as pd
from bokeh.plotting import figure, show, ColumnDataSource
from bokeh.layouts import column
from bokeh.models import CustomJS, Slider


df = pd.DataFrame([[1,2,3,4,5],[2,20,3,10,20]], columns = ['1','21','22','31','32'])
source_available = ColumnDataSource(df)
source_visible = ColumnDataSource(data = dict(x = df['1'], y = df['21']))

p = figure(title = 'SLIMe')
p.circle('x', 'y', source = source_visible)

slider1 = Slider(title = "SlideME", value = 2, start = 2, end = 3, step = 1)
slider2 = Slider(title = "SlideME2", value = 1, start = 1, end = 2, step = 1)

slider1.js_on_change('value', CustomJS(
    args=dict(source_visible=source_visible,
              source_available=source_available,
              slider1 = slider1,
              slider2 = slider2), code="""
        var sli1 = slider1.value;
        var sli2 = slider2.value;
        var data_visible = source_visible.data;
        var data_available = source_available.data;
        data_visible.y = data_available[sli1.toString() + sli2.toString()];
        source_visible.change.emit();
    """) )
slider2.js_on_change('value', CustomJS(
    args=dict(source_visible=source_visible,
              source_available=source_available,
              slider1 = slider1,
              slider2 = slider2), code="""
        var sli1 = slider1.value;
        var sli2 = slider2.value;
        var data_visible = source_visible.data;
        var data_available = source_available.data;
        data_visible.y = data_available[sli1.toString() + sli2.toString()];
        source_visible.change.emit();
    """) )


show(column(p, slider1, slider2))