【譯Py】Python互動式數據分析報告框架~Dash介紹

02-14

原文作者：Plotly,Chris Pamer 原文鏈接

譯者序：原文於2017年6月21日發布，時過半載，將這篇既不是教程，也不是新聞的產品發布稿做了一番翻譯，為何？只因去年下半年的時候，用R語言的博哥和龍少有Shiny這樣的框架可以開發互動式整合Web數據分析報告，讓我這個成天鼓吹用Python做數據分析的人眼饞不已。當時找了很久，試用了包括Bokeh、mpld3、Highcharts，以及鍵冬同學基於百度Echarts開發的PyEcharts，但是這些都是基於Web的交互視圖庫，而非Shiny那種能將文檔、表格、視圖整合在一起的互動式數據分析報告框架。今年翻譯《2017年10大Python庫》這篇文章時看到了Dash，這正是我尋覓已久的，不過，網上卻鮮有介紹它的中文文章，因此，決定將它的產品發布稿先翻譯出來，希望Python數據分析師能夠了解Dash，用它製作出更優秀的數據分析報告。

另外，後來還發現了Pyxley，也是基於React和Flask的，有興趣的朋友也可以了解一下。

純Python搭建響應式Web應用

Dash是用於搭建響應式Web應用的Python開源庫，兩年前，Dash只是在Github上公布的一個概念驗證模型，我們把它放到網上，並在後台展開後續工作。我們與銀行、實驗室和數據科學項目組合作對Dash進行了秘密實驗，其反饋信息指導了Dash的開發。今天，我們懷著激動的心情宣布，Dash的第一個公開版終於發布啦，它是Plotly頂級開源工具中的一員，完美支持企業級應用，全部開源，並採用了MIT許可。從今天開始，通過Python包管理器pip install dash?即可下載Dash，請在這裡查閱Dash入門指南和Github上的Dash源碼。

Dash是搭建Web數據分析應用的用戶界面（UI）庫，如果你之前使用Python處理過數據分析、數據探索、可視化、建模、工具控制及編製報告等工作，就會發現Dash可以快速上手。

Dash的出現讓為數據分析代碼構建GUI這項工作變得超級簡單。下面的例子是一個將下拉菜單與支持D3.js的Plotly圖形綁定的Dash應用。用戶點擊下拉菜單選擇不同的值，程序代碼就能動態地從谷歌金融導入數據到Pandas的DataFrame。這個應用僅用了43行代碼（查看源碼），簡單吧！

Dash應用：Hello World，更多請查閱用戶指南

Dash應用的代碼是聲明與反應式的，可以輕鬆構建包含交互元素的複雜應用。下面是一個包含5個輸入項，3個輸出項和交叉篩選的例子，這個例子只有160行代碼，並且都是用Python編寫的。

Dash應用：含交叉篩選，多個輸入與輸出項，僅163行Python代碼。查看源碼

這個應用中的每個設計元素，如尺寸、位置、顏色及字體，都可以自定義。Dash應用是基於Web構建與發布的，所以完全支持CSS。下面是一個採用了高盛報告風格的、可高度定製及交互的Dash報告。

可高度定製的高盛風格Dash報告，查看源碼

因為是在瀏覽器中查看Dash應用，所以無需寫任何JavaScript或HTML代碼，Dash提供了一個調用眾多Web互動式組件的Python界面。

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

簡單的Dash滑塊組件

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代碼。

通過新輸入的值，Python函數可以篩選Pandas的DataFrame、生成SQL查詢語句、運行模擬、執行運算，或開始試驗等任何事情。Dash會在UI中為該函數的圖形、表格及文本等元素返回新的屬性。

下面的例子簡要展示了文本框與圖形的互動更新，此代碼基於當前選定的點，在Pandas的DataFrame中篩選數據。

顯示自定義元信息的Dash應用，當滑鼠懸停在某個點上時，會篩選Pandas DataFrame中的數據，僅60行代碼，查看源碼

在這個Dash應用中，滑鼠在圖形元素的點上懸停時可以顯示相關藥物的元信息。當在多選式下拉菜單中添加內容時，此代碼還可以向表格中追加行。

分析藥品的Dash應用。滑鼠懸停在點上時顯示藥品的描述，在下拉菜單中選擇時，會高亮顯示藥品在視圖中的位置，並向下方的表格添加該藥品的標識。實現此功能僅需幾百行Python代碼

