数据可视化Dash图形界面工具——我桥AI三月Python文章Top10之二（附原链接及英文，文末可下载PDF）

Posted 2021-04-28 数据简化DataSimp

数据简化DataSimp导读：为专业人士提供文章排名服务Mybridge AI（https://www.mybridge.co/）通过综合考虑分享的总数量、阅读时间，用机器学习算法对3月近1000篇关于Python的文章进行排名(2018.3)，挑选了其中最好10篇（1%的概率），发现Python领导者所共享的经验和技术是有用的。话题包括：数据科学、Dash、小技巧、Django、性能、比特币、教程、音乐、软件公司、命令行；可以在Github（https://github.com/Mybridge/python-articles）上关注Mybridge AI每月十篇关于Python最火文章，并且每月会收到一封邮件。

上期介绍No1《Python是解决任何问题最好的工具》作者William Koehrsen链接https://medium.com/@williamkoehrsen。这期继续看No2《简介—数据可视化Dash图形界面工具以及Python p.1》作者Sentdex链接：https://www.youtube.com/watch?v=J_Cy_QjG6NE；第三名《5个提高您工作效率的Python开发设置技巧》作者Dan Bader链接：https://medium.com/@dbader_org。数据简化社区翻译的汉译文，版权归原作者所有。

 

01 No2. 数据可视化Dash图形界面工具以及Python p.1简介 (1955字)

数据可视化Dash图形界面工具以及Python p.1简介

大家好，欢迎来到最新的Python数据可视化系列课程。我研究Python数据可视化以及有一段时间了，非常熟悉Matplotlib，使用起来很舒服。Matplotlib是一个很好的图形库，它是许多其他能够绘制图形的包的后端，例如pandas.plot()方法。虽然我可以在Matplotlib中制作任何我想要的图表，但我一直都有一些问题：

交互性——Matplotlib图可以与zooms等进行轻微的交互，但是任何重要的交互都需要花费大量的时间来嵌入——尽管我们可以将matplotlib图形嵌入到其他应用程序中，但这通常是一个非常乏味的过程，同样，占用了大量的开发时间。

美学——虽然有些琐碎，但它确实很重要。当这些图形仅是由我自己使用，它们是什么样子并不重要，但是，如果用于展示，它将需要花费大量的时间来使matplotlib可视化变得有吸引力。如果您试图根据图表销售某些东西，或者销售带有嵌入图表的应用程序，那么Matplotlib很可能无法接受。我曾让客户不要使用Matplotlib，不是基于表示数据的能力，而是因为这种表示没有吸引力。

当为了快速画出图表然后测试，出原型等等，我仍然使用Matplotlib，主要是因为它和pandas融合的很好。

也就是说，很多时候，我并不是在尝试做一个独立的图形。单当我试着以某种方式制作图形用户界面（GUI），而且图形是一个很大的部分时，在查比较了其他可用的图表库后，容易嵌入的Bokeh的优点显得很突出。

然后我从Plot.ly中找到了Dash，它通过与Plot.ly绑定，帮助你建立基于网络的数据可视化界面。

让我们看看!我用Dash创建的一个汽车数据监控应用：

https://pythonprogramming.net/static/images/dash/interactive-data-viz-GUI.mp4

创建这样的一些桌面GUI框架内,使用PyQt或Tkinter,或通过一些web应用程序像瓶或Django,然后结合与互动的JS框架,然后结合与jquery javascript交互性,ajax,反应像我们在这里…会占用你大量的时间和代码。上面显示的应用程序只需要不到100行代码，而实际的gui/应用程序本身就有很多行代码，这些代码实际上只是为了保持代码的可读性。

如果你使用像PyQt、Tkiner或者一些web应用比如Flask 和Django, 并结合一些交互性的JS框架，然后将这些Javascript和jquery、ajax、React交互，来创建像这样的桌面GUI框架，将会占用你大量时间。上面的这款app只需要不到100行的代码，实际上有很多行代码是为了保持代码的可读性。

