Python 交互式数据可视化框架：Dash（上）

• 创建一个Dash应用程序
• 如何使用Dash核心组件和HTML组件
• 自定义Dash应用程序的样式
• 使用回调函数构建交互式应用程序
• 在Heroku上部署您的应用程序

• 1、Flask提供了Web服务器功能。
• 2、React.js呈现网页的用户界面。
• 3、Plotly.js生成您在应用程序中使用的图表。

• 可实时分析交易头寸的dashboard仪表盘https://dash-gallery.plotly.host/dash-web-trader/
• 数百万个 Uber 行程的可视化

• 一个交互式的财务报告

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

• 根据应用的布局来定义应用的外观。
• 使用回调函数来确定应用程序的哪些部分是交互式的，以及它们如何响应。

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可帮助您初始化应用程序。
• dash_core_components允许您创建交互式组件，例如图形，下拉列表或日期范围。
• dash_html_components使您可以访问HTML标记。
• pandas可以帮助您阅读和整理数据。

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)