🧄Python交互式D3.js可视化应用样板
Last updated
Last updated
Python | D3.js | 可视化
可视化数据可能是项目成功的关键，因为它可以揭示数据中隐藏的洞察力，并提高理解力。 说服人们的最好方法是让他们看到他们的数据并与之交互。 尽管 Python 中提供了许多可视化包，但制作精美的独立和交互式图表并不总是那么简单，这些图表也可以在您自己的机器之外工作。
D3 的主要优势在于它适用于 Web 标准，因此除了浏览器之外，您不需要任何其他技术来使用 D3。 重要的是，交互式图表不仅可以帮助告诉读者一些事情，还可以让读者看到、参与和提出问题。 本文中，我将概述如何使用 Python 构建自己的独立、交互式强制导向 D3 网络。 请注意，这些步骤类似于任何其他 D3 图表。
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 网站提供 168 个工作图表，允许在交互过程中进行高性能增量更新，并支持拖动和缩放等流行交互。 这些图表可用于多种用途，例如定量分析、可视化层次结构、创建网络图，还可以用于条形图、折线图、散点图、径向图、地理投影以及用于探索性解释的各种其他交互式可视化。 图 1 显示了一些精选图表。
让我们开始我们的 D3-Python 项目吧！ 在我们对 D3 图表进行 Python 化之前，我们需要了解 D3 的工作原理。 我将通过在 D3（不使用 Python）中创建一个非常小的导向网络图来演示它，然后，我将演示在 Python 中的集成，D3 中图表开发的最佳方式将分为四个不同的部分：
级联样式表 (CSS)
D3 模块包含所有必需的库
用于构建图表的 Javascript
数据为 JSON 文件
每个部分在图表中都有自己的角色，为了获得一个工作版本，我们需要连接我们可以在 HTML 文件中执行的所有部分，如图 2 所示。在接下来的部分中，我将描述每个部分的角色和实现部分
.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 中有使用 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}"]}