要使用Dash，我们需要以下的包: dash, dash-renderer, dash-html-components, dash-core-components, 和plotly。这些包也有各种依赖关系。你可以使用如下命令安装它们：

sudo pip install dash dash-renderer dash-html-components dash-core-components plotly

或者，在Windows上用管理员打开cmd.exe,然后执行

sudo pip install dash dash-renderer dash-html-components dash-core-components plotly

你可能会在获取MarkupSafe时遇到一些问题。如果是这样，您可以通过以下步骤来解决编译器问题，或者您可以在这里获取一个预先编译的wheel文件:

https://www.lfd.uci.edu/gohlke/pythonlibs/markupsafe

如果您不确定如何安装它们，请参阅Python教程中安装包的后半部分。

让我们展示一个快速和基本的Dash示例。

首先，我们导入一些包：

import dash

import dash_core_components as dcc

import dash_html_components as html

这里，我们只是导入dash lib、各种组件（如图形组件）、HTML组件（如div标签等等）。接下来，我们开始应用程序。

app = dash.Dash()

由于Dash是基于Flask框架构建的，如果你熟悉Flask，那么许多应用程序的设置和安装你应该看起来很熟悉。接下来，我们创建一个布局：

app.layout = html.Div('Dash Tutorials')

在上面的例子中，只是简单地在页面上输出“Dash教程”。没什么了不起的，但又漂亮又简单！让我们运行这个:

if __name__ == '__main__':

app.run_server(debug=True)

运行该操作，您应该在您的控制台中看到以下内容：重新启动

现在，你可以进入浏览器，默认为127.0.0.1:8050

你应该看到这个界面：

这应该是相当容易理解的，但是很快我们就开始添加属性，并在这里嵌入HTML子标签。为了清晰起见，标签的实际内容包含在一个名为children的参数中，它看起来是这样的：

app.layout = html.Div(children='Dash Tutorials')

如果你没有嵌入标签，或者像样式、id或类名之类的属性（Dash等价于HTML的类），那么你可能就不需要显式地给children命名了，但是我建议你为会成长的应用程序做这个操作。

children也可以是一个元素列表。让我们添加一个图形，这就是我们在这里的目的，不是吗？要做到这一点，我们先从框架开始：

import dash

import dash_core_components as dcc

import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[

html.H1(children='Dash Tutorials'),

dcc.Graph()

])

if __name__ == '__main__':

app.run_server(debug=True)

在这里，您可以看到我们的布局由一个巨大的div组成，它包含以下的子内容：“dash教程”的h1标签和dcc.graph。这不会运行，我们需要指定图的元素，现在让我们来构建它。这里有一个快速的图表例子：

dcc.Graph(

id='example',

figure={

'data': [

{'x': [1, 2, 3, 4, 5], 'y': [9, 6, 2, 1, 5], 'type': 'line', 'name': 'Boats'},

{'x': [1, 2, 3, 4, 5], 'y': [8, 7, 2, 7, 3], 'type': 'bar', 'name': 'Cars'},

],

'layout': {

'title': 'Basic Dash Example'

}

}

)

ID是必需的，稍后我们可以使用它来操作这个图形。然后我们有一个图元素，它包含图的数据和布局。在这里，我们传递了所有的数据，以及我们想要的图形类型，以及其他信息。在布局内部，我们可以添加一些类似于我们在这里添加的标题。

现在运行这一操作将返回给我们如下图：

我发现你可以在服务器运行时更改这些内容。每次保存脚本时，服务器都会更新。有时候这是行不通的，或者你遇到了错误，然后就会变得很让人胆战心惊。当所有其他方法都失败时，您可以杀死Python运行进程来重新启动。

现在，我们已经学会如何创建图形，我们将重点关注互能能力。Dash提供了javascript libary的响应功能，我们可以使用它与应用实时交互，而无需重新加载页面。我将在下一个教程中举例说明。

