Python交互式D3.js可视化应用样板

可视化数据可能是项目成功的关键，因为它可以揭示数据中隐藏的洞察力，并提高理解力。 说服人们的最好方法是让他们看到他们的数据并与之交互。 尽管 Python 中提供了许多可视化包，但制作精美的独立和交互式图表并不总是那么简单，这些图表也可以在您自己的机器之外工作。

D3 的主要优势在于它适用于 Web 标准，因此除了浏览器之外，您不需要任何其他技术来使用 D3。 重要的是，交互式图表不仅可以帮助告诉读者一些事情，还可以让读者看到、参与和提出问题。 本文中，我将概述如何使用 Python 构建自己的独立、交互式强制导向 D3 网络。 请注意，这些步骤类似于任何其他 D3 图表。

使用D3.js动机

D3 是 Data-Driven Documents 的缩写，它是一个 JavaScript 库，用于在 Web 浏览器中生成动态、交互式数据可视化。 它利用可缩放矢量图形 (SVG)、HTML5 和级联样式表 (CSS) 标准。 D3 也被命名为 D3.js 或 d3js。使用 D3 上面的交互式 Python 解决方案有很多优点，我列举几个：

• D3 是一个 Javascript 库。因此，它可以与您选择的任何 JS 框架一起使用，例如 Angular.js、React.js 或 Ember.js。
• D3 专注于数据，因此，如果您处于数据科学领域，那么无需付出任何额外努力即可保持数以万计的数据点保持交互。
• D3 是轻量级的，直接与 Web 标准一起工作，因此速度非常快，并且适用于大型数据集。
• D3 是开源的。您可以使用源代码并添加自己的功能。
• D3 使用 Web 标准，您不需要除浏览器之外的任何其他技术或插件来使用 D3。
• D3 不提供任何特定功能，它使您可以完全控制您的可视化，并按照您想要的方式对其进行自定义。

D3图表

D3 是一组旨在协同工作的模块； 您可以独立使用这些模块，也可以将它们作为默认构建的一部分一起使用。 D3 网站提供 168 个工作图表，允许在交互过程中进行高性能增量更新，并支持拖动和缩放等流行交互。 这些图表可用于多种用途，例如定量分析、可视化层次结构、创建网络图，还可以用于条形图、折线图、散点图、径向图、地理投影以及用于探索性解释的各种其他交互式可视化。 图 1 显示了一些精选图表。

Python使用D3

让我们开始我们的 D3-Python 项目吧！ 在我们对 D3 图表进行 Python 化之前，我们需要了解 D3 的工作原理。 我将通过在 D3（不使用 Python）中创建一个非常小的导向网络图来演示它，然后，我将演示在 Python 中的集成，D3 中图表开发的最佳方式将分为四个不同的部分：

1. 级联样式表 (CSS)
2. D3 模块包含所有必需的库
3. 用于构建图表的 Javascript
4. 数据为 JSON 文件

每个部分在图表中都有自己的角色，为了获得一个工作版本，我们需要连接我们可以在 HTML 文件中执行的所有部分，如图 2 所示。在接下来的部分中，我将描述每个部分的角色和实现部分

级联样式表 (CSS)

.node text {
  font-size: 10px;
  font-family: "Helvetica";
  stroke: none;
  fill: grey;
}

.link {
  stroke: #999;
  stroke-opacity: .6;
}

h3 {
  color: #1ABC9C;
  text-align: center;
  font-style: italic;
  font-size: 14px;
  font-family: "Helvetica";
}

D3模块

构建图表的 Javascript

数据

图表是我们需要获得正确形状的数据。 尽管 D3 中有使用 d3.json() 导入本地 .json 文件的功能，但它可能不起作用，因为使用 D3 导入本地 csv 或 json 文件被认为是不安全的。 一种解决方案是将数据直接嵌入到最终的 HTML 文件中。 但是，根据数据量的不同，它可能会产生大量的 HTML 文件。 尽管如此，将数据直接嵌入 HTML 会将所有脚本和数据集成到一个文件中，这却非常实用。 json 数据文件的示例显示在下面的框中，其中描述了一些节点和边。 我们可以在 HTML 中嵌入这样的数据块。

graph = {"links":[{"node_weight":5,"edge_weight":5,"edge_width":20,"source_label":"node_A","target_label":"node_F","source":0,"target":2},{"node_weight":3,"edge_weight":3,"edge_width":12,"source_label":"node_A","target_label":"node_M","source":0,"target":4}"]}

上述四部分连接

将D3转入Python

源代码

附录：

Python和Pandas创建D3力定向网络图（+源代码）

Python和D3.js实时数据可视化（+源代码）

Flask和D3.js农业生产数据可视化（+源代码）

详情参阅 - 亚图跨际