构建互动数据可视化的终极指南：使用5个步骤和gen Ai创建低代码仪表板

在本教程中

您将学习如何使用 Vizro 创建一个低代码数据 Dashboard，该框架是建立在 Dash, Plotly 和 Pydantic 之上的开源框架。您将学习如何迭代生成 AI 提示以构建三个 Plotly 图表，然后将这些提示添加到 PyCafe 上的 Vizro Dashboard 中，最后添加一些交互式控件。

图片来源：Stockcake

这是 Dashboard 的预览：

本教程的最终 Dashboard 结果。

关于使用生成性人工智能的说明

本教程的部分内容使用了 OpenAI 模型。要自己完成这些步骤，您必须拥有一个带有可用付费积分的 OpenAI 账户。任何免费的账户都不够用。

在使用生成性人工智能模型之前，您应该查看 OpenAI 关于风险缓解的指南，以了解潜在的模型限制和最佳实践。有关负责任使用的更多详细信息，请查看 OpenAI 网站。

什么是 PyCafe？

该项目托管在 PyCafe，这是一个免费的平台，可以在浏览器中创建、运行、编辑和分享 Python Web 应用程序。它可用于构建 Vizro 仪表板，以及 Streamlit 和 Dash 应用程序。共享 PyCafe 项目的链接使任何人都可以在本地访问代码和可视化，而无需安装任何 Python 包。

数据

为了创建这个Dashboard，我使用了我在LinkedIn上的所有connections的数据集。我访问了LinkedIn网站上_设置_的_Data privacy_部分，选择了_获取您的数据副本_，然后选择了_connections_。几分钟后，我通过电子邮件收到了数据的链接。CSV包含了连接的行的字符串列：他们的名字、姓氏、个人资料的URL、他们的电子邮件地址（如果他们公开了）、当前公司、当前职位，以及我们连接的日期。在使用数据之前，我删除了前三行关于潜在缺失电子邮件的警告，并将文件重命名为connections.csv。

我使用了我的真实数据来制作示例，但为了保护我的connections的隐私，在撰写和发布这篇文章之前，我制作了一套新的假数据。假数据字段与真实LinkedIn数据转储的layout相匹配，因此如果您下载自己的LinkedIn数据，可以将其替换为我虚构的数据集，它将在PyCafe项目中完美运行（只要您删除那前三行）。

使用 Vizro-AI 生成图表

在第一步中，我们将原型构建一组使用托管版本的 Vizro-AI 的 Plotly 图表，网址为 py.cafe/app/vizro-official/vizro-ai-charts. 访问该网站，它会打开一个设置面板，您可以在其中为您选择的供应商设置 API 密钥。撰写时，您可以使用 OpenAI、Anthropic、Mistral 或 xAI：

原型设计一组 Plotly 图表

一旦 API 密钥设置完成，返回主屏幕并上传项目的假数据，该数据 存储在我 GitHub 的仓库中。现在我们可以通过迭代文本来构建一些图表，使用自然语言描述我们想要看到的内容，以形成有效的提示。

常见职位名称

第一个图表应该显示我连接中最常见的当前职位名称。使用 gpt-4o，提示如下：

创建一个水平条形图，显示最常见的 20 个职位，频率最高的条形位于图表顶部。

图表 1：我连接中最常见的职位名称。

以下是生成图表所使用的代码：

import vizro.plotly.express as px
from vizro.models.types import capture

@capture("graph")
def custom_chart(data_frame):
    position_counts = data_frame["Position"].value_counts().head(20)

    fig = px.bar(
        position_counts,
        x=position_counts.values,
        y=position_counts.index,
        orientation="h",
        title="Top 20 Most Common Positions",
    )

    fig.update_layout(
        yaxis_title="Position",
        xaxis_title="Frequency",
        yaxis=dict(categoryorder="total ascending"),
    )

    return fig

常见雇主

第二个图表展示了我连接中最常见的当前雇主公司。

使用公司数据创建一个甜甜圈图，显示最常见的5个。

图表2：我连接中最常见的公司（请注意数据已被清理；这些公司是本教程的虚构公司）。

以下是用于生成图表的代码：

import vizro.plotly.express as px
from vizro.models.types import capture

@capture("graph")
def custom_chart(data_frame):

    company_counts = data_frame["Company"].value_counts().nlargest(5)

    top_companies = company_counts.reset_index()
    top_companies.columns = ["Company", "Count"]

    fig = px.pie(
        top_companies,
        values="Count",
        names="Company",
        hole=0.4,
        title="Top 5 Most Common Companies",
    )

    return fig

累计连接总数