通過Python組件與響應式函數裝飾器這兩個抽象層，Dash抽取了構建互動式Web應用所需的技術與協議，讓你輕輕鬆鬆地用一下午就為Python數據分析代碼製作出用戶界面。

體系架構

Flask和React

Dash應用是運用Flask與JSON數據包進行HTTP請求通訊的Web服務。Dash的前端渲染器組件使用React.js，這是由Facebook開發與維護的JavaScript用戶界面庫。

Flask很棒，已被Python社區廣泛採用，並部署於眾多生產環境中。Dash應用的開發者可以設置Flask的底層實例和屬性，高級開發者還可以使用眾多的Flask插件擴展Dash應用。

React也很贊，在Plotly，我們用React重寫了全部Web平台和在線視圖編輯器。React最了不起的一點是它的社區作品眾多且個個優秀。React的開源社區已經公布了數以千計的高質量互動式組件，包括下拉菜單、滑塊、日曆，還有互動式表格。

Dash整合了Flask與React的強大功能，使非專業Web開發的Python數據分析師也可以使用。

從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

DIV，IMG，Table等HTML標籤由React進行動態渲染，它們的Python類則通過dash_html_componet庫生效。下拉菜單、圖形、滑塊等核心互動式組件由Dash核心團隊通過dash_core_components庫提供。如果用戶自行編寫組件庫，可使用這兩個庫調用開源的標準React-to-Dash工具鏈進行支持。

Dash不捆綁使用標準組件庫，Dash組件庫可通過核心Dash庫單獨載入。利用React-to-Dash工具鏈，用戶可以輕鬆地將React.js組件寫入或接入Dash應用的Python類，這裡是自製組件庫教程。當然，你也可以請Dash的核心團隊幫忙構建一個組件。

並發-多用戶應用

Dash應用的狀態儲存在前端，比如說瀏覽器。這就允許Dash應用實現多租戶設置：多個用戶可以使用獨立的會話同時進行Dash應用交互操作。

CSS與默認的樣式

核心庫沒有包含CSS與默認樣式，這樣做是為了支持模塊化和獨立版本控制，鼓勵Dash應用的開發者自定義應用的界面外觀，請在此查閱由Dash核心團隊維護的核心樣式指南。

數據可視化

Dash的圖形組件使用plotly.js對圖形進行渲染，Plotly.js與Dash配合默契，它使用聲明式編程模式，開源且速度快，還支持科技計算、金融、商務類的各種視圖。Plotly.js基於D3.js構建，支持導出符合出版標準的高清矢量圖與優先性能的WebGL視圖。

Dash的圖形元素與開源的plotly.py庫共享同樣的語法，開發者可以輕易地在兩者之間切換。Dash的圖形組件從plotly.js事件系統中鉤取信息，允許開發者編寫響應在Plotly圖形中懸停、點擊、選點等操作的應用。

Plotly.js圖形組件支持的一些視圖類型，更多內容請見plotly.py文檔。

Dash應用示例庫中使用plotly.js視圖的例子。

開源庫

以下資源庫中提供了相關代碼：

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, https://plot.ly/dash

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

現有技術

Dash是Python生態系統中的新兵，但支撐它的理念與驅動力已在不同語言和應用中存續了數十年。

如果你是從Excel陣營中轉移過來的，那算是來對地方了。Dash與Excel都採用了「響應式」的程序模型。在Excel中，輸入單元格發生變化時，輸出單元格也會自動更新。所有單元格都可以是輸出或輸入，也可以同時既是輸入也是輸出。

輸入單元格並不關注那些依賴於它們的輸出單元格，這就讓添加新的輸入單元格或連接一系列單元格變得非常方便。這裡是一個Excel 「應用」。

下面的例子是用Dash實現的類似Excel的效果。用滑塊、輸入框、下拉菜單與圖形等富Web組件取代Excel中的單元格，用Python代碼取代Excel函數或VBA腳本，這就是用Dash重寫的Excel表單應用：

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占統治地位只是技術能力的問題，畢竟不少電子表格開發者的Excel、VBA，甚至SQL水平都很高。

我認為更多是因為分享Excel比Python程序更容易，並且編輯Excel單元格也編輯比命令行參數更方便。

