Python的Web可视化框架Dash(1)
【Dash系列】Python的Web可视化框架Dash(1)---简介【Dash系列】Python的Web可视化框架Dash(2)---安装【Dash系列】Python的Web可视化框架Dash(3)---布局设置【Dash系列】Python的Web可视化框架Dash(4)---基本回调【Dash系列】Python的Web可视化框架Dash(5)---状态和预更新【Dash系列】Python的Web可视化框架Dash(6)---交互和过滤【Dash系列】Python的Web可视化框架Dash(7)---回调共享【Dash系列】Python的Web可视化框架Dash(8)---核心组件一、介绍Dash是一个用于构建Web应用程序的高效Python框架。Dash写在Flask，Plotly.js和React.js之上，非常适合在纯Python中，使用高度自定义的用户界面，构建数据可视化应用程序。它特别适合使用Python进行数据分析的人。通过几个简单的模式，Dash抽象出构建基于Web的交互式应用程序所需的所有技术和协议。Dash应用程序在Web浏览器中呈现，可以将应用程序部署到服务器，然后通过URL进行共享。由于Dash应用程序是在Web浏览器中进行查看，因此Dash本质上是跨平台和移动端的。Dash是一个开源库，在许可的MIT下发布，Plotly开发Dash，并提供了一个在企业环境中轻松部署Dash应用程序的平台。二、应用场景(一) 纯Python创建交互式Web应用程序Dash是用于创建Web应用程序的用户界面库，使用Python进行数据分析、数据探索、可视化、建模、仪器控制和撰写报告的人推荐使用。使用Dash基于分析数据构建GUI非常简单，下图是一个43行代码的Dash App示例，它将Dropdown与D3.js Plotly Graph结合起来使用。当用户在下拉列表中选择一个值时，应用程序代码会将Google财经中的数据动态导出到Pandas DataFrame中，并进行可视化(源代码)。
Dash应用程序的代码，非常灵活简单，可以很方便地构建包含许多交互元素的复杂应用程序。下图是一个包含5个输入，3个输出和交叉滤波的示例，只有160行代码，所有代码都是Python写的(源代码)。
应用程序的每个元素都可以自定义：大小，位置，颜色和字体等。Dash应用程序是在Web中构建和发布的，因此CSS的全部功能都可用。下图是一个高度定制的交互式Dash报告应用程序的示例，其中包含Goldman Sachs报告的品牌和风格(源代码)。
虽然在Web浏览器中查看Dash应用程序，但不必编写任何Javascript或HTML。Dash为一组丰富的基于Web的交互式组件提供了Python接口。import dash_core_components as dccdcc.Slider(value=4, min=-10, max=20, step=0.5, marks={-5: '-5 Degrees', 0: '0', 10: '10 Degrees'})
Dash提供了一个简单的回调装饰器，用于将自定义数据分析代码绑定到Dash用户界面，实现高级交互，如下简单示例。@dash_app.callback(Output('graph-id', 'figure'), [Input('slider-id', 'value')])def your_data_analysis_function(new_slider_value): new_figure = your_compute_figure_function(new_slider_value) return new_figure当元素的值发生变化时，比如选择下拉菜单或拖动滑块，Dash的回调装饰器会把新的元素值传递给Python代码，进行交互操作，比如：筛选Pandas的DataFrame、执行SQL查询语句、运行模拟、执行运算，或开始试验等。进而更新UI中指定元素的属性值，包括：图表、表格、文本等，实现高度交互。下面的例子简要展示了文本框与图形的互动更新，此代码基于当前选定的点，在Pandas的DataFrame中筛选数据(源代码)。
下面的示例中，当鼠标在图形元素的点上悬停时，可以显示相关药物的元信息；在多选式下拉菜单中添加内容时，还可以向表格中追加行。
通过两个抽象大类：Python组件和回调函数装饰器，Dash抽象出基于Web的交互式应用程序所需的所有技术和协议。(二) 体系架构1. Flask和ReactDash应用程序是运行Flask，并通过HTTP请求传递JSON数据包的Web服务器。Dash的前端使用React.js渲染组件，React.js是由Facebook编写和维护的Javascript用户界面库。Flask很棒，已被Python社区广泛采用，并部署于众多生产环境中。Dash应用的开发者可以设置Flask的底层实例和属性，高级开发者还可以使用众多的Flask插件扩展Dash应用。React也很赞，在Plotly，我们用React重写了全部Web平台和在线视图编辑器。React最了不起的一点是它的社区作品众多且个个优秀。React的开源社区已经公布了数以千计的高质量交互式组件，包括下拉菜单、滑块、日历，还有交互式表格等。Dash整合了Flask与React的强大功能，使非专业Web开发的Python数据分析师也可以使用。2. 从React.js到Python Dash组件Dash组件是一个编译React组件属性与值，并将之生成JSON序列的Python类。Dash提供了一个工具集，可以轻松地将React组件 (Javascript编写) ，打包为可在Dash中使用的组件。此工具集使用动态编程，自动将注释过的React PropType转化为标准的Python类。生成后的Dash组件Python类对用户很友好，能进行自动参数验证，并生成字符串。动态生成的参数验证示例：>>> import dash_core_components as dcc>>> dcc.Dropdown(valu=3)Exception: Unexpected keyword argument `valu`Allowed arguments: id, className, disabled, multi, options, placeholder, value动态生成的组件文档示例：>>> help(dcc.Dropdown)class Dropdown(dash.development.base_component.Component) | A Dropdown component. | Dropdown is an interactive dropdown element for selecting one or more | items. | The values and labels of the dropdown items are specified in the `options` | property and the selected item(s) are specified with the `value` property. | | Use a dropdown when you have many options (more than 5) or when you are | constrained for space. Otherwise, you can use RadioItems or a Checklist, | which have the benefit of showing the users all of the items at once. | | Keyword arguments: | - id (string; optional) | - className (string; optional) | - disabled (boolean; optional): If true, the option is disabled | - multi (boolean; optional): If true, the user can select multiple values | - options (list; optional) | - placeholder (string; optional): The grey, default text shown when no option is selected | - value (string | list; optional): The value of the input. If `multi` is false (the default) | then value is just a string that corresponds to the values | provided in the `options` property. If `multi` is true, then | multiple values can be selected at once, and `value` is an | array of items with values corresponding to those in the | `options` prop. | | Available events: 'change全套的HTML标记，如<div/>、<img/>、<table/>等，由React进行动态渲染，均由dash_html_component库提供。下拉菜单、图形、滑块等核心交互式组件由Dash核心团队通过dash_core_components库提供。如果自行编写组件库(教程)，可使用上述的两个库，调用开源的标准React-to-Dash工具链进行支持。3. 并发-多用户应用Dash应用程序的状态存储在前端(即Web浏览器)中，这允许多个用户可以使用独立的会话，同时与Dash应用程序进行交互操作。4. CSS和默认样式核心库没有包含CSS与默认样式，这样做是为了支持模块化和独立版本控制，鼓励Dash应用的开发者，自定义其应用程序的界面外观。点此查阅由Dash核心团队维护的核心样式指南。5. 数据可视化Dash的图形组件使用plotly.js对图形进行渲染，Plotly.js与Dash配合默契，它使用声明式编程模式，开源且速度快，还支持科技计算、金融、商务类的各种视图。Plotly.js基于D3.js构建，支持导出符合出版标准的高清矢量图与优先性能的WebGL视图。Dash的图形元素与开源的plotly.py库共享同样的语法，开发者可以轻易地在两者之间切换。Dash的图形组件从plotly.js事件系统中关联信息，允许开发者编写响应在Plotly图形中悬停、点击、选点等操作的应用。
6. 开源存储库Dash后端：https://github.com/plotly/dashDash前端：https://github.com/plotly/dash-rendererDash核心组件库：https://github.com/plotly/dash-core-componentsDash HTML组件库：https://github.com/plotly/dash-html-componentsDash组件原型(React-to-Dash工具链)：https://github.com/plotly/dash-components-archetypeDash文档和用户指南：https://github.com/plotly/dash-docsPlotly.js - Dash使用的图形库：https://github.com/plotly/plotly.js(三) 现有技术Dash是Python生态系统中的新功能，但支撑它的理念与驱动力已在不同语言和应用中存续了数十年。如果你是从Excel阵营中转移过来的，那算是来对地方了。Dash与Excel都采用了“响应式”的程序模型。在Excel中，输入单元格发生变化时，输出单元格也会自动更新。任何单元格都可以是输出，输入或两者。输入单元格并不关注哪些输出单元格依赖于它们，因此添加新的输入单元格或连接一系列单元格变得非常方便，如下是一个Excel 应用：
下面的例子是用Dash实现了类似Excel的效果。用滑块、输入框、下拉菜单与图形等丰富的Web组件，取代Excel中的单元格，用Python代码取代Excel函数或VBA脚本。app.layout = html.Div([ html.Label('Hours per Day'), dcc.Slider(id='hours', value=5, min=0, max=24, step=1),html.Label('Rate'), dcc.Input(id='rate', value=2, type='number'),html.Label('Amount per Day'), html.Div(id='amount'),html.Label('Amount per Week'), html.Div(id='amount-per-week')])@app.callback(Output('amount', 'children'), [Input('hours', 'value'), Input('rate', 'value')])def compute_amount(hours, rate): return float(hours) * float(rate)@app.callback(Output('amount-per-week', 'children'), [Input('amount', 'children')])def compute_amount(amount): return float(amount) * 7
即便在科学计算和量化金融领域，Excel仍属主流，这并不只是技术能力的问题，毕竟不少电子表格开发者的Excel、VBA，甚至SQL水平都很高。Excel电子表格比Python程序更容易共享，并且编辑Excel单元格比命令行参数更方便。但是，在Excel中建模还是有很多局限性：电子表格经常会变的越来越大，越大就越不稳定，越难移植到生产环境，也很难进行审查、测试和维护。希望使用Dash能够更轻松地开发Python数据分析项目，通过共享同样的函数式与响应式原则，编写Dash应用几乎和编写电子表格一样简单，而且还更强大、更易于展示。如果你使用R语言开发，那你很幸运。Shiny是一个反应式编程框架，用于在纯R中生成Web应用程序，甚至可以使用Shiny和Plotly的R库创建交互式图形。Dash和Shiny相似，但Dash不会成为Shiny的复制品，毕竟Python和R之间的习语与理念非常不同，所使用的语法也不同。
如果你使用MATLAB开发，那一定熟悉MATLAB的用户界面“GUIDE”。Mathworks可以说是科学计算的鼻祖，要知道GUIDE是2004开发的，那可是十多年之前！
如果你使用数据库管理数据，可以使用Tableau或其它BI工具。Tableau很了不起，它提高了业界对数据分析的期望值，即终端用户应该可以自主分析，并能够直接使用工具探索数据。它还使得“向下钻取”和“交叉过滤”这样的概念变得流行。
Dash是这些BI工具的补充，这些工具非常适合结构化数据。但是，当进行数据转换和分析时，很难超越Python等编程语言和社区的广度和灵活性。Dash在构建用户界面时抽象出许多复杂性，使你能够为自定义数据分析后端构建漂亮的前端。最后，我要给Jupyter Widget(小组件)点赞，Jupyter在其Notebook界面中提供了一个非常赞的Widget框架，可以为在本地运行的Jupyter Notebook中的图形添加滑块等功能。
Dash中的小部件类似于Jupyter中的小部件。在Jupyter Notebook中，可以直接使用代码添加Widget。在Dash中，代码与控件和应用是分开的，因为Dash的目标是开发易于分享的应用，而不是代码或笔记。你可以混搭使用这些工具，也可以在Jupyter Notebook环境中编写Dash应用。我们也是nteract项目的忠实粉丝，它将Jupyter Notebook打包成一个桌面程序，大大地降低了使用Python和Jupyter Notebook的门槛。三、许可和开源商业模式Plotly是一家由VC支持的创业公司，成立于2013年，并于2015年开放了核心技术plotly.js(麻省理工学院许可证)，在Python，R和MATLAB中维护开源库，与plotly.js和web应用程序进行连接，用于创建各种图表并将它们连接到数据库(连接器也是开源的)。Plotly提供了针对视图托管、共享平台、视图编辑与数据库查询应用的订阅，这个平台适用于Web，也可在本地部署。Plotly还提供了Dash的升级版，Dash支持MIT许可证，可以免费使用和修改。企业用户则可选择Dash企业版，可以轻松地在企业防火墙的保护下在服务器端发布和配置Dash应用。Dash企业版的目标是在企业内部轻松、安全地共享Dash应用。不需要开发人员，它可以处理URL路由、监控、错误处理、部署、版本控制和包管理等操作，通过企业的活动目录 (Active Directory) 或 LADP 用户账户可以对部署的Dash企业版应用进行配置。如果仅在本地使用开源版本，则没有任何限制，还可以通过Heroku或Digital Ocean等平台自行管理Dash应用程序的部署。如果有足够的财力，最好购买支持计划，Plotly的工程师将提供一对一的帮助。如需其它定制服务或实现特定功能，请了解高级开发计划。对于产品型公司而言，开源仍是个新课题。但最终，我们能够将超过一半的员工奉献给开源产品。非常感谢迄今为止支持Plotly的所有人❤️