第三个图表显示了我多年来的累计连接数。经过几次迭代才得到了正确的提示。

在dataframe中创建一个名为Year的新列，并为每一行通过计算Connected On数据中的年份添加一个值。然后计算每年的连接累计总和，并绘制一个条形图，显示每年的连接总数。在x轴上绘制年份，在y轴上绘制连接数。

叠加一个散点图，显示按年份计算的累计连接总数，右侧y轴使用不同的刻度。

累计连接数。

这是代码：

import pandas as pd
import plotly.graph_objects as go
from vizro.models.types import capture

@capture("graph")
def custom_chart(data_frame):

    data_frame["Year"] = pd.to_datetime(data_frame["Connected On"]).dt.year

    yearly_counts = data_frame["Year"].value_counts().sort_index()

    cumulative_counts = yearly_counts.cumsum()

    fig = go.Figure()

    fig.add_trace(go.Bar(x=yearly_counts.index, y=yearly_counts, name="每年的连接"))

    fig.add_trace(
        go.Scatter(
            x=cumulative_counts.index,
            y=cumulative_counts,
            name="累计连接",
            yaxis="y2",
        )
    )

    fig.update_layout(yaxis2=dict(title="累计总数", overlaying="y", side="right"))
    return fig

将图表添加到Vizro仪表板

此时，我们已经有了将放置在交互式仪表板中的Plotly图表的代码，我们不需要再使用生成AI进行其他操作。我们将继续在PyCafe上使用Vizro来处理仪表板。

导航到py.cafe并创建一个新的Vizro项目，该项目预先填充了一个样板教程项目。上传数据文件connections.csv以将数据添加到项目中。

如果您想探索这个样板代码，Vizro文档会逐步讲解代码，以解释常见功能和构建仪表板的方法。

但是，对于本教程，只需用这个框架替换样板项目中的现有代码，我们将用我们的原型图表来充实它：

import vizro.plotly.express as px
from vizro import Vizro
import vizro.models as vm

page = vm.Page(
 title="My LinkedIn connections",
 layout=vm.Layout(grid=[[0, 1], [0, 2]]),
 components=[
 
 ],
)

dashboard = vm.Dashboard(pages=[page], theme="vizro_light")
Vizro().build(dashboard).run()

现在我们将添加数据处理代码和Vizro-AI输出的三段代码。我们还将添加components代码作为vm.Page的参数，以调用这些生成AI代码的块。

components=[
 vm.Graph(id="role_bar_chart_id", figure=common_jobs(data_frame=df)),
 vm.Graph(id="company_pie_chart_id", figure=common_companies(data_frame=df)),
 vm.Graph(id="growth_cumulative_chart_id", figure=cumulative_totals(data_frame=df)),
],

就这样！我创建了一个在此处停止的PyCafe项目（您可以在这里找到它），以便于审查和扩展。文章的其余部分将在一个单独的项目中继续，通过包括一些简单的控件来添加交互性。

基本项目位于py.cafe/stichbury/linkedin-connections-prototype

添加交互性

让我们扩展仪表板，添加控件以说明如何与展示进行交互和更改。 Vizro 文档 提供了一系列操作指南，作为示例，我们将添加两个滑块，以使用户能够调整在各自图表中显示的共同职位和公司数量。控件的代码如下（相关的图表功能也需要更新，以接受一个额外的参数，以反映用户选择的值）：

controls=[ vm.Parameter( targets=[“role_bar_chart_id.top_n”], selector=vm.Slider(min=0, max=30, step=5, value=20, title=“显示前 n 个职位：”), ),

vm.Parameter( targets=[“company_pie_chart_id.top_n”], selector=vm.Slider(min=0, max=30, step=5, value=5, title=“显示前 n 个公司：”), ) ]

您可以在此项目中查看交互式仪表板的完整代码：py.cafe/stichbury/linkedin-connections-project-v1。

总结

本教程使用了稍超过100行的代码和注释，制作了一个具有一些互动功能的基本Dashboard。我们使用Vizro-AI通过自然语言提示生成了一组Plotly图表的代码，然后将它们插入到PyCafe的骨架Vizro Dashboard中。

由于Vizro对布局、导航和图表模板的设计有明确的意见，因此该项目可以进一步扩展和改进。如果您拥有设计技能并想修改Dashboard的外观，可以在CSS中覆盖默认设置。想要更多自定义？您可以扩展默认代码以结合Dash或React.js的自定义，或者仅仅插入自定义的Plotly图表、表格、Dashboard组件、操作或反应式HTML组件。

资源

• Vizro GitHub
• Vizro 文档
• PyCafe 托管的 chartbuilder
• PyCafe 用于项目