编译：周家宇、丁慧、叶一、小宇、钱天培

今天， 将教你如何制作编程语言的网络图。如果你不知道什么是关系网络图，你可以点击下面的链接来看看最终的结果：

#,

我们可以在这里看到从过去到现在的 250 多种编程语言之间“设计影响力”的关系。下面是演示的屏幕截图：

接下来，就让我们一起来学习制作这张关系网络图吧！

在当今高度连接的世界中，互联网在现代生活中无处不在。比如消化菌的周末就是这样开始的——通过北京的交通网络进入城市，然后去你最喜欢的咖啡店的分店，将你的笔记本电脑连接到他们的Wi-Fi。接下来，登录各种常用的社交网站。

众所周知，过去几十年中一些最有影响力的公司之所以成功，是因为互联网的力量。

、、等一些社交媒体平台都依赖社交网络的小世界特性。这使他们能够有效地将用户彼此（和广告商）联系起来。

谷歌目前的成功主要是由于他们早期在搜索引擎市场的主导地位——部分是因为他们能够通过他们的 Page Rank 网络算法返回相关结果。

亚马逊高效的配送网络使他们能够在一些主要城市提供当日送达服务。

网络算法在人工智能和机器学习等领域也非常重要。神经网络领域的研究非常火爆。计算机视觉中许多不可或缺的特征检测算法在很大程度上也依赖于使用网络对图像的不同部分进行建模。

网络模型还可以解释大量科学现象，包括量子力学、生化途径以及生态和社会经济系统。

那么，鉴于它们不可否认的重要性，我们应该如何更好地理解网络及其属性？

网络的数学研究被称为“图论”，它是数学中比较容易的分支之一。本文将介绍简单的网络知识，即使你没有相关背景知识，也能轻松学会。

此外，我们将使用3.x 和一个很棒的开源软件，通过关系网络连接一系列编程语言的过去和现在的网络可视化。

首先，什么是网络？

其实，上面引用的栗子已经给出了一些线索。交通网络由目的地和路径的连接组成。社交网络通过个人和个人之间的关系进行连接。搜索引擎算法通过查看哪些页面链接到其他页面来评估不同网页的“顺序”。

更一般地说，网络是任何可以用节点和边来描述的系统，或者通俗地说，我们称之为“点和线”。

边缘连接节点示例（语言）（网络表示编程语言之间的关系）

有些系统更容易通过这种方式建立网络。社交网络可能是最明显的例子。计算机文件系统是另一种方式——文件夹和文件通过它们的“父”和“子”关系创建连接。

然而，网络的真正威力在于可以从网络的角度对许多系统进行建模，即使一开始并不明显。

代表网络

我们应该如何将点和线的图片转换为我们可以压缩的数字信号？

解决方案之一是绘制一个邻接矩阵来表示我们的网络。

如果您不熟悉矩阵的概念，这听起来可能很吓人，但不要害怕。将它们视为可以同时执行多项计算的数字网格。这是一个简单的例子：

在这个矩阵中，每行和每列的交集是 0 还是 1，这取决于每种语言是否有链接。您也可以从上图观察！

对于大多数要解决的问题，矩阵是一种很好的数学表示网络的方法。但是，从计算的角度来看，它有时可能有点麻烦。

例如，即使节点的数量相对较少（比如 1000），矩阵中的元素数量也会大得多（例如，1000^2 = 1,000,000）。

许多现实世界的系统产生稀疏网络，其中大多数节点只能连接到所有其他节点的一小部分。

如果我们将计算机内存中 1000 个节点的稀疏网络表示为邻接矩阵，那么我们将在 RAM 中存储 1,000,000 字节的数据。大多数将为零。这里有一个更有效的方法来解决这个问题。

该方法使用边列表而不是邻接矩阵。这些正是他们所说的，它们只是相互链接的节点对列表。

另一种表示网络的方法是邻接表，它列出了在每个节点后面链接到它的节点。例如：

