Dash，方便创建「交互式」Web图表！

double

发布于 2024-02-26 16:59:36

1090

发布于 2024-02-26 16:59:36

文章被收录于专栏：算法channel算法channel

你好，我是郭震

这篇文章，探讨 Dash —— 一个由 Plotly 开发的优秀 Python 框架，专为构建丰富的网络分析应用而设计。

推荐使用这个Python工具包！

Dash 使得数据分析师能够使用 Python 创建互动式的 web 应用，而无需深入了解复杂的前端技术如 HTML 或 JavaScript。

要开始使用 Dash，首先需要通过 pip 安装：

pip install dash

Dash 的核心优势在于其能够让用户以非常直观的方式构建出包含丰富数据可视化组件的 web 应用。

Dash 应用由两大部分组成：布局（Layout）和交互回调（Callbacks）。

布局定义了应用的外观和排列方式，而回调则定义了应用的互动性。

让我们通过两个示例来进一步了解 Dash 的应用。

示例 1：基础数据可视化应用

假设我们想展示一个简单的图表，显示不同种类的鸢尾花的花瓣长度分布，我们可以这样做：

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px

# 加载数据
df = px.data.iris()

# 初始化 Dash 应用
app = dash.Dash(__name__)

# 定义应用布局
app.layout = html.Div([
    html.H1("鸢尾花数据可视化"),
    dcc.Graph(
        figure=px.histogram(df, x="petal_length", color="species", barmode="group")
    )
])

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

此示例创建了一个简单的 Dash 应用，展示了一个按种类分组的鸢尾花花瓣长度的直方图。

生成前端网页，支持交互：

点击某个分类，隐藏显示此类，从而非常容易地得到去除一个分类后的结果图：

示例 2：交互式数据探索应用

进一步地，我们可以添加一些交互元素，比如下拉菜单，让用户选择不同的数据维度进行查看：

import dash
from dash import dcc, html, Input, Output
import plotly.express as px

app = dash.Dash(__name__)

df = px.data.iris()

app.layout = html.Div([
    html.H1("鸢尾花数据探索"),
    dcc.Dropdown(
        id='dropdown',
        options=[{"value": x, "label": x} for x in df.columns],
        value=df.columns[0],
        clearable=False,
    ),
    dcc.Graph(id="bar-chart"),
])

@app.callback(
    Output("bar-chart", "figure"), 
    [Input("dropdown", "value")]
)
def update_bar_chart(dimension):
    fig = px.histogram(df, x=dimension, color="species")
    return fig

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

在这个示例中，用户可以通过下拉菜单选择不同的维度（如花瓣长度、花瓣宽度等），图表会相应地更新显示所选维度的分布情况。