Bokeh Python CustomJS Callback Update Select Widget to filter Scatterplot

Question

Hi my aim is to create a dropdown menu to select the week, and filter the data based on the selected week. I first find the last 5 weeks using the unique() then I use these weeks in my filtering.

What am I missing here? I can see the dropdown and the scatterplot but once I select the week I do not see anything filtered.

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

import numpy as np
import pandas as pd
index = [0,1,2,3,4,5]
w = pd.Series([202045,202031,202001,202023,202024,202006],index= index)
s = pd.Series(['S1','S2','S3','S4','S5','S6'],index= index)
t = pd.Series([2,4,6,8,10,12],index= index)
df = pd.DataFrame(s,columns = ["ABC"])
df["DFG"] =t
df["SWW"] = w

unique_WW_1,unique_WW_2, unique_WW_3, unique_WW_4, unique_WW_5  = sorted(df['SWW'].unique())[-5:]

source_unique_WW_1 = ColumnDataSource(data=df.loc[df['SWW'] == unique_WW_1])
source_unique_WW_2 = ColumnDataSource(data=df.loc[df['SWW'] == unique_WW_2])
source_unique_WW_3 = ColumnDataSource(data=df.loc[df['SWW'] == unique_WW_3])
source_unique_WW_4 = ColumnDataSource(data=df.loc[df['SWW'] == unique_WW_4])
source_unique_WW_5 = ColumnDataSource(data=df.loc[df['SWW'] == unique_WW_5])

source_ALL = ColumnDataSource(data=df)
source_fill = ColumnDataSource(data=df)

  
select = Select(title='Selected WEEK:', value='ALL', options=[str(unique_WW_1),str(unique_WW_2), str(unique_WW_3), str(unique_WW_4), str(unique_WW_5), 'ALL'])

update = CustomJS(args=dict(source_fill=source_fill, source_unique_WW_1=source_unique_WW_1,
        source_unique_WW_2=source_unique_WW_2, source_unique_WW_3 = source_unique_WW_3, source_unique_WW_4 = source_unique_WW_4, source_unique_WW_5=source_unique_WW_5, source_ALL=source_ALL,
        unique_WW_1 = unique_WW_1, unique_WW_2 = unique_WW_2, unique_WW_3 = unique_WW_3, unique_WW_4 = unique_WW_4, unique_WW_5 = unique_WW_5), code="""

    var data_unique_WW_1 = source_unique_WW_1.data;
    var data_unique_WW_2 = source_unique_WW_2.data;
    var data_unique_WW_3 = source_unique_WW_3.data;
    var data_unique_WW_4 = source_unique_WW_4.data;
    var data_unique_WW_5 = source_unique_WW_5.data;
    var String(unique_WW_5) = unique_WW_5;
    var String(unique_WW_4) = unique_WW_4;
    var String(unique_WW_3) = unique_WW_3;
    var String(unique_WW_2) = unique_WW_2;
    var String(unique_WW_1) = unique_WW_1;


    var data_ALL  = source_ALL.data;

    
    var data_fill = source_fill.data;
    
    var f = cb_obj.value;

    if (f =='ALL') {
        source_fill.data=source_ALL.data;
    }
    if (f == String(%unique_WW_1)) {
        source_fill.data=source_unique_WW_1.data;
    }
    if (f == String(%unique_WW_2)) {
        source_fill.data=source_unique_WW_2.data;
    }  
    if (f == String(%unique_WW_3)) {
        source_fill.data=source_unique_WW_3.data;
    } 
     
    if (f == String(%unique_WW_4)) {
        source_fill.data=source_unique_WW_4.data;
    } 
     
    if (f == String(%unique_WW_5)) {
        source_fill.data=source_unique_WW_5.data;
    } 
     
    source_fill.change.emit();
    """
    )

select.js_on_change('value', update)

boxwhisker = hv.BoxWhisker(df, ['ABC'], 'DFG', label='COMBINED')
boxwhisker.opts(show_legend=False, width=600)

hover = bmo.HoverTool(
    tooltips=[('ABC', '@ABC')])

scatter = hv.Points(df, ['ABC', 'DFG'], label='COMBINED' )

scatter.opts(size=7,color = 'black',
                 show_grid=True, tools = [hover])

p = boxwhisker*scatter
p.opts(show_legend=True, height = 1000,  width=1700, xrotation= 90)

p = hv.render(p)

p = column(select, p)

show(p)

I hope the standalone example addition will help, one can copy paste and run my example above.. thanks in advance if you can help with what is missing, why the selection is not working. — greencar, Dec 19 '20 at 02:23

score 0 · Answer 1 · answered Dec 19 '20 at 10:29

0

I have trouble understanding your example since it's so much code.

Hopefully this will help you a bit. I'm using hvplot which is built on top of holoviews to create a selector for the last five weeks of the year:

import pandas as pd
import holoviews as hv
hv.extension('bokeh')
import hvplot.pandas

df = pd.DataFrame({
    'SWW': [202045,202031,202001,202023,202024,202006],
    'ABC': ['S1','S2','S3','S4','S5','S6'],
    'DFG': [2,4,6,8,10,12],
})

(df
    .sort_values(by='SWW') # sort df by week
    .iloc[-5:, ]  # take only the last 5 week 
    .hvplot.scatter(
        x='ABC', 
        y='DFG', 
        groupby='SWW',  # this creates the dropdown 
        dynamic=False, 
        ylim=(0, 14),
    )
)

Resulting plot:

answered Dec 19 '20 at 10:29

Sander van den Oord

10,986
5
51
96

Thanks, I have two issues with that:1) even thought the hvplot is installed I receive the error "ImportError: cannot import name 'resolve_dependent_value" so I could not run your code 2) I had two plots merged together in my post (scatter and boxwhisker), I am not sure how to add boxwhisker in your example, as I only see scatter? – greencar Dec 19 '20 at 17:13
and 3) the hover over tool I had in my post, does that work with this? – greencar Dec 19 '20 at 18:02

Bokeh Python CustomJS Callback Update Select Widget to filter Scatterplot

1 Answers1