干货: 可视化项目实战经验分享,轻松玩转 Bokeh (建议收藏) (5)

image14-所有航线的延迟图

这个直方图非常混乱,因为有 16 家航空公司在同一图表上绘制! 如果想比较航空公司,由于信息重叠,这几乎是不可能的。 幸运的是,我们可以添加小部件(widgets)以使绘图更清晰并实现快速比较。

创建交互的小部件

一旦我们在 Bokeh 中创建基本图形,通过窗口小部件添加交互相对简单。 我们想要的第一个小部件是一个选择框,允许读者选择要显示的航空公司。 该控件将是一个复选框,允许根据需要进行尽可能多的选择,并在 Bokeh 中称为 “CheckboxGroup” 。 为了制作选择工具,我们导入 CheckboxGroup 类并使用两个参数来创建一个实例:labels 是想要在每个框旁边显示的值和 active:初始选择的值。 以下是包括所有航空公司的 CheckboxGroup 的代码。

from bokeh.models.widgets import CheckboxGroup # Create the checkbox selection element, available carriers is a # list of all airlines in the data carrier_selection = CheckboxGroup(labels=available_carriers, active = [0, 1])

image15-CheckboxGroup

Bokeh 复选框中的标签必须是字符串,而活动值是整数。 这意味着在图形中 \'AirTran Airways Corporation\' 对应数字 0 ,\'Alaska Airlines Inc.\' 对应数值 1。 当想要将所选复选框与航空公司匹配时,需要确保查找与所选整数活动值关联的字符串名称。 我们可以使用小部件的 .labels 和 .active 属性来做到这一点:

# Select the airlines names from the selection values [carrier_selection.labels[i] for i in carrier_selection.active] out: [\'AirTran Airways Corporation\', \'Alaska Airlines Inc.\']

制作复选的小部件后,需要将选定的航空公司复选框链接到图表上显示的信息。 这是使用 CheckboxGroup 的 .on_change 方法和我们定义的 update 函数完成的。 update 函数总是有三个参数:attr ,old,new 并根据选择控件更新绘图。 我们更改图表上显示的数据的方法是改变我们传递给 make_plot 函数中的 glyph(s) 的数据源。 这可能听起来有点抽象,所以这里是有一个 update 函数的例子,它改变了直方图以显示所选的航空公司:

# Update function takes three default parameters def update(attr, old, new): # Get the list of carriers for the graph carriers_to_plot = [carrier_selection.labels[i] for i in carrier_selection.active] # Make a new dataset based on the selected carriers and the # make_dataset function defined earlier new_src = make_dataset(carriers_to_plot, range_start = -60, range_end = 120, bin_width = 5) # Update the source used in the quad glpyhs src.data.update(new_src.data)

在这里,我们将检查基于 CheckboxGroup 中所选航空公司显示的航空公司列表。 此列表将传递给 make_dataset 函数,该函数返回一个新的列数据源。 我们通过调用 src.data.update 并从新数据源传入数据来更新 glyphs 中使用的源的数据。 最后,为了将 carrier_selection 小部件中的更改链接到 update 函数,我们必须使用 .on_change 方法(称为事件处理程序)。

# Link a change in selected buttons to the update function carrier_selection.on_change(\'active\', update)

只要选择或取消选择不同的航空公司,就会调用更新功能。 最终结果是在直方图上仅绘制了与所选航空公司相对应的图形 ,如下所示:

image16-交互图

更多的交互式控制

现在我们知道了创建控件的基本工作流程,可以添加更多元素。 每次,我们创建窗口小部件,编写更新函数以更改绘图上显示的数据,并使用事件处理程序将更新功能链接到窗口小部件。 我们甚至可以通过重写函数来从多个元素中使用相同的更新函数,以从小部件中提取需要的值。 为了练习,我们将添加两个额外的控件:一个 Slider,用于选择直方图的 bin 宽度;一个 RangeSlider,用于设置要显示的最小和最大延迟。 以下是制作这些小部件和新的 update 函数的代码:

# Slider to select the binwidth, value is selected number binwidth_select = Slider(start = 1, end = 30, step = 1, value = 5, title = \'Delay Width (min)\') # Update the plot when the value is changed binwidth_select.on_change(\'value\', update) # RangeSlider to change the maximum and minimum values on histogram range_select = RangeSlider(start = -60, end = 180, value = (-60, 120), step = 5, title = \'Delay Range (min)\') # Update the plot when the value is changed range_select.on_change(\'value\', update) # Update function that accounts for all 3 controls def update(attr, old, new): # Find the selected carriers carriers_to_plot = [carrier_selection.labels[i] for i in carrier_selection.active] # Change binwidth to selected value bin_width = binwidth_select.value # Value for the range slider is a tuple (start, end) range_start = range_select.value[0] range_end = range_select.value[1] # Create new ColumnDataSource new_src = make_dataset(carriers_to_plot, range_start = range_start, range_end = range_end, bin_width = bin_width) # Update the data on the plot src.data.update(new_src.data)

标准的 slider 和 range slider 如下所示:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwgdsj.html