收集数据并建立连接

任何网络模型和可视化的性能取决于用于构建网络本身的数据质量。除了保证数据准确完整之外，我们还需要一种合理的方式来推断节点之间的边。

这是非常关键的一步，任何后续的网络分析和推理都取决于“相关标准”的合理性。

例如，在社交网络分析中，您可能会根据人们是否在社交媒体上相互联系来建立人与人之间的联系。在分子生物学中，您可能会根据基因的共表达建立联系。

通常，我们还可以为边分配权重以反映关系的“强度”。

例如，在在线零售的情况下，可以根据同时购买产品的频率来计算重量。使用高权重边连接经常同时购买的产品，使用低权重边连接偶尔同时购买的产品。与偶尔同时购买的产品相比，非同时购买的产品根本不会联网。

正如您所想的那样，将节点相互连接的方法可能很复杂。

但是对于本教程，我们将使用一种更简单的方式来连接编程语言。我们必须依靠维基百科。

维基百科的成功证明了它的可靠性。文章写作的开源合作方式也应该保证一定的客观性。

而且，它的页面结构相对一致，是一个很方便的尝试网页抓取技术的地方。

另一个方便的工具是广泛且有据可查的维基百科 API，它使信息检索更容易。接下来我们一起开始吧。

第一步：安装

它可以安装在 Mac、Mac 和.

对于这个项目，我使用了。如果您使用 /，那么您可以按照以下步骤启动并运行它。如果没有，那么安装过程不会太糟糕。

将最新版本下载到您的系统（在撰写本文时 v.0.9.1）。准备就绪后，您需要解压缩文件。

您可能需要检查您的 Java JRE 版本。需要最新版本。在我刚刚安装的那个上，我只安装了-jre，下面的所有内容都会在此基础上构建。

在您准备好安装之前，还有一个步骤。为了将图表导出到网络，您可以使用 .js 插件。

从菜单栏中选择“工具”选项，然后选择“插件”。

单击“可用插件”选项卡并选择“”（我还安装了 JSON 导出器，因为它是另一个有用的插件）。

单击“安装”按钮，您将完成整个安装过程。安装结束后，需要重新启动。

第二步：编写脚本

本教程将使用 3.x 和一些模块来简化它。要使用 pip 模块安装程序，您需要运行以下命令：

现在，在一个新目录中，创建一个名为 .py 的文件并在您喜欢的代码编辑器/IDE 中打开它。以下是主要逻辑的概述：

首先，您需要有一个编程语言列表。

接下来，浏览列表并检索相关维基百科文章的 HTML。

提取受每种语言影响的编程语言列表。这是我们连接节点的粗略标准。

同时，我们可以获取有关每种语言的一些元数据。

最后，将所有收集到的数据写入 .csv 文件。

完整的脚本在这里：

()。

导入模块

在 .py 中，首先导入一些模块。

当您准备好时，通过创建节点列表开始。这是模块派上用场的地方。它使访问维基百科 API 变得非常容易。

添加以下代码：

保存并运行上述脚本，您将看到打印出的“列表”维基百科文章中的所有链接。

此外，您需要手动检查自动收集的数据。快速浏览后，我们可以发现除了许多实际的编程语言外，脚本还提供了一些额外的链接。

例如，您可能会看到“List of”、“of”等。

虽然可以删除不想包含的节点，但为了节省时间，还是先进行一轮数据清洗吧。

这些代码定义了要从数据中删除的子字符串列表。运行脚本时，遍历数据并删除所有包含不需要的子字符串的元素。

在语言中，只需要一行代码就可以做到这一点！

其他辅助功能

现在我们可以开始抓取数据并构建边缘列表（并收集所有元数据）。为了方便起见，让我们先定义一些函数。

抓取 HTML

第一个函数使用该模块获取每种语言的页面 HTML。

