利用 Python中的 Bokeh 实现数据可视化，第二部分：交互 #4941

Starriers · 2019-01-02T15:34:46Z

译文翻译完成，resolve #4896

TrWestdoor · 2019-01-03T01:50:33Z

@Starriers @leviding 校对认领

fanyijihua · 2019-01-03T01:50:36Z

@TrWestdoor 好的呢 🍺

leviding · 2019-01-03T09:00:18Z

标题改为：利用 Python中的 Bokeh 实现数据可视化，第二部分：交互

TrWestdoor

翻译很好，因为个人原因，导致校对的晚了点，非常抱歉。

TrWestdoor · 2019-01-04T03:39:14Z

TODO1/data-visualization-with-bokeh-in-python-part-ii-interactions.md

@@ -5,138 +5,138 @@
 > * 译者：
 > * 校对者：

-# Data Visualization with Bokeh in Python, Part II: Interactions
+# Python 中 Bokeh 的数据可视化，第二部分：交互


这里记得按照 @leviding 的回复更改标题吧。

TrWestdoor · 2019-01-05T15:23:31Z

TODO1/data-visualization-with-bokeh-in-python-part-ii-interactions.md


-All the code for this series is [available on GitHub](https://github.com/WillKoehrsen/Bokeh-Python-Visualization/tree/master/interactive). I encourage anyone to check it out for all the data cleaning details (an uninspiring but necessary part of data science) and to experiment with the code!(For interactive Bokeh plots, we can still use a Jupyter Notebook to show the results or we can write Python scripts and run a Bokeh server. For development, I usually work in a Jupyter Notebook because it is easier to rapidly iterate and change plots without having to restart the server. I then move to a server to display the final results. You can see both a standalone script and the full notebook on GitHub.)
+本系列的所有代码[皆可用，并托管在 GitHub 上](https://github.com/WillKoehrsen/Bokeh-Python-Visualization/tree/master/interactive)。任何感兴趣的人都可以查看所有的数据清洗细节（数据科学中一个不那么鼓舞人心但又必不可少的部分），也可以亲自运行它们！（对于交互式 Bokeh 图，我们仍然可以使用 Jupyter Notebook 来显示结果，我们也可以编写 Python 脚本，并运行 Bokeh 服务器。我通常使用 Jupyter Notebook 进行开发，因为它可以在不重启服务器的情况下，就可以很容易的快速迭代和更改绘图。然后我将它们迁移到服务器中来显示最终结果。你可以在 GitHub 上看到一个独立的脚本和完整的笔记）。


Suggested change

本系列的所有代码[皆可用，并托管在 GitHub 上](https://github.com/WillKoehrsen/Bokeh-Python-Visualization/tree/master/interactive)。任何感兴趣的人都可以查看所有的数据清洗细节（数据科学中一个不那么鼓舞人心但又必不可少的部分），也可以亲自运行它们！（对于交互式 Bokeh 图，我们仍然可以使用 Jupyter Notebook 来显示结果，我们也可以编写 Python 脚本，并运行 Bokeh 服务器。我通常使用 Jupyter Notebook 进行开发，因为它可以在不重启服务器的情况下，就可以很容易的快速迭代和更改绘图。然后我将它们迁移到服务器中来显示最终结果。你可以在 GitHub 上看到一个独立的脚本和完整的笔记）。

本系列的所有代码[都可在 GitHub 上获得](https://github.com/WillKoehrsen/Bokeh-Python-Visualization/tree/master/interactive)。任何感兴趣的人都可以查看所有的数据清洗细节（数据科学中一个不那么鼓舞人心但又必不可少的部分），也可以亲自运行它们！（对于交互式 Bokeh 图，我们仍然可以使用 Jupyter Notebook 来显示结果，我们也可以编写 Python 脚本，并运行 Bokeh 服务器。我通常使用 Jupyter Notebook 进行开发，因为它可以在不重启服务器的情况下，就可以很容易的快速迭代和更改绘图。然后我将它们迁移到服务器中来显示最终结果。你可以在 GitHub 上看到一个独立的脚本和完整的笔记）。

TrWestdoor · 2019-01-05T15:59:35Z

TODO1/data-visualization-with-bokeh-in-python-part-ii-interactions.md


-When I view graphs, I enjoy playing with active interactions ([such as those on FlowingData](http://flowingdata.com/2018/01/23/the-demographics-of-others/)) because they allow me to do my own exploration of the data. I find it more insightful to discover conclusions from the data on my own (with some direction from the designer) rather than from a completely static chart. Moreover, giving users some amount of freedom allows them to come away with slightly different interpretations that can generate beneficial discussion about the dataset.
+当我查看图时，我喜欢主动的交互（[比如那些在 FlowingData 上的交互](http://flowingdata.com/2018/01/23/the-demographics-of-others/)）因为它们允许我自己去研究数据。我发现让人印象更深刻的是从我自己的数据中发现的结论（从设计者那里获取的一些研究方向），而不是从一个完全静态的图表中发现的结论。此外，给予用户一定程度的自由，可以让他们对数据集提出更有用的讨论，从而产生不同的解释。


Suggested change

当我查看图时，我喜欢主动的交互（[比如那些在 FlowingData 上的交互](http://flowingdata.com/2018/01/23/the-demographics-of-others/)）因为它们允许我自己去研究数据。我发现让人印象更深刻的是从我自己的数据中发现的结论（从设计者那里获取的一些研究方向），而不是从一个完全静态的图表中发现的结论。此外，给予用户一定程度的自由，可以让他们对数据集提出更有用的讨论，从而产生不同的解释。

当我查看图时，我喜欢主动的交互（[比如那些在 FlowingData 上的交互](http://flowingdata.com/2018/01/23/the-demographics-of-others/)），因为它们允许我自己去研究数据。我发现让人印象更深刻的是从我自己的数据中发现的结论（从设计者那里获取的一些研究方向），而不是从一个完全静态的图表中发现的结论。此外，给予用户一定程度的自由，可以让他们对数据集提出更有用的讨论，从而产生不同的解释。

TrWestdoor · 2019-01-05T16:00:56Z

TODO1/data-visualization-with-bokeh-in-python-part-ii-interactions.md

-*   `update()` Update the plot based on user selections
+*   `make_dataset()` 格式化想要显示的特定数据
+*   `make_plot()` 用指定的数据进行绘图
+*   `update()` 基于用于选择来更新绘图


Suggested change

* `update()` 基于用于选择来更新绘图

* `update()` 基于用户选择来更新绘图

TrWestdoor · 2019-01-05T16:07:49Z

TODO1/data-visualization-with-bokeh-in-python-part-ii-interactions.md


-To make the data for the histogram, we use the numpy function `histogram` which counts the number of data points in each bin. In our case, this is the number of flights in each specified delay interval. For part I, we made a histogram for all flights, but now we will do it by each carrier. As the number of flights for each carrier varies significantly, we can display the delays not in raw counts but in proportions. That is, the height on the plot corresponds to the fraction of all flights for a specific airline with a delay in the corresponding bin. To go from counts to a proportion, we divide the count by the total count for the airline.
+为了生成柱状图的数据，我们使用 numpy 函数 `histogram` 来统计每个容器中的数据点数。在我们的示例中，这是每个指定延迟间隔中的航班数。对于第一部分，我们做了一个包含所有航班的柱状图，但现在我们会每一个运营商都提供一个柱状图。由于每个航空公司的航班数目有很大差异，我们可以显示延迟而不是按原始数目显示，可以按比例显示。也就是说，图上的高度对应于特定航空公司的所有航班比例，该航班在相应的容器中有延迟。从计数到比例，我们除以航空公司的总数。


Suggested change

为了生成柱状图的数据，我们使用 numpy 函数 `histogram` 来统计每个容器中的数据点数。在我们的示例中，这是每个指定延迟间隔中的航班数。对于第一部分，我们做了一个包含所有航班的柱状图，但现在我们会每一个运营商都提供一个柱状图。由于每个航空公司的航班数目有很大差异，我们可以显示延迟而不是按原始数目显示，可以按比例显示。也就是说，图上的高度对应于特定航空公司的所有航班比例，该航班在相应的容器中有延迟。从计数到比例，我们除以航空公司的总数。

为了生成柱状图的数据，我们使用 numpy 函数 `histogram` 来统计每个容器中的数据点数。在我们的示例中，这是每个指定延迟间隔中的航班数。对于第一部分，我们做了一个包含所有航班的柱状图，但现在我们对每一个运营商都提供一个柱状图。由于每个航空公司的航班数目有很大差异，我们可以显示延迟而不是按原始数目显示，可以按比例显示。也就是说，图上的高度对应于特定航空公司的所有航班比例，该航班在相应的容器中有延迟。从计数到比例，我们除以航空公司的总数。

TrWestdoor · 2019-01-05T16:10:22Z

TODO1/data-visualization-with-bokeh-in-python-part-ii-interactions.md

 def make_dataset(carrier_list, range_start = -60, range_end = 120, bin_width = 5):

-    # Check to make sure the start is less than the end!
+    # 为了确保开始小于结束而进行检查


Suggested change

# 为了确保开始小于结束而进行检查

# 为了确保起始点小于终点而进行检查

TrWestdoor · 2019-01-05T16:12:35Z

TODO1/data-visualization-with-bokeh-in-python-part-ii-interactions.md

    return ColumnDataSource(by_carrier)
 ```

-(I know this is a post about Bokeh, but you can’t make a graph without formatted data, so I included the code to demonstrate my methods!)
+(我知道这是一篇关于 Bokeh 的博客，但在没有格式化数据的情况下，无法生成图，因此它包括了代码来我的演示方法！)


Suggested change

(我知道这是一篇关于 Bokeh 的博客，但在没有格式化数据的情况下，无法生成图，因此它包括了代码来我的演示方法！)

(我知道这是一篇关于 Bokeh 的博客，但在你不能在没有格式化数据的情况下来生成图表，因此我包括了代码来演示我的方法！)

TrWestdoor · 2019-01-05T16:18:03Z

TODO1/data-visualization-with-bokeh-in-python-part-ii-interactions.md

 carrier_selection.on_change('active', update)
 ```

-This calls the update function any time a different airline is selected or unselected. The end result is that only glyphs corresponding to the selected airlines are drawn on the histogram, which can be seen below:
+在选择或取消其他航班的时会调用 update 函数。最终结果是在柱状图中只绘制了与选定航空公司相对应的符号，如下所示：


update function 是叫 update 函数，还是更新函数，上下文应该统一一下。

恩恩好的

TrWestdoor · 2019-01-05T16:18:49Z

TODO1/data-visualization-with-bokeh-in-python-part-ii-interactions.md


-Now that we know the basic workflow for creating a control we can add in more elements. Each time, we create the widget, write an update function to change the data displayed on the plot, and link the update function to the widget with an event handler. We can even use the same update function for multiple elements by rewriting the function to extract the values we need from the widgets. To practice, we will add two additional controls: a Slider which selects the bin width for the histogram, and a RangeSlider that sets the minimum and maximum delays to display. Here’s the code to make both of these widgets and the new update function:
+现在我们已经知道了创建控件的基本工作流程，我们可以添加更多元素。我们每次创建小部件时，编写更新函数来更改显示在绘图上的数据，通过事件处理器来将更新函数链接到小部件。我们甚至可以通过重写函数来从多个元素中使用相同的更新函数来从小部件中提取我们所需的值。在实践过程中，我们将添加两个额外的控件：一个用于选择柱状图容器宽度的 Slider，另一个是用于设置最小和最大延迟的 RangeSlider。下面是生成这些小部件和更新函数的代码：


如前面提到，这里选择了叫更新函数，但是在前文叫 update 函数。

TrWestdoor · 2019-01-05T16:20:46Z

@Starriers @fanyijihua 校对完成

leviding · 2019-01-06T03:36:37Z

@Starriers 可以修改啦

Starriers · 2019-01-06T05:51:19Z

@TrWestdoor @leviding 校对修改完成

leviding

Great！

leviding · 2019-01-08T13:13:50Z

@Starriers 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

Starriers · 2019-01-08T14:48:16Z

@TrWestdoor @leviding Thank your support!
The post has been published: https://juejin.im/post/5c34a9dee51d4551d044efce

Starrier:data-visualization-2

ff7b189

fanyijihua added the 校对认领 label Jan 2, 2019

fanyijihua mentioned this pull request Jan 2, 2019

利用 Python中的 Bokeh 实现数据可视化，第二部分：交互 #4896

Closed

Starrier:update the translation in my self.

9317c93

leviding added the AI label Jan 3, 2019

fanyijihua added the 正在校对 label Jan 3, 2019

leviding changed the title ~~Python 中 Bokeh 的数据可视化，第二部分：交互~~ 利用 Python中的 Bokeh 实现数据可视化，第二部分：交互 Jan 3, 2019

TrWestdoor reviewed Jan 5, 2019

View reviewed changes

leviding added the enhancement 等待译者修改 label Jan 6, 2019

leviding removed the 校对认领 label Jan 6, 2019

Starrier:update the article with some modifications.

b85025c

leviding added 标注待管理员 Review and removed enhancement 等待译者修改 labels Jan 6, 2019

Update data-visualization-with-bokeh-in-python-part-ii-interactions.md

fd9e39d

leviding approved these changes Jan 8, 2019

View reviewed changes

leviding merged commit 0be45bb into xitu:master Jan 8, 2019

leviding added 翻译完成 and removed 标注待管理员 Review 正在校对 labels Jan 8, 2019

Starriers deleted the data-visualization-2 branch January 20, 2019 06:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

利用 Python中的 Bokeh 实现数据可视化，第二部分：交互 #4941

利用 Python中的 Bokeh 实现数据可视化，第二部分：交互 #4941

Starriers commented Jan 2, 2019

TrWestdoor commented Jan 3, 2019

fanyijihua commented Jan 3, 2019

leviding commented Jan 3, 2019

TrWestdoor left a comment

TrWestdoor Jan 4, 2019

TrWestdoor Jan 5, 2019

TrWestdoor Jan 5, 2019

TrWestdoor Jan 5, 2019

TrWestdoor Jan 5, 2019

TrWestdoor Jan 5, 2019

TrWestdoor Jan 5, 2019

TrWestdoor Jan 5, 2019

Starriers Jan 6, 2019

TrWestdoor Jan 5, 2019

TrWestdoor commented Jan 5, 2019

leviding commented Jan 6, 2019

Starriers commented Jan 6, 2019

leviding left a comment

leviding commented Jan 8, 2019

Starriers commented Jan 8, 2019


		All the code for this series is [available on GitHub](https://github.com/WillKoehrsen/Bokeh-Python-Visualization/tree/master/interactive). I encourage anyone to check it out for all the data cleaning details (an uninspiring but necessary part of data science) and to experiment with the code!(For interactive Bokeh plots, we can still use a Jupyter Notebook to show the results or we can write Python scripts and run a Bokeh server. For development, I usually work in a Jupyter Notebook because it is easier to rapidly iterate and change plots without having to restart the server. I then move to a server to display the final results. You can see both a standalone script and the full notebook on GitHub.)
		本系列的所有代码[皆可用，并托管在 GitHub 上](https://github.com/WillKoehrsen/Bokeh-Python-Visualization/tree/master/interactive)。任何感兴趣的人都可以查看所有的数据清洗细节（数据科学中一个不那么鼓舞人心但又必不可少的部分），也可以亲自运行它们！（对于交互式 Bokeh 图，我们仍然可以使用 Jupyter Notebook 来显示结果，我们也可以编写 Python 脚本，并运行 Bokeh 服务器。我通常使用 Jupyter Notebook 进行开发，因为它可以在不重启服务器的情况下，就可以很容易的快速迭代和更改绘图。然后我将它们迁移到服务器中来显示最终结果。你可以在 GitHub 上看到一个独立的脚本和完整的笔记）。


		When I view graphs, I enjoy playing with active interactions ([such as those on FlowingData](http://flowingdata.com/2018/01/23/the-demographics-of-others/)) because they allow me to do my own exploration of the data. I find it more insightful to discover conclusions from the data on my own (with some direction from the designer) rather than from a completely static chart. Moreover, giving users some amount of freedom allows them to come away with slightly different interpretations that can generate beneficial discussion about the dataset.
		当我查看图时，我喜欢主动的交互（[比如那些在 FlowingData 上的交互](http://flowingdata.com/2018/01/23/the-demographics-of-others/)）因为它们允许我自己去研究数据。我发现让人印象更深刻的是从我自己的数据中发现的结论（从设计者那里获取的一些研究方向），而不是从一个完全静态的图表中发现的结论。此外，给予用户一定程度的自由，可以让他们对数据集提出更有用的讨论，从而产生不同的解释。

	* `update()` 基于用于选择来更新绘图
	* `update()` 基于用户选择来更新绘图


		To make the data for the histogram, we use the numpy function `histogram` which counts the number of data points in each bin. In our case, this is the number of flights in each specified delay interval. For part I, we made a histogram for all flights, but now we will do it by each carrier. As the number of flights for each carrier varies significantly, we can display the delays not in raw counts but in proportions. That is, the height on the plot corresponds to the fraction of all flights for a specific airline with a delay in the corresponding bin. To go from counts to a proportion, we divide the count by the total count for the airline.
		为了生成柱状图的数据，我们使用 numpy 函数 `histogram` 来统计每个容器中的数据点数。在我们的示例中，这是每个指定延迟间隔中的航班数。对于第一部分，我们做了一个包含所有航班的柱状图，但现在我们会每一个运营商都提供一个柱状图。由于每个航空公司的航班数目有很大差异，我们可以显示延迟而不是按原始数目显示，可以按比例显示。也就是说，图上的高度对应于特定航空公司的所有航班比例，该航班在相应的容器中有延迟。从计数到比例，我们除以航空公司的总数。

	# 为了确保开始小于结束而进行检查
	# 为了确保起始点小于终点而进行检查

	(我知道这是一篇关于 Bokeh 的博客，但在没有格式化数据的情况下，无法生成图，因此它包括了代码来我的演示方法！)
	(我知道这是一篇关于 Bokeh 的博客，但在你不能在没有格式化数据的情况下来生成图表，因此我包括了代码来演示我的方法！)


		Now that we know the basic workflow for creating a control we can add in more elements. Each time, we create the widget, write an update function to change the data displayed on the plot, and link the update function to the widget with an event handler. We can even use the same update function for multiple elements by rewriting the function to extract the values we need from the widgets. To practice, we will add two additional controls: a Slider which selects the bin width for the histogram, and a RangeSlider that sets the minimum and maximum delays to display. Here’s the code to make both of these widgets and the new update function:
		现在我们已经知道了创建控件的基本工作流程，我们可以添加更多元素。我们每次创建小部件时，编写更新函数来更改显示在绘图上的数据，通过事件处理器来将更新函数链接到小部件。我们甚至可以通过重写函数来从多个元素中使用相同的更新函数来从小部件中提取我们所需的值。在实践过程中，我们将添加两个额外的控件：一个用于选择柱状图容器宽度的 Slider，另一个是用于设置最小和最大延迟的 RangeSlider。下面是生成这些小部件和更新函数的代码：

利用 Python中的 Bokeh 实现数据可视化，第二部分：交互 #4941

利用 Python中的 Bokeh 实现数据可视化，第二部分：交互 #4941

Conversation

Starriers commented Jan 2, 2019

TrWestdoor commented Jan 3, 2019

fanyijihua commented Jan 3, 2019

leviding commented Jan 3, 2019

TrWestdoor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TrWestdoor commented Jan 5, 2019

leviding commented Jan 6, 2019

Starriers commented Jan 6, 2019

leviding left a comment

Choose a reason for hiding this comment

leviding commented Jan 8, 2019

Starriers commented Jan 8, 2019