https://pythonprogramming.net/interactive-interface-data-visualization-application-dash-python-tutorial/?completed=/data-visualization-application-dash-python-tutorial-introduction/

 

02 No2. Intro - Data Visualization Applications with Dash and Python p.1 (4712字)

https://www.youtube.com/watch?v=J_Cy_QjG6NE

原文：

Intro - Data Visualization Applications with Dash and Python p.1

Hello and welcome to an updated series on data visualization in Python. It has been a while since I personally have looked into data visualization in Python, being very familiar and comfortable with Matplotlib. Matplotlib is a fine graphing library, and is the backend to many other packages that allow you to graph, such as Pandas' .plot() method. While I have been able to make any graph I have ever wanted in Matplotlib, there are a few issues that I have always experienced:

· Interactivity - Matplotlib graphs can be slightly interacted with, with zooms and such, but any serious interactivity will cost you a lot of time to work in

· Embeddability - While we can embed matplotlib graphs into other applications, this can *often* be a very tedious process, again, taking up a lot of development time.

· Aesthetics - While somewhat trivial, it does matter. When the graphs are just for me, it doesn't matter much what they look like, but, for presentation, it, again, takes a lot of time to make matplotlib visualizations appealing. If you were trying to sell something based on the graphs, or sell an application with embedded charts, Matplotlib is likely unacceptable. I have personally had clients refuse Matplotlib, not based on the ability to represent data, but because the representation wasn't appealing.

For quick graphs to test, prototype...etc, I do still find that I wind up using Matplotlib, mostly because of Pandas' very nice integration.

That said, *much* of the time, I am not actually just trying to make a stand-alone graph. I am trying to make a graphical user interface (GUI) in some form of fashion, and graphs are just a big part. When looking into the other available charting libraries, Bokeh also stands out significantly, which is easily embeddable as well.

Then I came across Dash, from Plot.ly, which helps you to build web-based data visualization interfaces by tying together Plot.ly, React, and Flask.

Let's check it out! I have been using Dash to create a vehicle data monitoring app:

To create something like this within some sort of desktop GUI framework, using something like PyQt or Tkinter, or via some web app like Flask or Django, and then combining it with any of the interactive JS frameworks, and then incorporating the javascript interactivity with jquery, ajax, and React like we are here...would take you quite a bit of time and code. The app shown above, required less than 100 lines of code for the actual GUI/app itself, many of the lines are actually just for styling purposes to keep the code readable.

To use Dash, we need the following packages: dash, dash-renderer, dash-html-components, dash-core-components, and plotly. These packages also have various dependencies. You can install them with:

sudo pip install dash dash-renderer dash-html-components dash-core-components plotly

or, on Windows, open cmd.exe as administrator and do

pip install dash dash-renderer dash-html-components dash-core-components plotly

You may have issues with getting MarkupSafe. If so, you can either remedy the compiler issue by following the steps presented here, or you can just grab a pre-compiled wheel file for markupsafe here: https://www.lfd.uci.edu/~gohlke/pythonlibs/#markupsafe. See the second half of installing packages in Python tutorial for installing .whl packages if you're not sure how to install them.

Let's show a quick and basic example of Dash in action. This will start off as more lines than what might be required to make just a graph in another framework, but, as we convert it to a fully-fleded GUI, it will be vastly simpler than the others.

To begin, let's make some imports:

import dash

import dash_core_components as dcc

import dash_html_components as html

Here, we're just importing things like the dash lib, various components (things like graph components), and then HTML components (things like div tags...etc). Next, we begin our app:

app = dash.Dash()

Since Dash is built around the Flask framework, many of these app settings and setups should look familiar if you are familiar with Flask. Next, we create a layout:

app.layout = html.Div('Dash Tutorials')