该函数使用. 获取“”+“编程语言”页面的HTML的模块。

然后传递给它，它会读取 HTML 并将其解析为可用于搜索信息的对象。

接下来，使用 () 方法抓取感兴趣的 HTML 元素。

下面是每篇编程语言文章顶部的汇总表。如何识别？

最简单的方法是访问其中一个编程语言页面。在这里，您可以简单地使用浏览器的开发工具来检查感兴趣的元素。汇总表具有 HTML 标记和 CSS 类 "" 和 ""，因此这些可用于标识 HTML 中的表。

用参数指定它：

() 返回满足条件的所有元素的列表。为了指定感兴趣的元素，需要添加索引 [0]。如果函数执行成功，则返回对象，否则返回 None。

在自动数据收集程序的情况下，全面的异常处理非常重要。如果没有，那么在最好的情况下，如果脚本崩溃，数据捕获程序需要重新启动。

在最坏的情况下，你得到的数据集会包含不一致和错误，这会给你后续的工作埋下隐患。

检索元数据

下一个函数使用对象来查找一些元数据。下表给出了搜索语言首次出现在该表中的年份代码。

这个简短的函数将一个对象作为参数，并调用 () 函数生成一个字符串。

下一步是创建一个名为 year 的子字符串。该字符串在单词“”第一次出现后存储 30 个字符。该字符串应包含该语言第一次出现的年份。

为了仅提取年份，请使用正则表达式（通过 re 模块）匹配以 1 到 3 之间的数字开头且紧接三个数字的任何字符串。

如果执行成功，该函数将返回一个整数年份。否则，我们将得到“不”。您可能还想进一步挖掘元数据，例如示例、设计器或键入规则。

收藏链接

我们还需要一个函数——该函数读取给定语言的对象并输出其他编程语言的列表。

仔细看看上面代码的嵌套部分，这是怎么回事？

该函数利用了对象具有结构一致性的事实。表格中的信息是按行存储的（相关的 HTML 标签是）。一行包含文本“\ \ n”。函数的第一部分找出这是哪一行。

一旦找到这一行，就可以确定下一行包含到受当前行影响的每种编程语言的链接。使用 ("a") 来查找这些链接——其中参数 "a" 对应于 HTML 标签。

对于每个链接 j，将其 [""] 属性添加到名为 out 的列表中。对 [""] 属性感兴趣的原因是因为它将与存储在节点中的语言名称完全匹配。

例如，Java 在节点中存储为“Java（编程语言）”，因此需要在整个数据集中使用这个确切的名称。

如果执行成功，() 将返回一组编程语言。函数的其余部分处理异常，以防止程序在某个阶段出现问题。

数据采集

最后，当一切准备就绪时执行脚本以收集数据并将其存储在两个列表对象中。

现在编写一个循环，将之前定义的函数应用于 in 中的每个条目，并将输出存储在 和 meta 中。

该函数使用节点中的每种语言并尝试从维基百科页面检索汇总表。

然后，该函数将检索表中列出的与目标语言相关联的所有语言。

对于同时出现在节点列表中的每种语言，添加一个[","]形式的元素。通过这种方式，创建了一个边列表并将其传递给。

出于调试目的，打印添加的每个元素 - 这只是为了确保一切正常。如果想调试的更彻底，还可以在语句中添加语句。

接下来，获取语言的名称和年份并将其添加到元列表中。

写入CSV文件

循环运行后，最后一步是将 和 meta 的内容写入 CSV 文件。通过使用之前导入的 csv 模块编程语言图案，完成上一步就容易多了。

就是这样！保存脚本并从终端运行它：

$.py

构建边列表时，可以看到脚本输出-yes。确保网络连接稳定后，您可以等待结果，脚本将发挥作用。

第 3 步：用于创建图形

希望您已经安装并运行。现在您可以创建一个新项目并使用您收集的数据来构建有向图。有向图将展示不同的编程语言如何相互影响！

