I hope everyone is doing well.
I am trying to develop a Bokeh interaction whereby selecting a part of a scatter plot will update a table.
I am using a lot of the sample code from the Bokeh documentation. My workplace is running an older version of Bokeh (0.12.5) so I had to change the last line in the Custom JS (from s2.change.emit() to s2.trigger('change). I then added in a few lines to create a DataTable.
I naively thought that since sourcing 's1' in the Datatable works, sourcing 's2' will allow me to link the table to the lasso select. I even tried adding in an extra trigger to the table widget in the JS callback.
Does anyone know how to create a table from a lasso select in a graph?
Code
Thanks in advance.
from random import random
from bokeh.layouts import row
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import figure, output_file, show
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
output_file("callback.html")
x = [random() for x in range(500)]
y = [random() for y in range(500)]
s1 = ColumnDataSource(data=dict(x=x, y=y))
p1 = figure(plot_width=400, plot_height=400, tools="lasso_select", title="Select Here")
p1.circle('x', 'y', source=s1, alpha=0.6)
s2 = ColumnDataSource(data=dict(x=[], y=[]))
p2 = figure(plot_width=400, plot_height=400, x_range=(0, 1), y_range=(0, 1),
tools="", title="Watch Here")
p2.circle('x', 'y', source=s2, alpha=0.6)
###New code##
columns = [TableColumn(field ="x", title = "X axis"),
TableColumn(field ="y", title = "Y axis")]
table = DataTable(source =s2, columns = columns, width =400, height = 280)
##Added in table.trigger('change') hoping this would link to the lasso select.
s1.callback = CustomJS(args=dict(s2=s2), code="""
var inds = cb_obj.selected['1d'].indices;
var d1 = cb_obj.data;
var d2 = s2.data;
d2['x'] = []
d2['y'] = []
for (i = 0; i < inds.length; i++) {
d2['x'].push(d1['x'][inds[i]])
d2['y'].push(d1['y'][inds[i]])
}
s2.trigger('change');
table.trigger('change');
""")
##having 'table' in the layout, stops the callback from working, deleting table from the layout makes it work.
layout = row(p1, p2, table)
show(layout)
Here's a working version for bokeh 1.0.4
from random import random
import bokeh.io
from bokeh.io import output_notebook, show
from bokeh.layouts import row
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import figure
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
from bokeh.resources import INLINE
bokeh.io.output_notebook(INLINE)
x = [random() for x in range(500)]
y = [random() for y in range(500)]
s1 = ColumnDataSource(data=dict(x=x, y=y))
p1 = figure(plot_width=400, plot_height=400, tools="lasso_select", title="Select Here")
p1.circle('x', 'y', source=s1, alpha=0.6)
s2 = ColumnDataSource(data=dict(x=[], y=[]))
p2 = figure(plot_width=400, plot_height=400, x_range=(0, 1), y_range=(0, 1),
tools="", title="Watch Here")
p2.circle('x', 'y', source=s2, alpha=0.6)
columns = [TableColumn(field ="x", title = "X axis"),
TableColumn(field ="y", title = "Y axis")]
table = DataTable(source =s2, columns = columns, width =155, height = 380)
s1.selected.js_on_change('indices', CustomJS(args=dict(s1=s1, s2=s2, table=table), code="""
var inds = cb_obj.indices;
var d1 = s1.data;
var d2 = s2.data;
d2['x'] = []
d2['y'] = []
for (var i = 0; i < inds.length; i++) {
d2['x'].push(d1['x'][inds[i]])
d2['y'].push(d1['y'][inds[i]])
}
s2.change.emit();
table.change.emit();
""")
)
layout = row(p1, p2, table)
show(layout)
You can even select rows/values in the table and the points in the second plot will change opacity (and you can sort the table by clicking the headers)
Right now, your callback doesn't know, what "table" is. You need to pass it as an argument to your CustomJS function:
s1.callback = CustomJS(args=dict(s2=s2, table=table), code="""
var inds = cb_obj.selected['1d'].indices;
var d1 = cb_obj.data;
var d2 = s2.data;
d2['x'] = []
d2['y'] = []
for (i = 0; i < inds.length; i++) {
d2['x'].push(d1['x'][inds[i]])
d2['y'].push(d1['y'][inds[i]])
}
s2.trigger('change');
table.trigger('change');
""")
I am trying to update Bokeh DataTable by selecting a plot.Not sure why it's not getting updated?In the code below,source_devon is ColumnDataSource for the plot- I wanted Datatable to get updated when we select a particular portion.Currently DataTable is created(initialization),but it doesn't changes on selection
from bokeh.io import curdoc
from bokeh.layouts import layout,row
from bokeh.models import CDSView,HoverTool,GroupFilter,ColumnDataSource,Button,Select,TextInput,Slider,DataTable,TableColumn,DateFormatter,LinearAxis,Range1d,CustomJS,Rect
from bokeh.plotting import figure,output_file,show
from datetime import datetime, timedelta
from bokeh.client import push_session
import pandas as pd
import numpy as np
TOOLS='pan,wheel_zoom,box_zoom,reset,tap,save,lasso_select,xbox_select'
# Select widget
ccy_options = ['AUDUSD', 'USDJPY']
menu = Select(options=['AUDUSD','USDJPY'], value='AUDUSD')
slider = Slider(start=-1000, end=10000, step=1000, value=-1000, title='Volume Cutoff')
# Function to get Order/Trade/Price Datasets
def get_combined_dataset(src,name):
df = src[(src.CCYPAIR == name)].copy()
return ColumnDataSource(data=df)
# Function to Make Plots
def make_plot(source_order):
x = 'DATE'
y = 'PRICE'
y1 = 'Volume'
size = 10
alpha = 0.5
hover = HoverTool(
tooltips = [
('OrderId', '#ORDER_ID_108'),
('Volume', '#Volume'),
('Price', '#PRICE')
]
)
view1 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='ORDER'),GroupFilter(column_name='SIDE',group='B')])
view2 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='ORDER'),GroupFilter(column_name='SIDE',group='S')])
view3 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='TRADE'),GroupFilter(column_name='SIDE',group='B')])
view4 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='TRADE'),GroupFilter(column_name='SIDE',group='S')])
view5 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='DevonTrade')])
view6 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='Prices')])
plot2 = figure(plot_width=1000, plot_height=300, tools=[hover, TOOLS],
title='Agg. Position Snapshot for Devon',
x_axis_label='Date', y_axis_label='Price',x_axis_type="datetime")
plot = figure(plot_width=1000, plot_height=300,tools=TOOLS,x_axis_type="datetime",title='Order/Execution Snapshot with Price Levels')
plot.circle(x=x,y=y,source=source_order,view=view1,alpha=0.6,color='blue')
plot.circle(x=x,y=y,source=source_order,view=view2,alpha=0.6,color='red')
plot.triangle(x=x,y=y,source=source_order,view=view3,alpha=0.6,color='blue')
plot.triangle(x=x,y=y,source=source_order,view=view4,alpha=0.6,color='red')
plot.line(x=x,y=y,source=source_order,view=view6,color='green')
plot2.line(x=x,y=y1,source=source_order,view=view5,color='blue')
plot.legend.location = 'top_left'
return plot,plot2
def make_table(source):
columns = [
TableColumn(field='DATE', title="DATE", formatter=DateFormatter()),
TableColumn(field='CCYPAIR', title="CCYPAIR"),
TableColumn(field='SIDE', title="SIDE"),
TableColumn(field='PRICE', title="PRICE"),
TableColumn(field='TYPE', title="TYPE"),
TableColumn(field='Volume', title="Volume"),
TableColumn(field='ORDER_ID_108', title="ORDERID"),
]
data_table = DataTable(source=source, columns=columns, width=1000, height=200)
return data_table
def update_plot(attrname, old, new):
newccy = menu.value
newvalue = slider.value
src_data_table = get_combined_dataset(Combined,newccy)
DisplayData.data.update(src_data_table.data)
def update_plot(attrname, old, new):
newccy = menu.value
newvalue = slider.value
src_data_table = get_combined_dataset(Combined,newccy)
DisplayData.data.update(src_data_table.data)
def selection_change(attrname, old, new):
data = get_all_dataset(Combined,menu.value)
selected = DisplayData.selected['1d']['indices']
if selected:
data = data.iloc[selected, :]
update_datatable(data)
def update_datatable(data):
src_data_table = get_combined_dataset(data,menu.value)
s2.data.update(src_data_table.data)
# Input Files
date_today = datetime.now()
days = pd.date_range(date_today, date_today + timedelta(5), freq='D')
Combined1 = {'DATE': days,
'CCYPAIR': ['USDJPY', 'USDJPY', 'USDJPY','USDJPY', 'USDJPY', 'USDJPY'],
'SIDE' : ['B', 'B', 'B','B', 'B', 'B'],
'PRICE': [100.00, 200.00, 300.00,100.00, 200.00, 300.00],
'TYPE' : ['ORDER', 'ORDER', 'ORDER','DevonTrade', 'DevonTrade', 'DevonTrade'],
'Volume': [100, 200, 300, 100, 200, 300],
'ORDER_ID_108': [111,222,333,111,222,333]
}
Combined = pd.DataFrame(Combined1)
DisplayData = get_combined_dataset(Combined,menu.value)
plot,plot2 = make_plot(DisplayData)
menu.on_change('value', update_plot)
plot.x_range = plot2.x_range
s2 = ColumnDataSource(data=dict(DATE=[],CCYPAIR=[],SIDE=[],PRICE=[],TYPE=[],Volume=[],ORDER_ID_108=[]))
columns = [
TableColumn(field='DATE', title="DATE", formatter=DateFormatter()),
TableColumn(field='CCYPAIR', title="CCYPAIR"),
TableColumn(field='SIDE', title="SIDE"),
TableColumn(field='PRICE', title="PRICE"),
TableColumn(field='TYPE', title="TYPE"),
TableColumn(field='Volume', title="Volume"),
TableColumn(field='ORDER_ID_108', title="ORDER_ID_108")
]
data_table = DataTable(source=s2,columns=columns,width=1000, height=200)
layout = layout([menu],
[plot],
[plot2],
[data_table])
curdoc().add_root(layout)
DisplayData.on_change('selected', selection_change)
Your main issue is that the source you are updating does not have the same fields as the source containing the original data. In your callback you are trying to access d2['DATES'] and d2['PRICES'], however you defined the fields as 'x' and 'y'. See below code which has corrected this. I also defined the plotting ranges of the second plot so the data will appear.
from bokeh.io import curdoc
from bokeh.layouts import layout,row
from bokeh.models import HoverTool,ColumnDataSource,Button,Select,TextInput,Slider,DataTable,TableColumn,DateFormatter,LinearAxis,Range1d,CustomJS,Rect
from bokeh.plotting import figure,output_file,show
from datetime import datetime, timedelta
from bokeh.client import push_session
import pandas as pd
import numpy as np
TOOLS='pan,wheel_zoom,box_zoom,reset,tap,save,lasso_select,xbox_select'
# Select widget
menu = Select(options=['AUDUSD','USDJPY'], value='USDJPY')
# Function to get Order/Trade/Price Datasets
def get_order_dataset(src,name):
df = src[(src.CCYPAIR == name) & (src.TYPE == 'ORDER') & (src.SIDE == 'B')].copy()
return ColumnDataSource(data=df)
# Function to Make Plots
def make_plot(source_order):
x = 'DATE'
y = 'PRICE'
size = 10
alpha = 0.5
hover = HoverTool(
tooltips = [
('OrderId', '#ORDER_ID_108'),
('Volume', '#Volume'),
('Price', '#PRICE')
]
)
plot = figure(plot_width=1000, plot_height=300, tools=[hover, TOOLS],
title='Order/Execution Snapshot with Price Levels',
x_axis_label='Date', y_axis_label='Price',x_axis_type="datetime",active_drag="xbox_select")
plot.circle(x=x, y=y, size=size, alpha=alpha, color='blue',
legend='Orders', source=source_order,selection_color="orange")
plot.legend.location = 'top_left'
return plot
def update_plot(attrname, old, new):
newccy = menu.value
src_order = get_order_dataset(Combined,newccy)
source_order.data.update(src_order.data)
date_today = datetime.now()
days = pd.date_range(date_today, date_today + timedelta(2), freq='D')
Combined1 = {'DATE': days,
'CCYPAIR': ['USDJPY', 'USDJPY', 'USDJPY'],
'SIDE' : ['B', 'B', 'B'],
'PRICE': [100.00, 200.00, 300.00],
'TYPE' : ['ORDER', 'ORDER', 'ORDER'],
'Volume': [100, 200, 300],
'ORDER_ID_108': [111,222,333]
}
Combined = pd.DataFrame(Combined1)
source_order = get_order_dataset(Combined,menu.value)
plot = make_plot(source_order)
menu.on_change('value', update_plot)
s2 = ColumnDataSource(data=dict(DATE=[], PRICE=[]))
p2 = figure(plot_width=1000, plot_height=400,
tools="", title="Watch Here",x_axis_type="datetime", y_range=(90,310),x_range=(days[0],days[-1]))
p2.circle('DATE', 'PRICE', source=s2, alpha=0.6, size=10)
source_order.callback = CustomJS(args=dict(s2=s2), code="""
var inds = cb_obj.selected['1d'].indices;
console.log(inds)
var d1 = cb_obj.data;
var d2 = s2.data;
d2['DATE'] = []
d2['PRICE'] = []
for (i = 0; i < inds.length; i++) {
d2['DATE'].push(d1['DATE'][inds[i]])
d2['PRICE'].push(d1['PRICE'][inds[i]])
}
s2.change.emit();""")
layout = layout([menu],
[plot],
[p2])
curdoc().add_root(layout)
from bokeh.io import curdoc
from bokeh.layouts import layout,row
from bokeh.models import CDSView,HoverTool,GroupFilter,ColumnDataSource,Button,Select,TextInput,Slider,DataTable,TableColumn,DateFormatter,LinearAxis,Range1d,CustomJS,Rect
from bokeh.plotting import figure,output_file,show
from datetime import datetime, timedelta
from bokeh.client import push_session
import pandas as pd
import numpy as np
TOOLS='pan,wheel_zoom,box_zoom,reset,tap,save,lasso_select,xbox_select'
# Select widget
ccy_options = ['AUDUSD', 'USDJPY']
menu = Select(options=['AUDUSD','USDJPY'], value='AUDUSD')
slider = Slider(start=-1000, end=10000, step=1000, value=-1000, title='Volume Cutoff')
# Function to get Order/Trade/Price Datasets
def get_combined_dataset(src,name):
df = src[(src.CCYPAIR == name)].copy()
return ColumnDataSource(data=df)
# Function to Make Plots
def make_plot(source_order):
x = 'DATE'
y = 'PRICE'
y1 = 'Volume'
size = 10
alpha = 0.5
hover = HoverTool(
tooltips = [
('OrderId', '#ORDER_ID_108'),
('Volume', '#Volume'),
('Price', '#PRICE')
]
)
view1 = CDSView(source=source_order, filters= [GroupFilter(column_name='TYPE',group='ORDER'),GroupFilter(column_name='SIDE',group='B')])
view2 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='ORDER'),GroupFilter(column_name='SIDE',group='S')])
view3 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='TRADE'),GroupFilter(column_name='SIDE',group='B')])
view4 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='TRADE'),GroupFilter(column_name='SIDE',group='S')])
view5 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='DevonTrade')])
view6 = CDSView(source=source_order, filters=[GroupFilter(column_name='TYPE',group='Prices')])
plot2 = figure(plot_width=1000, plot_height=300, tools=[hover, TOOLS],
title='Agg. Position Snapshot for Devon',
x_axis_label='Date', y_axis_label='Price',x_axis_type="datetime")
plot = figure(plot_width=1000, plot_height=300,tools=TOOLS,x_axis_type="datetime",title='Order/Execution Snapshot with Price Levels')
plot.circle(x=x,y=y,source=source_order,view=view1,alpha=0.6,color='blue')
plot.circle(x=x,y=y,source=source_order,view=view2,alpha=0.6,color='red')
plot.triangle(x=x,y=y,source=source_order,view=view3,alpha=0.6,color='blue')
plot.triangle(x=x,y=y,source=source_order,view=view4,alpha=0.6,color='red')
plot.line(x=x,y=y,source=source_order,view=view6,color='green')
plot2.line(x=x,y=y1,source=source_order,view=view5,color='blue')
plot.legend.location = 'top_left'
return plot,plot2
def make_table(source):
columns = [
TableColumn(field='DATE', title="DATE", formatter=DateFormatter()),
TableColumn(field='CCYPAIR', title="CCYPAIR"),
TableColumn(field='SIDE', title="SIDE"),
TableColumn(field='PRICE', title="PRICE"),
TableColumn(field='TYPE', title="TYPE"),
TableColumn(field='Volume', title="Volume"),
TableColumn(field='ORDER_ID_108', title="ORDERID"),
]
data_table = DataTable(source=source, columns=columns, width=1000, height=200)
return data_table
def update_plot(attrname, old, new):
newccy = menu.value
newvalue = slider.value
src_data_table = get_combined_dataset(Combined,newccy)
DisplayData.data.update(src_data_table.data)
def update_plot(attrname, old, new):
newccy = menu.value
newvalue = slider.value
src_data_table = get_combined_dataset(Combined,newccy)
DisplayData.data.update(src_data_table.data)
def selection_change(attrname, old, new):
data = get_all_dataset(Combined,menu.value)
selected = DisplayData.selected['1d']['indices']
if selected:
data = data.iloc[selected, :]
update_datatable(data)
def update_datatable(data):
src_data_table = get_combined_dataset(data,menu.value)
s2.data.update(src_data_table.data)
# Input Files
date_today = datetime.now()
days = pd.date_range(date_today, date_today + timedelta(5), freq='D')
Combined1 = {'DATE': days,
'CCYPAIR': ['USDJPY', 'USDJPY', 'USDJPY','USDJPY', 'USDJPY', 'USDJPY'],
'SIDE' : ['B', 'B', 'B','B', 'B', 'B'],
'PRICE': [100.00, 200.00, 300.00,100.00, 200.00, 300.00],
'TYPE' : ['ORDER', 'ORDER', 'ORDER','DevonTrade', 'DevonTrade', 'DevonTrade'],
'Volume': [100, 200, 300, 100, 200, 300],
'ORDER_ID_108': [111,222,333,111,222,333]
}
Combined = pd.DataFrame(Combined1)
DisplayData = get_combined_dataset(Combined,menu.value)
plot,plot2 = make_plot(DisplayData)
menu.on_change('value', update_plot)
plot.x_range = plot2.x_range
s2 = ColumnDataSource(data=dict(DATE=[],CCYPAIR=[],SIDE=[],PRICE=[],TYPE= [],Volume=[],ORDER_ID_108=[]))
columns = [
TableColumn(field='DATE', title="DATE", formatter=DateFormatter()),
TableColumn(field='CCYPAIR', title="CCYPAIR"),
TableColumn(field='SIDE', title="SIDE"),
TableColumn(field='PRICE', title="PRICE"),
TableColumn(field='TYPE', title="TYPE"),
TableColumn(field='Volume', title="Volume"),
TableColumn(field='ORDER_ID_108', title="ORDER_ID_108")
]
data_table = DataTable(source=s2,columns=columns,width=1000, height=200)
layout = layout([menu],
[plot],
[plot2],
[data_table])
curdoc().add_root(layout)
DisplayData.on_change('selected', selection_change)
I'm trying to create a bokeh plot of the US States, and color each of the state according to some data. Now using this tutorial I managed to create this, but I also want to enhance it, and add a slider to it, to change the values displayed. For example like displaying separate years.
With the help of this tutorial, I managed to add the slider, and the underlying data does change, according to the hover text, but the colors aren't recalculated, and so the visual representation does not match the values.
This is the code I've used, from a Jupyter notebook, so anybody who wants to try can reproduce
from bokeh.io import show, output_notebook
from bokeh.models import (
ColumnDataSource,
HoverTool,
LogColorMapper,
Range1d, CustomJS, Slider
)
from bokeh.palettes import Inferno256 as palette
from bokeh.plotting import figure
from bokeh.layouts import row, widgetbox
from bokeh.sampledata.us_counties import data as counties
from bokeh.sampledata.us_states import data as states
from bokeh.sampledata.unemployment import data as unemployment
import pandas as pd
import random
output_notebook()
palette.reverse()
states_accumulated ={}
available_state_codes = states.keys()
for key, value in counties.items():
state_name = value["state"].upper()
if state_name in states.keys() and "number" not in states[state_name]:
states[state_name]["number"] = key[0]
for key,state in states.items():
state["code"] = key
state_list = []
for key,state in states.items():
state_list.append(state)
unemployment_transf = []
for key,value in unemployment.items():
unemployment_transf.append({
"State":key[0],
"County":key[1],
"Value":value
})
unemp_df = pd.DataFrame(unemployment_transf)
unemp_sum = unemp_df.groupby("State").mean()["Value"]
unemp_sum = unemp_sum.sort_index()
unemp_sum_flat = {key:value for key, value in unemp_sum.items()}
for state in state_list:
state["value"] = unemp_sum_flat[state["number"]]
state_df = pd.DataFrame(state_list)
color_mapper = LogColorMapper(palette=palette)
state_xy = (list(state_df["lons"].values),list(state_df["lats"].values))
max_x = max([max(l) for l in state_xy[0]])
max_y = max([max(l) for l in state_xy[1]])
min_x = min([min(l) for l in state_xy[0]])
min_y = min([min(l) for l in state_xy[1]])
data=dict(
x=state_xy[0],
y=state_xy[1],
name=list(state_df["name"].values),
used = list(state_df["value"].values)
)
data['1999'] = list(state_df["value"].values)
data['2000'] = [random.randrange(0,10) for i in range(len(state_xy[0]))]
source = ColumnDataSource(data)
TOOLS = "pan,wheel_zoom,reset,hover,save"
p = figure(
title="States", tools=TOOLS,
x_axis_location=None, y_axis_location=None
)
p.width=450
p.height = 450
p.x_range= Range1d(-170,-60)
p.y_range = Range1d(min_y-10,max_y+10)
p.grid.grid_line_color = None
renderer = p.patches('x', 'y', source=source,
fill_color={'field': 'used', 'transform': color_mapper},
fill_alpha=0.7, line_color="white", line_width=0.5)
hover = p.select_one(HoverTool)
hover.point_policy = "follow_mouse"
hover.tooltips = [
("Name", "#name"),
("Unemployment rate)", "#used%"),
("(Long, Lat)", "($x, $y)"),
]
callback = CustomJS(args=dict(source=source,plot=p,color_mapper = color_mapper,renderer = renderer), code="""
var data = source.data;
var year = year.value;
used = data['used']
should_be = data[String(year)]
for (i = 0; i < should_be.length; i++) {
used[i] = should_be[i];
}
""")
year_slider = Slider(start=1999, end=2000, value=1999, step=1,
title="year", callback=callback)
callback.args["year"] = year_slider
layout = row(
p,
widgetbox(year_slider),
)
show(layout)
Sample images of the plot:
What I would like to accomplish, is that when I change the slider, the colors on the plot should change. Now I think the JS callback should call some kind of redraw or recalculate, but I haven't found any documentation about it. Is there a way to do this?
append source.change.emit() to the Javascipt code to trigger the change event.
Appending source.trigger("change"); to the CustomJS seems to solve the problem, now as the slider changes, the colors change.
If I have a scatter plot in bokeh and I've enabled the Box Select Tool, suppose I select a few points with the Box Select Tool. How can I access the (x,y) position location information of the points that I've selected?
%matplotlib inline
import numpy as np
from random import choice
from string import ascii_lowercase
from bokeh.models.tools import *
from bokeh.plotting import *
output_notebook()
TOOLS="pan,wheel_zoom,reset,hover,poly_select,box_select"
p = figure(title = "My chart", tools=TOOLS)
p.xaxis.axis_label = 'X'
p.yaxis.axis_label = 'Y'
source = ColumnDataSource(
data=dict(
xvals=list(range(0, 10)),
yvals=list(np.random.normal(0, 1, 10)),
letters = [choice(ascii_lowercase) for _ in range(10)]
)
)
p.scatter("xvals", "yvals",source=source,fill_alpha=0.2, size=5)
select_tool = p.select(dict(type=BoxSelectTool))[0]
show(p)
# How can I know which points are contained in the Box Select Tool?
I can't call the "callback" attribute and the "dimensions" attribute just returns a list ["width", "height"]. If I can just get the dimensions and the location of the Selected Box, I can figure out which points are in my dataset from there.
You can use a callback on the ColumnDataSource that updates a Python variable with the indices of the selected data:
%matplotlib inline
import numpy as np
from random import choice
from string import ascii_lowercase
from bokeh.models.tools import *
from bokeh.plotting import *
from bokeh.models import CustomJS
output_notebook()
TOOLS="pan,wheel_zoom,reset,hover,poly_select,box_select"
p = figure(title = "My chart", tools=TOOLS)
p.xaxis.axis_label = 'X'
p.yaxis.axis_label = 'Y'
source = ColumnDataSource(
data=dict(
xvals=list(range(0, 10)),
yvals=list(np.random.normal(0, 1, 10)),
letters = [choice(ascii_lowercase) for _ in range(10)]
)
)
p.scatter("xvals", "yvals",source=source,fill_alpha=0.2, size=5)
select_tool = p.select(dict(type=BoxSelectTool))[0]
source.callback = CustomJS(args=dict(p=p), code="""
var inds = cb_obj.get('selected')['1d'].indices;
var d1 = cb_obj.get('data');
console.log(d1)
var kernel = IPython.notebook.kernel;
IPython.notebook.kernel.execute("inds = " + inds);
"""
)
show(p)
Then you can access the desired data attributes using something like
zip([source.data['xvals'][i] for i in inds],
[source.data['yvals'][i] for i in inds])
Here is a working example with Python 3.7.5 and Bokeh 1.4.0
public github link to this jupyter notebook:
https://github.com/surfaceowl-ai/python_visualizations/blob/master/notebooks/bokeh_save_linked_plot_data.ipynb
environment report:
virtual env python version: Python 3.7.5
virtual env ipython version: 7.9.0
watermark package reports:
bokeh 1.4.0
jupyter 1.0.0
numpy 1.17.4
pandas 0.25.3
rise 5.6.0
watermark 2.0.2
# Generate linked plots + TABLE displaying data + save button to export cvs of selected data
from random import random
from bokeh.io import output_notebook # prevent opening separate tab with graph
from bokeh.io import show
from bokeh.layouts import row
from bokeh.layouts import grid
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.models import Button # for saving data
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
from bokeh.models import HoverTool
from bokeh.plotting import figure
# create data
x = [random() for x in range(500)]
y = [random() for y in range(500)]
# create first subplot
plot_width = 400
plot_height = 400
s1 = ColumnDataSource(data=dict(x=x, y=y))
fig01 = figure(
plot_width=plot_width,
plot_height=plot_height,
tools=["lasso_select", "reset", "save"],
title="Select Here",
)
fig01.circle("x", "y", source=s1, alpha=0.6)
# create second subplot
s2 = ColumnDataSource(data=dict(x=[], y=[]))
# demo smart error msg: `box_zoom`, vs `BoxZoomTool`
fig02 = figure(
plot_width=400,
plot_height=400,
x_range=(0, 1),
y_range=(0, 1),
tools=["box_zoom", "wheel_zoom", "reset", "save"],
title="Watch Here",
)
fig02.circle("x", "y", source=s2, alpha=0.6, color="firebrick")
# create dynamic table of selected points
columns = [
TableColumn(field="x", title="X axis"),
TableColumn(field="y", title="Y axis"),
]
table = DataTable(
source=s2,
columns=columns,
width=400,
height=600,
sortable=True,
selectable=True,
editable=True,
)
# fancy javascript to link subplots
# js pushes selected points into ColumnDataSource of 2nd plot
# inspiration for this from a few sources:
# credit: https://stackoverflow.com/users/1097752/iolsmit via: https://stackoverflow.com/questions/48982260/bokeh-lasso-select-to-table-update
# credit: https://stackoverflow.com/users/8412027/joris via: https://stackoverflow.com/questions/34164587/get-selected-data-contained-within-box-select-tool-in-bokeh
s1.selected.js_on_change(
"indices",
CustomJS(
args=dict(s1=s1, s2=s2, table=table),
code="""
var inds = cb_obj.indices;
var d1 = s1.data;
var d2 = s2.data;
d2['x'] = []
d2['y'] = []
for (var i = 0; i < inds.length; i++) {
d2['x'].push(d1['x'][inds[i]])
d2['y'].push(d1['y'][inds[i]])
}
s2.change.emit();
table.change.emit();
var inds = source_data.selected.indices;
var data = source_data.data;
var out = "x, y\\n";
for (i = 0; i < inds.length; i++) {
out += data['x'][inds[i]] + "," + data['y'][inds[i]] + "\\n";
}
var file = new Blob([out], {type: 'text/plain'});
""",
),
)
# create save button - saves selected datapoints to text file onbutton
# inspriation for this code:
# credit: https://stackoverflow.com/questions/31824124/is-there-a-way-to-save-bokeh-data-table-content
# note: savebutton line `var out = "x, y\\n";` defines the header of the exported file, helpful to have a header for downstream processing
savebutton = Button(label="Save", button_type="success")
savebutton.callback = CustomJS(
args=dict(source_data=s1),
code="""
var inds = source_data.selected.indices;
var data = source_data.data;
var out = "x, y\\n";
for (i = 0; i < inds.length; i++) {
out += data['x'][inds[i]] + "," + data['y'][inds[i]] + "\\n";
}
var file = new Blob([out], {type: 'text/plain'});
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(file);
elem.download = 'selected-data.txt';
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
""",
)
# add Hover tool
# define what is displayed in the tooltip
tooltips = [
("X:", "#x"),
("Y:", "#y"),
("static text", "static text"),
]
fig02.add_tools(HoverTool(tooltips=tooltips))
# display results
# demo linked plots
# demo zooms and reset
# demo hover tool
# demo table
# demo save selected results to file
layout = grid([fig01, fig02, table, savebutton], ncols=3)
output_notebook()
show(layout)
# things to try:
# select random shape of blue dots with lasso tool in 'Select Here' graph
# only selected points appear as red dots in 'Watch Here' graph -- try zooming, saving that graph separately
# selected points also appear in the table, which is sortable
# click the 'Save' button to export a csv
# TODO: export from Bokeh to pandas dataframe