但是，在Excel中建模還是有很多局限性：電子表格經常會變的越來越大，越大就越不穩定，越難移植到生產環境，也很難進行審查、測試和維護。參考一下這篇文章：Remember the 2013 pro-austerity Excel typo?

我希望使用Dash能夠更輕鬆地開發Python數據分析項目，通過共享同樣的函數式與響應式原則，編寫Dash應用幾乎和編寫電子表格一樣簡單，而且還更強大、更易於展示。

如果你使用R語言開發，那你還是蠻幸運的。Shiny僅使用R語言即可開發Web應用，它也是一種響應式程序框架，非常棒！你還可以使用Shiny和Plotly的R語言庫創建互動式圖形。Dash和Shiny很像，但是Dash不會成為Shiny的複製品，畢竟Python和R之間的習語與理念非常不同，所使用的語法也不同。

使用R語言的Shiny構建的互動式Web應用

如果你使用MATLAB，那你一定熟悉MATLAB的用戶界面「GUIDE」。Mathworks可以說是科技計算的鼻祖，要知道GUIDE是2004開發的，那可是13年前！

MATLAB中構建的GUIDE應用

如果使用資料庫管理數據，可以使用Tableau或其它BI工具。Tableau很了不起，它提高了業界對數據分析的期望值，即終端用戶應該可以自主分析，並能夠直接使用工具探索數據。它還使得鑽取與交叉篩選這樣的概念變得流行。

Tableau的交叉篩選

Dash是BI工具的補充，這些工具在處理結構化數據時異常強大，但在數據轉換與分析時，它們很難與Python這樣的編程語言相提並論，後者的廣度與靈活性，還有社區支持都遠超前者。

最後，我要給Jupyter Widget（小組件）點個贊，Jupyter在其Notebook界面中提供了一個非常贊的Widget框架，可以為在本地運行的Jupyter Notebook中的圖形添加滑塊等功能。

Dash的Widget與Jupyter類似。在Jupyter Notebook中，可以直接使用代碼添加Widget。在Dash中，代碼與控制項和應用是分開的，這是因為，Dash的目標是開發易於分享的應用，而不是代碼或筆記。你可以混搭使用這些工具，也可以在Jupyter Notebook環境中編寫Dash應用。

我們還是nteract項目的忠粉，這個項目將Jupyter Notebook打包成一個桌面程序，大大地降低了使用Python和Jupyter Notebook的門檻。

許可與開源的商業模型

Plotly是VC投資的初創企業，我們公司創建於2013年，2015年的時候，我們開源了核心技術plotly.js（MIT許可證），同時，還維護了讓Python、R和MATLAB調用plotly.js的開源庫，並發布了一個可以創建視圖的Web應用，該應用可以將視圖與資料庫進行關聯，這個關聯器也是開源的。

我們提供了針對視圖託管、共享平台以及視圖編輯與資料庫查詢應用的訂閱，這個平台適用於Web（plot.ly），也可在本地部署。

我們還提供了Dash的升級版，Dash支持MIT許可證，可以免費使用和修改。企業用戶則可選擇Dash企業版，可以輕鬆地在企業防火牆的保護下在伺服器端發布和配置Dash應用。

Dash企業版的目標是在企業內部輕鬆、安全地共享Dash應用。無需dev-ops，它可以處理URL路由、監控、錯誤處理、部署、版本控制和包管理等操作，通過企業的活動目錄（Active Directory）或LADP用戶賬戶可以對部署的Dash企業版應用進行配置。

僅在本地使用開源版本或在Heroku、Digital Ocean這樣的平台上部署Dash應用，是沒有任何限制的。如果有足夠的財力，最好購買支持計劃，Plotly的工程師將為您提供一對一的幫助。如需其它定製服務或實現特定功能，請了解我們的高級開發計劃。

對於產品型公司而言，開源仍是個新課題。今時今日，我們能夠讓一半多的員工專職開發開源產品，這必須要感謝每一個大力支持過我們的人??

感謝大家關注Dash。今年夏天和明年秋天，我會在奧斯汀舉辦的Scipy會議和紐約舉辦的Plotcon上介紹Dash，如果您能出席這兩場活動，歡迎前來捧場！當然，咱們也可以在Github上見??