01.Python Dash网页开发：环境配置和初试

Dash类似R语言中的Shiny包，可以使用纯Python代码而不需要学习HTML、CSS、JavaScript语言就可以快速搭建一个网站，dash-bootstrap-components是Dash的拓展，提供了很多特性。

 

official site

Dash

https://dash.plotly.com/

 

dash-bootstrap-components（dbc）

https://dash-bootstrap-components.opensource.faculty.ai/

 

conda环境配置

我一直使用的是micromamba，因为比conda速度快，语法和conda一样，其中Dash网站所需要的4个包名字是dash开头，其他包是平时数据分析所需要用的；这里并未指定Python版本，自动安装的python是最新版3.10。

 

micromamba create -n dash;micromamba activate dash

micromamba -y install -c anaconda ipywidgets pandas numpy seaborn scikit-learn

micromamba -y install -c conda-forge matplotlib ipykernel dash dash-core-components dash-html-components dash-bootstrap-components

Dash网页APP初试

这里使用的是dbc官网的案例，模仿Shiny包使用KMeans给iris数据集聚类。

 

先不用管代码怎么写的，先跑起来。

 

新进一个文件iris_dash.py把下边代码复制进去。

 

"""

Dash port of Shiny iris k-means example:

 

https://shiny.rstudio.com/gallery/kmeans-example.html

"""

import dash

import dash_bootstrap_components as dbc

import pandas as pd

import plotly.graph_objs as go

from dash import Input, Output, dcc, html

from sklearn import datasets

from sklearn.cluster import KMeans

 

iris_raw = datasets.load_iris()

iris = pd.DataFrame(iris_raw["data"], columns=iris_raw["feature_names"])

 

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

 

controls = dbc.Card(

    [

        html.Div(

            [

                dbc.Label("X variable"),

                dcc.Dropdown(

                    id="x-variable",

                    options=[

                        {"label": col, "value": col} for col in iris.columns

                    ],

                    value="sepal length (cm)",

                ),

            ]

        ),

        html.Div(

            [

                dbc.Label("Y variable"),

                dcc.Dropdown(

                    id="y-variable",

                    options=[

                        {"label": col, "value": col} for col in iris.columns

                    ],

                    value="sepal width (cm)",

                ),

            ]

        ),

        html.Div(

            [

                dbc.Label("Cluster count"),

                dbc.Input(id="cluster-count", type="number", value=3),

            ]

        ),

    ],

    body=True,

)

 

app.layout = dbc.Container(

    [

        html.H1("Iris k-means clustering"),

        html.Hr(),

        dbc.Row(

            [

                dbc.Col(controls, md=4),

                dbc.Col(dcc.Graph(id="cluster-graph"), md=8),

            ],

            align="center",

        ),

    ],

    fluid=True,

)

 

 

@app.callback(

    Output("cluster-graph", "figure"),

    [

        Input("x-variable", "value"),

        Input("y-variable", "value"),

        Input("cluster-count", "value"),

    ],

)

def make_graph(x, y, n_clusters):

    # minimal input validation, make sure there's at least one cluster

    km = KMeans(n_clusters=max(n_clusters, 1))

    df = iris.loc[:, [x, y]]

    km.fit(df.values)

    df["cluster"] = km.labels_

 

    centers = km.cluster_centers_

 

    data = [

        go.Scatter(

            x=df.loc[df.cluster == c, x],

            y=df.loc[df.cluster == c, y],

            mode="markers",

            marker={"size": 8},

            name="Cluster {}".format(c),

        )

        for c in range(n_clusters)

    ]

 

    data.append(

        go.Scatter(

            x=centers[:, 0],

            y=centers[:, 1],

            mode="markers",

            marker={"color": "#000", "size": 12, "symbol": "diamond"},

            name="Cluster centers",

        )

    )

 

    layout = {"xaxis": {"title": x}, "yaxis": {"title": y}}

 

    return go.Figure(data=data, layout=layout)

 

 

# make sure that x and y values can't be the same variable

def filter_options(v):

    """Disable option v"""

    return [

        {"label": col, "value": col, "disabled": col == v}

        for col in iris.columns

    ]

# functionality is the same for both dropdowns, so we reuse filter_options

app.callback(Output("x-variable", "options"), [Input("y-variable", "value")])(

    filter_options

)

app.callback(Output("y-variable", "options"), [Input("x-variable", "value")])(

    filter_options

)

 

 

if __name__ == "__main__":

    app.run_server(debug=True, port=8888)

 

在terminal中运行

 

micromamba activate dash

python iris_dash.py

打开浏览器http://127.0.0.1:8888/#，一个交互式网页APP就OK了。

 

图片