【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 dcc
dcc.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和React
Dash應用程序是運行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 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
(三) 現有技術
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之間的習語與理念非常不同，所使用的語法也不同。
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的所有人??
