【Dash系列】Python的Web可視化框架Dash(1)---簡介
【Dash系列】Python的Web可視化框架Dash(2)---安裝
【Dash系列】Python的Web可視化框架Dash(3)---布局設(shè)置
【Dash系列】Python的Web可視化框架Dash(4)---基本回調(diào)
【Dash系列】Python的Web可視化框架Dash(5)---狀態(tài)和預(yù)更新
【Dash系列】Python的Web可視化框架Dash(6)---交互和過濾
【Dash系列】Python的Web可視化框架Dash(7)---回調(diào)共享
【Dash系列】Python的Web可視化框架Dash(8)---核心組件

一、介紹

Dash是一個(gè)用于構(gòu)建Web應(yīng)用程序的高效Python框架。

Dash寫在Flask，Plotly.js和React.js之上，非常適合在純Python中，使用高度自定義的用戶界面，構(gòu)建數(shù)據(jù)可視化應(yīng)用程序。它特別適合使用Python進(jìn)行數(shù)據(jù)分析的人。

通過幾個(gè)簡單的模式，Dash抽象出構(gòu)建基于Web的交互式應(yīng)用程序所需的所有技術(shù)和協(xié)議。

Dash應(yīng)用程序在Web瀏覽器中呈現(xiàn)，可以將應(yīng)用程序部署到服務(wù)器，然后通過URL進(jìn)行共享。

由于Dash應(yīng)用程序是在Web瀏覽器中進(jìn)行查看，因此Dash本質(zhì)上是跨平臺(tái)和移動(dòng)端的。

Dash是一個(gè)開源庫，在許可的MIT下發(fā)布，Plotly開發(fā)Dash，并提供了一個(gè)在企業(yè)環(huán)境中輕松部署Dash應(yīng)用程序的平臺(tái)。

二、應(yīng)用場景

(一) 純Python創(chuàng)建交互式Web應(yīng)用程序

Dash是用于創(chuàng)建Web應(yīng)用程序的用戶界面庫，使用Python進(jìn)行數(shù)據(jù)分析、數(shù)據(jù)探索、可視化、建模、儀器控制和撰寫報(bào)告的人推薦使用。

使用Dash基于分析數(shù)據(jù)構(gòu)建GUI非常簡單，下圖是一個(gè)43行代碼的Dash App示例，它將Dropdown與D3.js Plotly Graph結(jié)合起來使用。當(dāng)用戶在下拉列表中選擇一個(gè)值時(shí)，應(yīng)用程序代碼會(huì)將Google財(cái)經(jīng)中的數(shù)據(jù)動(dòng)態(tài)導(dǎo)出到Pandas DataFrame中，并進(jìn)行可視化(源代碼)。

Dash應(yīng)用程序的代碼，非常靈活簡單，可以很方便地構(gòu)建包含許多交互元素的復(fù)雜應(yīng)用程序。下圖是一個(gè)包含5個(gè)輸入，3個(gè)輸出和交叉濾波的示例，只有160行代碼，所有代碼都是Python寫的(源代碼)。

應(yīng)用程序的每個(gè)元素都可以自定義：大小，位置，顏色和字體等。Dash應(yīng)用程序是在Web中構(gòu)建和發(fā)布的，因此CSS的全部功能都可用。下圖是一個(gè)高度定制的交互式Dash報(bào)告應(yīng)用程序的示例，其中包含Goldman Sachs報(bào)告的品牌和風(fēng)格(源代碼)。

雖然在Web瀏覽器中查看Dash應(yīng)用程序，但不必編寫任何Javascript或HTML。Dash為一組豐富的基于Web的交互式組件提供了Python接口。

import dash_core_components as dcc
dcc.Slider(value=4, min=-10, max=20, step=0.5, 
           marks={-5: '-5 Degrees', 0: '0', 10: '10 Degrees'})

Dash提供了一個(gè)簡單的回調(diào)裝飾器，用于將自定義數(shù)據(jù)分析代碼綁定到Dash用戶界面，實(shí)現(xiàn)高級(jí)交互，如下簡單示例。

@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

當(dāng)元素的值發(fā)生變化時(shí)，比如選擇下拉菜單或拖動(dòng)滑塊，Dash的回調(diào)裝飾器會(huì)把新的元素值傳遞給Python代碼，進(jìn)行交互操作，比如：篩選Pandas的DataFrame、執(zhí)行SQL查詢語句、運(yùn)行模擬、執(zhí)行運(yùn)算，或開始試驗(yàn)等。進(jìn)而更新UI中指定元素的屬性值，包括：圖表、表格、文本等，實(shí)現(xiàn)高度交互。

下面的例子簡要展示了文本框與圖形的互動(dòng)更新，此代碼基于當(dāng)前選定的點(diǎn)，在Pandas的DataFrame中篩選數(shù)據(jù)(源代碼)。

通過兩個(gè)抽象大類：Python組件和回調(diào)函數(shù)裝飾器，Dash抽象出基于Web的交互式應(yīng)用程序所需的所有技術(shù)和協(xié)議。