In the above case, this would make an app that simply said "Dash Tutorials" on page load. Nothing amazing, but nice and simple! Let's run this:

if __name__ == '__main__':

app.run_server(debug=True)

Run this, and you should see the following in your console: * Restarting with stat

Now, you can go to your browser, heading to the default 127.0.0.1:8050

You should see something like:

Now, this should be fairly easy to understand right now, but pretty quickly we start adding attributes, and embedding child HTML tags inside of here. For the sake of clarity, the actual content of a tag is contained under a parameter called children, which will look like:

app.layout = html.Div(children='Dash Tutorials')

If you don't have embedded tags, or attributes like style or id or className (the Dash equivalent of HTML's class), then you might not see the need for explicitly naming the children, but I'd suggest you do it for any app that is set to grow.

The children can also be a list of items, not just one. Let's add a graph, that's what we are here for isn't it? To do that, we'll start with a skeleton:

import dash

import dash_core_components as dcc

import dash_html_components as html

app = dash.Dash()

app.layout = html.Div(children=[

html.H1(children='Dash Tutorials'),

dcc.Graph()

])

if __name__ == '__main__':

app.run_server(debug=True)

Here, you can see our layout consists of one giant div, which contains the following children: an h1 tag of "dash tutorials" and a dcc.Graph. This wont run yet, we need to specify the elements of the graph, so now let's build that out. Here's a quick graph example:

dcc.Graph(

id='example',

figure={

'data': [

{'x': [1, 2, 3, 4, 5], 'y': [9, 6, 2, 1, 5], 'type': 'line', 'name': 'Boats'},

{'x': [1, 2, 3, 4, 5], 'y': [8, 7, 2, 7, 3], 'type': 'bar', 'name': 'Cars'},

],

'layout': {

'title': 'Basic Dash Example'

}

}

)

The ID is required, and we can use this later to manipulate the graph. We then have the figure element, which contains the data and layout for the graph. Here is where we pass all of the data and what type of graph we want, along with other bits of information. Inside of layout, we can add thigns like the title we've added here.

Running this now gives us:

I will note that you can change things *live* as your server is running. Every time you save your script, the server should update. Sometimes this doesn't work, or you hit an error, and then things can get funky. When all else fails, you can kill the Python running processes to restart things.

Now that we can see how to create graphs, we are going to focus back on interact-ability. Dash gives us the power of the javascript libary React, which we can use to interact in real time with our app, without needing to reload the page. I will exemplify this in the next tutorial.

The next tutorial: 

https://pythonprogramming.net/interactive-interface-data-visualization-application-dash-python-tutorial/?completed=/data-visualization-application-dash-python-tutorial-introduction/

-END-

 

参考文献(116字)

1. Mybridge AI．python top 10 articles for the past month．[EB/OL] https://medium.mybridge.co/python-top-10-articles-for-the-past-month-v-mar-2018-7b60ad2b28e6，2018-03-08．

2. Sentdex．Intro - Data Visualization Applications with Dash and Python p.1．[EB/OL] https://www.youtube.com/watch?v=J_Cy_QjG6NE，2018-03-08．

 

数据可视化Dash图形界面工具——我桥AI三月Python文章Top10之二（3468字)

目录

数据可视化Dash图形界面工具——我桥AI三月Python文章Top10之二（3468字)1

01 No2. 数据可视化Dash图形界面工具以及Python p.1简介 (1955字)1

02 No2. Intro - Data Visualization Applications with Dash and Python p.1 (4712字)3

参考文献(116字)5

Appx(625字).数据简化DataSimp社区简介6

 

Appx(625字).数据简化DataSimp社区简介

（转载请写出处：©秦陇纪2010-2018汇译编，欢迎技术、传媒伙伴投稿、加入数据简化社区！“数据简化DataSimp、科学Sciences、知识简化”投稿反馈邮箱[e-mail]。）

转发/留言/打赏后“阅读原文”下载PDF