我如何 select 基于 Bokeh 中的 RangeSlider 的数据点?
How do I select data points based with a RangeSlider in Bokeh?
我正在尝试在 Bokeh 中构建交互式图形。到目前为止,假设我有一个如下所示的热图。用简单的英语:
- 我正在使用 rect 绘制矩形以生成热图。
- 我正在添加一个 RangeSlider。
- 我附上了关于范围变化的 js_callback。
- 在自定义回调中,我能够检索范围滑块的开始和结束范围。
我不确定的是如何 select 用它做任何事情。 This link (cb_obj.selected['1d'].indices) 显示一个检索所有 selected 数据点。但是如何反其道而行之呢?
换句话说:
我如何 select 介于值 a 和 b 之间的所有矩形?
下面是我已经弄明白的代码。
from math import pi
from bokeh.io import show
from bokeh.models import ColumnDataSource, HoverTool,
LinearColorMapper, CategoricalColorMapper, ColorBar, LogColorMapper,
LogTicker
from bokeh.plotting import figure
from bokeh.models.callbacks import CustomJS
col = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
row = ['A', 'B', 'C' , 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
'N', 'O', 'P']
mapper = LogColorMapper(palette="Viridis256", low=min_value,
high=max_value)
source = ColumnDataSource(data = dict (
row = test['plate_row'],
col = test['plate_col'],
values = test['Melt Temp']))
TOOLS = "reset, tap,box_select, hover,save,pan,box_zoom,wheel_zoom"
p = figure(title="Plate Heatmap", x_range = (0.0,25.0), y_range =
list(reversed(row)),
x_axis_location="above", plot_width=650, plot_height=400,
tools=TOOLS)
r1 = p.rect(x="col", y="row", width=1, height=1,
source=source,
fill_color={'field': 'values', 'transform': mapper},
line_color=None)
callback = CustomJS(args=dict(source=source), code="""
var data = source.data;
var inds = cb_obj.selected['1d'].indices;
var lower_bound = cb_obj.start;
var upper_boudn = cb_obj.end;
// WHAT DO I DO NEXT?
source.trigger('change');
""")
range_slider = widgetbox(RangeSlider(start=min_value, end=max_value,
range= (min_value, max_value), step=0.1, title="Hit Threshold"))
range_slider.js_on_change('range', callback)
color_bar = ColorBar(color_mapper=mapper, ticker=LogTicker(),
label_standoff=12, border_line_color=None, location=
(0,0))
p.add_layout(color_bar, 'left')
layout = column(range_slider, p)
show(layout) # show the plot
虽然我无法找到设置选中或不选中的方法,但我找到了实现相同结果的方法。这可能是如何使用 Bokeh 服务器的主要示例。要实现同样的效果,需要执行以下操作:
- 用 Python 更新替换 JSCustom 回调函数
功能。 udpate 函数包含用于更新
ColumnDataSource.
- 用 on_change 事件替换 js_on_change 事件
附加到滑块。
- 将上面的代码与更新功能放在一起
"main.py" 在以应用程序命名的文件夹中。
- 使用 "bokeh serve --show INSERTAPP_NAME" 启动散景服务器。
可以找到此信息 here,它代表了部署交互式可视化的最简单方法。您的情况可能需要更复杂的部署方案。我也在研究这个问题,但这将是另一天的另一个问题。
我正在尝试在 Bokeh 中构建交互式图形。到目前为止,假设我有一个如下所示的热图。用简单的英语:
- 我正在使用 rect 绘制矩形以生成热图。
- 我正在添加一个 RangeSlider。
- 我附上了关于范围变化的 js_callback。
- 在自定义回调中,我能够检索范围滑块的开始和结束范围。
我不确定的是如何 select 用它做任何事情。 This link (cb_obj.selected['1d'].indices) 显示一个检索所有 selected 数据点。但是如何反其道而行之呢?
换句话说:
我如何 select 介于值 a 和 b 之间的所有矩形?
下面是我已经弄明白的代码。
from math import pi
from bokeh.io import show
from bokeh.models import ColumnDataSource, HoverTool,
LinearColorMapper, CategoricalColorMapper, ColorBar, LogColorMapper,
LogTicker
from bokeh.plotting import figure
from bokeh.models.callbacks import CustomJS
col = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
row = ['A', 'B', 'C' , 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
'N', 'O', 'P']
mapper = LogColorMapper(palette="Viridis256", low=min_value,
high=max_value)
source = ColumnDataSource(data = dict (
row = test['plate_row'],
col = test['plate_col'],
values = test['Melt Temp']))
TOOLS = "reset, tap,box_select, hover,save,pan,box_zoom,wheel_zoom"
p = figure(title="Plate Heatmap", x_range = (0.0,25.0), y_range =
list(reversed(row)),
x_axis_location="above", plot_width=650, plot_height=400,
tools=TOOLS)
r1 = p.rect(x="col", y="row", width=1, height=1,
source=source,
fill_color={'field': 'values', 'transform': mapper},
line_color=None)
callback = CustomJS(args=dict(source=source), code="""
var data = source.data;
var inds = cb_obj.selected['1d'].indices;
var lower_bound = cb_obj.start;
var upper_boudn = cb_obj.end;
// WHAT DO I DO NEXT?
source.trigger('change');
""")
range_slider = widgetbox(RangeSlider(start=min_value, end=max_value,
range= (min_value, max_value), step=0.1, title="Hit Threshold"))
range_slider.js_on_change('range', callback)
color_bar = ColorBar(color_mapper=mapper, ticker=LogTicker(),
label_standoff=12, border_line_color=None, location=
(0,0))
p.add_layout(color_bar, 'left')
layout = column(range_slider, p)
show(layout) # show the plot
虽然我无法找到设置选中或不选中的方法,但我找到了实现相同结果的方法。这可能是如何使用 Bokeh 服务器的主要示例。要实现同样的效果,需要执行以下操作:
- 用 Python 更新替换 JSCustom 回调函数 功能。 udpate 函数包含用于更新 ColumnDataSource.
- 用 on_change 事件替换 js_on_change 事件 附加到滑块。
- 将上面的代码与更新功能放在一起 "main.py" 在以应用程序命名的文件夹中。
- 使用 "bokeh serve --show INSERTAPP_NAME" 启动散景服务器。
可以找到此信息 here,它代表了部署交互式可视化的最简单方法。您的情况可能需要更复杂的部署方案。我也在研究这个问题,但这将是另一天的另一个问题。