在 Web 上嵌入交互式 Python 图

关于如何使用 Plotly Chart Studio 和 Datapane 在网络上共享 Python 绘图的指南

Introduction

数据科学管道中最重要的步骤之一是数据可视化。事实上，借助数据可视化，数据科学家可以快速收集有关他们可用数据和任何可能异常情况的见解。

传统上，数据可视化包括创建静态图像和汇总统计数据，然后可以使用 Python 和 Matplotlib 等库将其导出为图像（例如 PNG、JPG、SVG）。虽然，由于 Plotly、Bokeh 或 Altair 等库的发展，现在可以创建更多交互式可视化，甚至可以与同事和股东共享的在线仪表板。[0][1]

完成项目工作后，您通常可以使用两种不同的方法与任何相关方共享您的可视化和结果：

• 创建某种形式的数据驱动的演示文稿。[0]
• 创建一个项目摘要内部网页，其中嵌入了所创建的任何交互式绘图。

在本文中，我们现在将探讨第二种方法，提供两种可能的解决方案：Plotly Chart Studio 和 Datapane。本文使用的所有代码都可以在我的 GitHub 帐户上通过此链接公开获得。[0]

绘图图表工作室

Plotly 是一个基于 plotly.js 构建的开源 Python 库。使用 Plotly，您可以使用 Python、R、Julia 和 Javascript 等编程语言创建交互式图表和仪表板。[0]

为了创建易于共享的图表，Plotly 提供了图表工作室服务。使用此服务，您可以像往常一样通过编程创建绘图，然后将其添加到您的在线收藏中，或者您可以通过在线用户界面上传数据并从那里创建图表（根本不需要编码）。此链接提供了一些使用 Plotly Chart Studio 创建的绘图示例。[0][1]

对于这个例子，我们将使用 Python 的编程选项和免费提供的 Kaggle 学生在考试数据集 [1] 中的表现。如果您也有兴趣探索创建图形的用户界面，Plotly 提供了此链接上可用的指导教程列表。[0][1]

为了开始使用 Plotly Chart Studio，我们首先需要创建一个帐户，然后使用以下命令安装 Python 库：[0]

pip install chart_studio

此时，我们需要保存我们的帐户 API 密钥，以便能够将使用 Python 创建的图形共享到我们的在线帐户中。这可以通过登录到您的帐户，进入设置，然后进入 API 密钥来找到。我们现在准备开始我们的数据探索性分析。

数据可视化

首先，我们需要导入所有必要的依赖项并检查学生在考试中的表现数据集的头部（图 1）。[0]

使用下面的代码片段，我们可以创建一个 3D 散点图并将其保存为我们的在线集合 3d_embed_ex（请记住添加您的 Plotly Chart Studio 用户名和您之前从您的帐户设置中复制的 API 密钥）。

chart_studio.tools.set_credentials_file(username='TODO', 
                                        api_key='TODO')

fig = px.scatter_3d(df, x='math score', y='reading score', z='writing score',
                    color='test preparation course')
py.plot(fig, filename = '3d_embed_ex', auto_open=True)
fig.show()

转到您的 Plotly Chart Studio 帐户和您的我的文件部分，然后您应该能够看到您刚刚在 Python 中创建的图表。单击“共享”，然后单击“嵌入”选项卡，您将能够看到 iframe 和 HTML 代码，可用于在网络上的任何位置共享您的交互式绘图（如下面的图 2 所示）。

Datapane

Datapane 是一个 Python 库，旨在通过 Web 嵌入、自动生成的 HTML 文件等更轻松地共享任何形式的数据分析。使用 Datapane 的主要优势之一是它支持许多数据可视化库，例如：matplotlib、plotly、bokeh、pandas 等等。此外，使用 Datapane，不仅可以共享单个绘图，还可以共享绘图和 Latex/Markdown 文本的集合。[0]

为了开始使用 Datapane，我们首先需要创建一个免费帐户并以与 Plotly Chart Studio 相同的方式获取我们的 API 密钥。然后可以使用以下命令安装 Python 库：[0]

pip install datapane

数据可视化

为了演示如何使用 Datapane，将再次使用学生在考试中的表现数据集（如图 1 所示）。然后使用以下代码片段，可以创建 Datapane 嵌入（请记住添加您之前从帐户设置中复制的 Datapane API 密钥）。此外，使用保存选项，您还可以创建报告的 HTML 文件版本，然后您可以与您想要的任何人共享，而无需在网络上公开您的报告。[0]

import pandas as pd
import datapane as dp
import plotly.express as px

dp.login("TODO")
fig = px.scatter_3d(df, x='math score', y='reading score', z='writing score',
                    color='test preparation course')

report = dp.Report(
  dp.Text('# Students Performance in Exams'),
  dp.Plot(fig, caption="Interactive plot embedded on the web")
)

report.save("3d_embed_ex2.html", open=True)
report.upload(name='3d_embed_ex2')

fig.show()

为了共享您新创建的报告，您只需转到您的 Datapane 帐户，单击我的报告，选择您感兴趣的报告，然后单击共享（图 3）。

然后可以通过添加更多页面和可视化来创建更复杂的报告（图 4）。在以下示例中，创建了一个两页报表：一个显示数据集的前五行，另一个显示 3D 散点图。

fig = px.scatter_3d(df, x='math score', y='reading score', z='writing score',
                    color='test preparation course')

report = dp.Report(
    dp.Page(
        title="Overview",
        blocks=["# Students Performance in Exams", 
                dp.Table(df.head(), caption="Dataframe Head")]),
    dp.Page(
        title="Plot",
        blocks= [
            dp.Text('# Math, Reading and Writing scores comparison'),
            dp.Plot(fig, caption="Interactive plot embedded on the web")]
    )
)

report.upload(name='3d_embed_ex3')

fig.show()

Conclusion

在本文中，我们探讨了 Plotly Chart Studio 和 Datapane 作为在 Web 上嵌入交互式图表的两个可能选项。创建交互式图表不仅可以用于准备和探索数据，还可以用于创建有关机器学习模型的可视化和界面。用于此类任务的两个最常用的库是 Streamlit 和 Gradio。有关此主题的其他信息，请参阅我的“机器学习可视化”文章。[0][1]

Contacts

如果您想随时了解我的最新文章和项目，请在 Medium 上关注我并订阅我的邮件列表。以下是我的一些联系方式：[0][1]

• Linkedin[0]
• 个人网站[0]
• 中型[0]
• GitHub[0]
• Kaggle[0]

Bibliography

[1] “学生在考试中的表现”（SATWIK VERMA，许可证 CC0：公共领域）。访问地址：https://www.kaggle.com/datasets/satwikverma/students-performance-in-exams[0][1]