(二) 體系架構(gòu)

1. Flask和React

Dash應(yīng)用程序是運(yùn)行Flask，并通過HTTP請(qǐng)求傳遞JSON數(shù)據(jù)包的Web服務(wù)器。Dash的前端使用React.js渲染組件，React.js是由Facebook編寫和維護(hù)的Javascript用戶界面庫。

Flask很棒，已被Python社區(qū)廣泛采用，并部署于眾多生產(chǎn)環(huán)境中。Dash應(yīng)用的開發(fā)者可以設(shè)置Flask的底層實(shí)例和屬性，高級(jí)開發(fā)者還可以使用眾多的Flask插件擴(kuò)展Dash應(yīng)用。

React也很贊，在Plotly，我們用React重寫了全部Web平臺(tái)和在線視圖編輯器。React最了不起的一點(diǎn)是它的社區(qū)作品眾多且個(gè)個(gè)優(yōu)秀。React的開源社區(qū)已經(jīng)公布了數(shù)以千計(jì)的高質(zhì)量交互式組件，包括下拉菜單、滑塊、日歷，還有交互式表格等。

Dash整合了Flask與React的強(qiáng)大功能，使非專業(yè)Web開發(fā)的Python數(shù)據(jù)分析師也可以使用。

2. 從React.js到Python Dash組件

Dash組件是一個(gè)編譯React組件屬性與值，并將之生成JSON序列的Python類。

Dash提供了一個(gè)工具集，可以輕松地將React組件 (Javascript編寫) ，打包為可在Dash中使用的組件。此工具集使用動(dòng)態(tài)編程，自動(dòng)將注釋過的React PropType轉(zhuǎn)化為標(biāo)準(zhǔn)的Python類。生成后的Dash組件Python類對(duì)用戶很友好，能進(jìn)行自動(dòng)參數(shù)驗(yàn)證，并生成字符串。

動(dòng)態(tài)生成的參數(shù)驗(yàn)證示例：

>>> import dash_core_components as dcc
>>> dcc.Dropdown(valu=3)
Exception: Unexpected keyword argument `valu`
Allowed arguments: id, className, disabled, multi, options, placeholder, value

動(dòng)態(tài)生成的組件文檔示例：

>>> 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標(biāo)記，如<div/>、<img/>、<table/>等，由React進(jìn)行動(dòng)態(tài)渲染，均由dash_html_component庫提供。

下拉菜單、圖形、滑塊等核心交互式組件由Dash核心團(tuán)隊(duì)通過dash_core_components庫提供。

如果自行編寫組件庫(教程)，可使用上述的兩個(gè)庫，調(diào)用開源的標(biāo)準(zhǔn)React-to-Dash工具鏈進(jìn)行支持。

3. 并發(fā)-多用戶應(yīng)用

Dash應(yīng)用程序的狀態(tài)存儲(chǔ)在前端(即Web瀏覽器)中，這允許多個(gè)用戶可以使用獨(dú)立的會(huì)話，同時(shí)與Dash應(yīng)用程序進(jìn)行交互操作。

4. CSS和默認(rèn)樣式

核心庫沒有包含CSS與默認(rèn)樣式，這樣做是為了支持模塊化和獨(dú)立版本控制，鼓勵(lì)Dash應(yīng)用的開發(fā)者，自定義其應(yīng)用程序的界面外觀。點(diǎn)此查閱由Dash核心團(tuán)隊(duì)維護(hù)的核心樣式指南。

5. 數(shù)據(jù)可視化

Dash的圖形組件使用plotly.js對(duì)圖形進(jìn)行渲染，Plotly.js與Dash配合默契，它使用聲明式編程模式，開源且速度快，還支持科技計(jì)算、金融、商務(wù)類的各種視圖。Plotly.js基于D3.js構(gòu)建，支持導(dǎo)出符合出版標(biāo)準(zhǔn)的高清矢量圖與優(yōu)先性能的WebGL視圖。

6. 開源存儲(chǔ)庫

• Dash后端：https://github.com/plotly/dash

• Dash前端：https://github.com/plotly/dash-renderer

• Dash核心組件庫：https://github.com/plotly/dash-core-components

• Dash HTML組件庫：https://github.com/plotly/dash-html-components

• Dash組件原型(React-to-Dash工具鏈)：https://github.com/plotly/dash-components-archetype

• Dash文檔和用戶指南：https://github.com/plotly/dash-docs

• Plotly.js - Dash使用的圖形庫：https://github.com/plotly/plotly.js

(三) 現(xiàn)有技術(shù)

Dash是Python生態(tài)系統(tǒng)中的新功能，但支撐它的理念與驅(qū)動(dòng)力已在不同語言和應(yīng)用中存續(xù)了數(shù)十年。

如果你是從Excel陣營中轉(zhuǎn)移過來的，那算是來對(duì)地方了。Dash與Excel都采用了“響應(yīng)式”的程序模型。在Excel中，輸入單元格發(fā)生變化時(shí)，輸出單元格也會(huì)自動(dòng)更新。任何單元格都可以是輸出，輸入或兩者。

