Python 交互式數(shù)據(jù)可視化框架：Dash（上）

• 創(chuàng)建一個(gè)Dash應(yīng)用程序
• 如何使用Dash核心組件和HTML組件
• 自定義Dash應(yīng)用程序的樣式
• 使用回調(diào)函數(shù)構(gòu)建交互式應(yīng)用程序
• 在Heroku上部署您的應(yīng)用程序

• 1、Flask提供了Web服務(wù)器功能。
• 2、React.js呈現(xiàn)網(wǎng)頁(yè)的用戶界面。
• 3、Plotly.js生成您在應(yīng)用程序中使用的圖表。

• 可實(shí)時(shí)分析交易頭寸的dashboard儀表盤https://dash-gallery.plotly.host/dash-web-trader/
• 數(shù)百萬個(gè) Uber 行程的可視化

• 一個(gè)交互式的財(cái)務(wù)報(bào)告

c:\>?mkdir?avocado_analytics?&&?cd?avocado_analytics
c:\>?c:\path\to\python\launcher\python?-m?venv?venv
c:\>?venv\Scripts\activate.bat

$?mkdir?avocado_analytics?&&?cd?avocado_analytics
$?python3?-m?venv?venv
$?source?venv/bin/activate

(venv)?$?python?-m?pip?install?dash==1.13.3?pandas==1.0.5

avocado_analytics/
|
├──?venv/
|
└──?avocado.csv

• 根據(jù)應(yīng)用的布局來定義應(yīng)用的外觀。
• 使用回調(diào)函數(shù)來確定應(yīng)用程序的哪些部分是交互式的，以及它們?nèi)绾雾憫?yīng)。

import?dash
import?dash_core_components?as?dcc
import?dash_html_components?as?html
import?pandas?as?pd

data?=?pd.read_csv("avocado.csv")
data?=?data.query("type?==?'conventional'?and?region?==?'Albany'")
data["Date"]?=?pd.to_datetime(data["Date"],?format="%Y-%m-%d")
data.sort_values("Date",?inplace=True)

app?=?dash.Dash(__name__)

• dash可幫助您初始化應(yīng)用程序。
• dash_core_components允許您創(chuàng)建交互式組件，例如圖形，下拉列表或日期范圍。
• dash_html_components使您可以訪問HTML標(biāo)記。
• pandas可以幫助您閱讀和整理數(shù)據(jù)。

app.layout?=?html.Div(
????children=[
????????html.H1(children="Avocado?Analytics",),
????????html.P(
????????????children="Analyze?the?behavior?of?avocado?prices"
????????????"?and?the?number?of?avocados?sold?in?the?US"
????????????"?between?2015?and?2018",
????????),
????????dcc.Graph(
????????????figure={
????????????????"data":?[
????????????????????{
????????????????????????"x":?data["Date"],
????????????????????????"y":?data["AveragePrice"],
????????????????????????"type":?"lines",
????????????????????},
????????????????],
????????????????"layout":?{"title":?"Average?Price?of?Avocados"},
????????????},
????????),
????????dcc.Graph(
????????????figure={
????????????????"data":?[
????????????????????{
????????????????????????"x":?data["Date"],
????????????????????????"y":?data["Total?Volume"],
????????????????????????"type":?"lines",
????????????????????},
????????????????],
????????????????"layout":?{"title":?"Avocados?Sold"},
????????????},
????????),
????]
)

<div>
??<h1>Avocado?Analyticsh1>
??<p>
????Analyze?the?behavior?of?avocado?prices?and?the?number
????of?avocados?sold?in?the?US?between?2015?and?2018
??p>
??
div>

if?__name__?==?"__main__":
????app.run_server(debug=True)

import?dash
import?dash_core_components?as?dcc
import?dash_html_components?as?html
import?pandas?as?pd

data?=?pd.read_csv("avocado.csv")
data?=?data.query("type?==?'conventional'?and?region?==?'Albany'")
data["Date"]?=?pd.to_datetime(data["Date"],?format="%Y-%m-%d")
data.sort_values("Date",?inplace=True)

app?=?dash.Dash(__name__)

app.layout?=?html.Div(
????children=[
????????html.H1(children="Avocado?Analytics",),
????????html.P(
????????????children="Analyze?the?behavior?of?avocado?prices"
????????????"?and?the?number?of?avocados?sold?in?the?US"
????????????"?between?2015?and?2018",
????????),
????????dcc.Graph(
????????????figure={
????????????????"data":?[
????????????????????{
????????????????????????"x":?data["Date"],
????????????????????????"y":?data["AveragePrice"],
????????????????????????"type":?"lines",
????????????????????},
????????????????],
????????????????"layout":?{"title":?"Average?Price?of?Avocados"},
????????????},
????????),
????????dcc.Graph(
????????????figure={
????????????????"data":?[
????????????????????{
????????????????????????"x":?data["Date"],
????????????????????????"y":?data["Total?Volume"],
????????????????????????"type":?"lines",
????????????????????},
????????????????],
????????????????"layout":?{"title":?"Avocados?Sold"},
????????????},
????????),
????]
)

if?__name__?==?"__main__":
????app.run_server(debug=True)