使用 Plotly 和 ChartJS 图形库创建 Flask 仪表板

使用 Altair 和 Plotly，我只需要将绘图转储到 JSON 变量中，然后将其解析为我们的 .HTML 文件。 如果你不熟悉 Altair（Plotly 与 Seaborn 或 Matplotlib 非常相似），他们在这里有一个很好的演示存储库。

Chart.js 怎么样？ 就个人而言，我认为 Chart.js 非常简单（用于基本目的），即使您不了解 Javascript 或像我一样讨厌它。 此外，通过使用所有这些绘图库，我希望涵盖命令式可视化（Matplotlib、Seaborn、Plotly 等）、声明式可视化 (Altair) 和使用 Javascript 库 (Chart.js) 的基本 Web 可视化。

创建步骤：

• 考虑外观
• 项目结构
• 数据和洞察
• 可视化
• 整合

考虑外观

我认为这是最简单的部分。为简单起见，您可以选择基本的 Bootstrap 导航栏及其布局网格，您可以在此处找到。

项目结构

这里项目从包装我的应用程序的flask_covid_dashboard 文件夹开始。 在它里面有 .env 包含我的环境变量，稍后这个变量将被 config.py 调用。 这个应用程序可以通过在终端内使用 python run.py 或 flask run 调用它来运行。 数据清理和绘图测试可以在 covid_data_cleaning.ipynb 中找到。 稍后我会将大部分代码从 covid_data_cleaning.ipynb 移动到 utils 文件夹中的文件。

数据和洞察

可视化

如果我们想在 Jupyter Notebook 和网页上显示我们的绘图，则存在一些差异。 正如我之前所写的，对于 Altair 和 Plotly，我们需要将绘图转储到 JSON 变量中，然后将其解析为我们的 .HTML 文件，Altair 将使用 Vegalite 库来显示我们的绘图，而 Plotly 也有自己的库用于此。 我不会解释我制作的每个图背后的所有细节（我把它留在了我的仓库中），只会解释如何将它放入 Flask Web 应用程序中。 在网页上显示所有这些图之前，必须将其依赖项“导入”到 标记之间的 .HTML 文件中。

使用 Plotly 进行 Web 可视化

使用 Altair 进行 Web 可视化

使用 Chart.js 进行 Web 可视化

用户输入的 Web 可视化

整合上述功能

源代码

详情参阅 - 亚图跨际