下面的例子是用Dash實(shí)現(xiàn)了類似Excel的效果。用滑塊、輸入框、下拉菜單與圖形等豐富的Web組件，取代Excel中的單元格，用Python代碼取代Excel函數(shù)或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

即便在科學(xué)計(jì)算和量化金融領(lǐng)域，Excel仍屬主流，這并不只是技術(shù)能力的問題，畢竟不少電子表格開發(fā)者的Excel、VBA，甚至SQL水平都很高。

Excel電子表格比Python程序更容易共享，并且編輯Excel單元格比命令行參數(shù)更方便。

但是，在Excel中建模還是有很多局限性：電子表格經(jīng)常會(huì)變的越來越大，越大就越不穩(wěn)定，越難移植到生產(chǎn)環(huán)境，也很難進(jìn)行審查、測試和維護(hù)。

希望使用Dash能夠更輕松地開發(fā)Python數(shù)據(jù)分析項(xiàng)目，通過共享同樣的函數(shù)式與響應(yīng)式原則，編寫Dash應(yīng)用幾乎和編寫電子表格一樣簡單，而且還更強(qiáng)大、更易于展示。

如果你使用R語言開發(fā)，那你很幸運(yùn)。Shiny是一個(gè)反應(yīng)式編程框架，用于在純R中生成Web應(yīng)用程序，甚至可以使用Shiny和Plotly的R庫創(chuàng)建交互式圖形。Dash和Shiny相似，但Dash不會(huì)成為Shiny的復(fù)制品，畢竟Python和R之間的習(xí)語與理念非常不同，所使用的語法也不同。

Dash是這些BI工具的補(bǔ)充，這些工具非常適合結(jié)構(gòu)化數(shù)據(jù)。但是，當(dāng)進(jìn)行數(shù)據(jù)轉(zhuǎn)換和分析時(shí)，很難超越Python等編程語言和社區(qū)的廣度和靈活性。Dash在構(gòu)建用戶界面時(shí)抽象出許多復(fù)雜性，使你能夠?yàn)樽远x數(shù)據(jù)分析后端構(gòu)建漂亮的前端。

Dash中的小部件類似于Jupyter中的小部件。在Jupyter Notebook中，可以直接使用代碼添加Widget。在Dash中，代碼與控件和應(yīng)用是分開的，因?yàn)镈ash的目標(biāo)是開發(fā)易于分享的應(yīng)用，而不是代碼或筆記。你可以混搭使用這些工具，也可以在Jupyter Notebook環(huán)境中編寫Dash應(yīng)用。

我們也是nteract項(xiàng)目的忠實(shí)粉絲，它將Jupyter Notebook打包成一個(gè)桌面程序，大大地降低了使用Python和Jupyter Notebook的門檻。

三、許可和開源商業(yè)模式

Plotly是一家由VC支持的創(chuàng)業(yè)公司，成立于2013年，并于2015年開放了核心技術(shù)plotly.js(麻省理工學(xué)院許可證)，在Python，R和MATLAB中維護(hù)開源庫，與plotly.js和web應(yīng)用程序進(jìn)行連接，用于創(chuàng)建各種圖表并將它們連接到數(shù)據(jù)庫(連接器也是開源的)。

Plotly提供了針對(duì)視圖托管、共享平臺(tái)、視圖編輯與數(shù)據(jù)庫查詢應(yīng)用的訂閱，這個(gè)平臺(tái)適用于Web，也可在本地部署。

Plotly還提供了Dash的升級(jí)版，Dash支持MIT許可證，可以免費(fèi)使用和修改。企業(yè)用戶則可選擇Dash企業(yè)版，可以輕松地在企業(yè)防火墻的保護(hù)下在服務(wù)器端發(fā)布和配置Dash應(yīng)用。

Dash企業(yè)版的目標(biāo)是在企業(yè)內(nèi)部輕松、安全地共享Dash應(yīng)用。不需要開發(fā)人員，它可以處理URL路由、監(jiān)控、錯(cuò)誤處理、部署、版本控制和包管理等操作，通過企業(yè)的活動(dòng)目錄 (Active Directory) 或 LADP 用戶賬戶可以對(duì)部署的Dash企業(yè)版應(yīng)用進(jìn)行配置。

如果僅在本地使用開源版本，則沒有任何限制，還可以通過Heroku或Digital Ocean等平臺(tái)自行管理Dash應(yīng)用程序的部署。如果有足夠的財(cái)力，最好購買支持計(jì)劃，Plotly的工程師將提供一對(duì)一的幫助。如需其它定制服務(wù)或?qū)崿F(xiàn)特定功能，請(qǐng)了解高級(jí)開發(fā)計(jì)劃。

對(duì)于產(chǎn)品型公司而言，開源仍是個(gè)新課題。但最終，我們能夠?qū)⒊^一半的員工奉獻(xiàn)給開源產(chǎn)品。非常感謝迄今為止支持Plotly的所有人??