用交互组件(ipywidgets)“盘活”Jupyter Notebook(下)

AiTechYun

发布于 2019-05-15 18:07:22

2.8K0

发布于 2019-05-15 18:07:22

文章被收录于专栏：ATYUN订阅号

编译 | sunlei

发布 | ATYUN订阅号

昨天我们讲到了处理小部件事件和控制部件的输出，今天我们讲剩下的部分。

传送门：用交互组件(ipywidgets)“盘活”Jupyter Notebook(上)

4、链接小部件输出

继续前面的例子，假设我们也希望按目的过滤。

如果我们继续添加另一个下拉列表，我们将很快意识到数据帧只响应最近更改的下拉列表中的过滤器。我们需要做的是将两者联系在一起，这样它就可以在两个价值观（即年和目标）上发挥作用。

让我们看看它应该如何工作：

首先，我们需要两个下拉列表的公共输出：

1output = widgets.Output()

以下是两个下拉列表：

1dropdown_year = widgets.Dropdown(options =    unique_sorted_values_plus_ALL(df_london.year))dropdown_purpose = widgets.Dropdown(options = unique_sorted_values_plus_ALL(df_london.purpose))

然后我们创建一个新的函数common_filtering，它将由两个事件处理程序调用。此函数将在数据框上应用一个过滤器，用于年份和目的：

我们正在清除输出，然后检查是否所有的值，在这种情况下，我们考虑删除相应的过滤器。当两个过滤器都存在时，在else语句中，我们在两个过滤器中应用&操作。最后，我们捕获输出：

 1def common_filtering(year， purpose)：
 2output.clear_output()
 3
 4if (year == ALL) & (purpose == ALL)：
 5common_filter = df_london
 6elif (year == ALL)：
 7common_filter = df_london[df_london.purpose == purpose]
 8elif (purpose == ALL)：
 9common_filter = df_london[df_london.year == year]
10else：
11common_filter = df_london[(df_london.year == year) &
12(df_london.purpose == purpose)]
13
14with output：
15display(common_filter)
16

我们将事件处理程序修改为调用common_filtering函数并传递更改。新值以及其他下拉框的当前值：

1def dropdown_year_eventhandler(change)：
2common_filtering(change.new， dropdown_purpose.value)def dropdown_purpose_eventhandler(change)：
3common_filtering(dropdown_year.value， change.new)
4

我们将处理程序绑定到下拉列表，就这样！

1dropdown_year.observe(
2dropdown_year_eventhandler， names='value')dropdown_purpose.observe(
3dropdown_purpose_eventhandler， names='value')

代码片段：

基于两个值筛选数据帧

下面是演示：

演示：基于两个值筛选数据帧

5、创建仪表盘

到目前为止，我们已经通过过滤和显示伦敦数据集的数据为仪表盘奠定了基础。我们将根据用户选择的值对数值着色。

一个有用的数字小部件是boundedfloatText；我们将给它一个最小值、最大值和初始值，以及增量步骤。

1bounded_num = widgets.BoundedFloatText(
2min=0， max=100000， value=5， step=1)

为了给数据帧单元上色，我们将定义此功能：

1def colour_ge_value(value， comparison)：
2if value >= comparison：
3return 'color： red'
4else：
5return 'color： black'
6

现在，我们将把常用的_过滤功能修改为：

添加新的num输入参数：

1def common_filtering(year， purpose， num)：
2

通过调用三个数值列的colour_ge_value函数来应用样式：

1with output：
2display(common_filter
3.style.applymap(
4lambda x： colour_ge_value(x， num)，
5subset=['visits'，'spend'， 'nights']))

需要调整现有的事件处理程序以传递绑定的_num.value：

1def dropdown_year_eventhandler(change)：
2common_filtering(change.new， dropdown_purpose.value，
3bounded_num.value)def dropdown_purpose_eventhandler(change)：
4common_filtering(dropdown_year.value， change.new，
5bounded_num.value)
6

最后，我们将插入新小部件的事件处理程序：

1def bounded_num_eventhandler(change)：
2common_filtering(dropdown_year.value， dropdown_purpose.value，
3change.new)bounded_num.observe(bounded_num_eventhandler， names='value')

代码片段：

颜色数据框值

下面是演示：

演示：颜色数据框值

绘图

接下来，我们将添加一个新的图表来绘制访问次数的基本单变量密度（kde→内核密度估计）。我们将使用Seaborn，所以让我们导入库：

1import seaborn as sns
2import matplotlib.pyplot as plt

继续前面的用例，我们将捕获一个新的输出变量中的绘图：

1plot_output = widgets.Output()

现在，我们将修改公共过滤函数以绘制新图表：

首先我们清除输出：

1plot_output.clear_output()

然后我们通过传递访问次数来调用seaborn的kdeplot方法：

1with plot_output：
2sns.kdeplot(common_filter['visits']， shade=True)
3plt.show()

最后，我们唯一需要做的就是在一个新的单元格中显示输出：

1display(output)
2display(plot_output)

代码片段：

控制图

下面是演示：

演示：控制图

6、仪表盘布局

到目前为止，我们的用户界面是功能性的，但是占用了大量的空间。

我们将首先水平排列输入小部件。HBox将从左到右依次添加小部件：

1input_widgets = widgets.HBox(
2[dropdown_year， dropdown_purpose， bounded_num])display(input_widgets)

HBox

1def colour_ge_value(value， comparison)：
2if value >= comparison：
3return 'color： red'
4else：
5return 'color： black'

接下来，我们将为输出创建一个容器。Tab非常适合这个功能。第一个选项卡将承载数据帧，第二个选项卡承载图形。

1tab = widgets.Tab([output， plot_output])
2tab.set_title(0， 'Dataset Exploration')
3tab.set_title(1， 'KDE Plot')display(tab)

Tab

最后，我们将使用VBox将输入小部件和选项卡堆叠在一起。

1dashboard = widgets.VBox([input_widgets， tab])display(dashboard)

VBox

感觉有点“卡住”，所以作为最后一步，我们将通过增加一些空间来优化仪表盘。我们将定义一个布局，在项目之间提供50px的空白。

1item_layout = widgets.Layout(margin='0 0 50px 0')

我们将为每个项目调用此布局：

1input_widgets = widgets.HBox(
2[dropdown_year， dropdown_purpose， bounded_num]，
3layout=item_layout)tab = widgets.Tab([output， plot_output]，
4layout=item_layout)

我们完成了仪表盘：