首先在中创建一个新项目，然后切换到“数据实验室”窗口。提供扩展接口来处理数据。首先，导入列表。

单击“导入电子表格”。

选择脚本生成的 .csv 文件。确保使用逗号作为分隔符。

从列表类型中选择“侧列表”

单击“下一步”，将源列和目标列作为字符串导入，并检查。

使用节点列表更新数据实验室。现在，导入 .csv 文件。这次，从列表类型中选择“节点列表”。

切换到“”选项卡以查看网络外观。

此时的图形看起来颜色很单一，杂乱无章编程语言图案，就像一盘意大利面。所以接下来我们要美化图像。

图像美化

我们可以通过多种方式展示图像，也可以充分发挥我们的创造力。此外，关于网络可视化，还需要考虑三件事：

节点定位：生成网络布局模式的算法有很多。最流行的是算法，它支持这种算法。

节点大小：图中节点的大小可以用来表示一些有趣的属性。通常，这是一个中心性度量。衡量中心性的方法有很多，但它们都反映了给定节点的“重要性”，即它与网络其他部分的关联程度。

节点着色：我们还可以使用颜色来显示节点的某些属性。通常，颜色用于表示社区结构，广义上将其定义为“一组比图中其他部分更密切相关的节点”。在社交网络中，社区结构可以揭示个人友谊、家庭或专业团体之间的联系。检测社区结构的算法有很多种，内置的检测算法就是方法。

要执行上述步骤，需要计算一些统计信息。切换到“”窗口。在这里，您可以看到右侧的面板。它包含一个“”选项卡。打开它，您将看到一系列选项。

有许多内置的统计功能。对于每个功能，单击“运行”将生成一份报告，其中显示了有关网络的一些见解。

如果我们想修改网络的外观，我们可以转到左侧面板。

在“”选项卡中，您可以选择要使用的布局算法。点击“运行”，实时观看图表变化！看看您认为哪种布局算法效果最好。

选项卡上方是“”选项卡。在这里，可以设置节点和每条边的颜色、大小和标签，也可以根据数据的属性（包括要计算的数据）进行配置。

一个建议：

根据模块化属性为节点着色。着色基于节点的社区成员资格。

根据节点的平均度数确定节点的大小。密切相关的节点将比稀疏相关的节点显得更大。

但是，您也可以尝试设计自己喜欢的布局。一旦您对图形的外观感到满意，就可以进行最后一步——将图形导出到网页！

第 4 步：使用 .js 插件

现在您已经构建了一个可以查看的网络可视化，您可以选择使用屏幕截图或将图形保存为 SVG、PDF 或 PNG 格式。

如果您安装了.js插件，还可以将图形导出为HTML，这将创建一个交互式可视化，不仅可以在线发布，还可以上传并与他人共享。

您可以从菜单栏中选择“>.js 模板...”。

根据需要填写详细信息。确保选择导出项目所在的目录。您还可以更改图表的标题、图例、描述、悬停和许多其他详细信息。准备好后，单击“确定”。

现在，如果您打开导出项目所在的目录，您将看到一个文件夹，其中包含 .js 生成的所有文件。

在您喜欢的浏览器中打开 .html 文件。哈！你的网络！如果您了解一些 CSS 和 Java，您可以将各种生成的文件加载到您的网络中，以根据您的意愿调整输出网络。

敞开心扉，在网上画画

许多系统可以建模和可视化为网络。图论是数学的一个分支，它提供了帮助理解网络结构和属性的工具。

使用从程序中获得的数据来构建编程语言的影响图。相关性标准是一种给定的语言是否可以被列为对另一种语言设计的影响。

.js 是一个用于分析和可视化网络的开源工具。它们允许您以图像、PDF 或 Web 格式导出 Web。

模仿本文中的方法，您还可以对许多其他关系进行建模和可视化。我敞开心扉，开始在互联网上画画。

原文链接：