編譯：周家宇、丁慧、葉一、小宇、錢天培

今天， 將教你如何制作編程語言的網(wǎng)絡(luò)圖。如果你不知道什么是關(guān)系網(wǎng)絡(luò)圖，你可以點(diǎn)擊下面的鏈接來看看最終的結(jié)果：

#,

我們可以在這里看到從過去到現(xiàn)在的 250 多種編程語言之間“設(shè)計(jì)影響力”的關(guān)系。下面是演示的屏幕截圖：

接下來，就讓我們一起來學(xué)習(xí)制作這張關(guān)系網(wǎng)絡(luò)圖吧！

在當(dāng)今高度連接的世界中，互聯(lián)網(wǎng)在現(xiàn)代生活中無處不在。比如消化菌的周末就是這樣開始的——通過北京的交通網(wǎng)絡(luò)進(jìn)入城市，然后去你最喜歡的咖啡店的分店，將你的筆記本電腦連接到他們的Wi-Fi。接下來，登錄各種常用的社交網(wǎng)站。

眾所周知，過去幾十年中一些最有影響力的公司之所以成功，是因?yàn)榛ヂ?lián)網(wǎng)的力量。

、、等一些社交媒體平臺(tái)都依賴社交網(wǎng)絡(luò)的小世界特性。這使他們能夠有效地將用戶彼此（和廣告商）聯(lián)系起來。

谷歌目前的成功主要是由于他們早期在搜索引擎市場的主導(dǎo)地位——部分是因?yàn)樗麄兡軌蛲ㄟ^他們的 Page Rank 網(wǎng)絡(luò)算法返回相關(guān)結(jié)果。

亞馬遜高效的配送網(wǎng)絡(luò)使他們能夠在一些主要城市提供當(dāng)日送達(dá)服務(wù)。

網(wǎng)絡(luò)算法在人工智能和機(jī)器學(xué)習(xí)等領(lǐng)域也非常重要。神經(jīng)網(wǎng)絡(luò)領(lǐng)域的研究非?；鸨?。計(jì)算機(jī)視覺中許多不可或缺的特征檢測算法在很大程度上也依賴于使用網(wǎng)絡(luò)對圖像的不同部分進(jìn)行建模。

網(wǎng)絡(luò)模型還可以解釋大量科學(xué)現(xiàn)象，包括量子力學(xué)、生化途徑以及生態(tài)和社會(huì)經(jīng)濟(jì)系統(tǒng)。

那么，鑒于它們不可否認(rèn)的重要性，我們應(yīng)該如何更好地理解網(wǎng)絡(luò)及其屬性？

網(wǎng)絡(luò)的數(shù)學(xué)研究被稱為“圖論”，它是數(shù)學(xué)中比較容易的分支之一。本文將介紹簡單的網(wǎng)絡(luò)知識(shí)，即使你沒有相關(guān)背景知識(shí)，也能輕松學(xué)會(huì)。

此外，我們將使用3.x 和一個(gè)很棒的開源軟件，通過關(guān)系網(wǎng)絡(luò)連接一系列編程語言的過去和現(xiàn)在的網(wǎng)絡(luò)可視化。

首先，什么是網(wǎng)絡(luò)？

其實(shí)，上面引用的栗子已經(jīng)給出了一些線索。交通網(wǎng)絡(luò)由目的地和路徑的連接組成。社交網(wǎng)絡(luò)通過個(gè)人和個(gè)人之間的關(guān)系進(jìn)行連接。搜索引擎算法通過查看哪些頁面鏈接到其他頁面來評估不同網(wǎng)頁的“順序”。

更一般地說，網(wǎng)絡(luò)是任何可以用節(jié)點(diǎn)和邊來描述的系統(tǒng)，或者通俗地說，我們稱之為“點(diǎn)和線”。

邊緣連接節(jié)點(diǎn)示例（語言）（網(wǎng)絡(luò)表示編程語言之間的關(guān)系）

有些系統(tǒng)更容易通過這種方式建立網(wǎng)絡(luò)。社交網(wǎng)絡(luò)可能是最明顯的例子。計(jì)算機(jī)文件系統(tǒng)是另一種方式——文件夾和文件通過它們的“父”和“子”關(guān)系創(chuàng)建連接。

然而，網(wǎng)絡(luò)的真正威力在于可以從網(wǎng)絡(luò)的角度對許多系統(tǒng)進(jìn)行建模，即使一開始并不明顯。

代表網(wǎng)絡(luò)

我們應(yīng)該如何將點(diǎn)和線的圖片轉(zhuǎn)換為我們可以壓縮的數(shù)字信號(hào)？

解決方案之一是繪制一個(gè)鄰接矩陣來表示我們的網(wǎng)絡(luò)。

如果您不熟悉矩陣的概念，這聽起來可能很嚇人，但不要害怕。將它們視為可以同時(shí)執(zhí)行多項(xiàng)計(jì)算的數(shù)字網(wǎng)格。這是一個(gè)簡單的例子：

在這個(gè)矩陣中，每行和每列的交集是 0 還是 1，這取決于每種語言是否有鏈接。您也可以從上圖觀察！

對于大多數(shù)要解決的問題，矩陣是一種很好的數(shù)學(xué)表示網(wǎng)絡(luò)的方法。但是，從計(jì)算的角度來看，它有時(shí)可能有點(diǎn)麻煩。

例如，即使節(jié)點(diǎn)的數(shù)量相對較少（比如 1000），矩陣中的元素?cái)?shù)量也會(huì)大得多（例如，1000^2 = 1,000,000）。

許多現(xiàn)實(shí)世界的系統(tǒng)產(chǎn)生稀疏網(wǎng)絡(luò)，其中大多數(shù)節(jié)點(diǎn)只能連接到所有其他節(jié)點(diǎn)的一小部分。

如果我們將計(jì)算機(jī)內(nèi)存中 1000 個(gè)節(jié)點(diǎn)的稀疏網(wǎng)絡(luò)表示為鄰接矩陣，那么我們將在 RAM 中存儲(chǔ) 1,000,000 字節(jié)的數(shù)據(jù)。大多數(shù)將為零。這里有一個(gè)更有效的方法來解決這個(gè)問題。

該方法使用邊列表而不是鄰接矩陣。這些正是他們所說的，它們只是相互鏈接的節(jié)點(diǎn)對列表。

另一種表示網(wǎng)絡(luò)的方法是鄰接表，它列出了在每個(gè)節(jié)點(diǎn)后面鏈接到它的節(jié)點(diǎn)。例如：

收集數(shù)據(jù)并建立連接

任何網(wǎng)絡(luò)模型和可視化的性能取決于用于構(gòu)建網(wǎng)絡(luò)本身的數(shù)據(jù)質(zhì)量。除了保證數(shù)據(jù)準(zhǔn)確完整之外，我們還需要一種合理的方式來推斷節(jié)點(diǎn)之間的邊。

這是非常關(guān)鍵的一步，任何后續(xù)的網(wǎng)絡(luò)分析和推理都取決于“相關(guān)標(biāo)準(zhǔn)”的合理性。

例如，在社交網(wǎng)絡(luò)分析中，您可能會(huì)根據(jù)人們是否在社交媒體上相互聯(lián)系來建立人與人之間的聯(lián)系。在分子生物學(xué)中，您可能會(huì)根據(jù)基因的共表達(dá)建立聯(lián)系。

通常，我們還可以為邊分配權(quán)重以反映關(guān)系的“強(qiáng)度”。

例如，在在線零售的情況下，可以根據(jù)同時(shí)購買產(chǎn)品的頻率來計(jì)算重量。使用高權(quán)重邊連接經(jīng)常同時(shí)購買的產(chǎn)品，使用低權(quán)重邊連接偶爾同時(shí)購買的產(chǎn)品。與偶爾同時(shí)購買的產(chǎn)品相比，非同時(shí)購買的產(chǎn)品根本不會(huì)聯(lián)網(wǎng)。

正如您所想的那樣，將節(jié)點(diǎn)相互連接的方法可能很復(fù)雜。

但是對于本教程，我們將使用一種更簡單的方式來連接編程語言。我們必須依靠維基百科。

維基百科的成功證明了它的可靠性。文章寫作的開源合作方式也應(yīng)該保證一定的客觀性。

而且，它的頁面結(jié)構(gòu)相對一致，是一個(gè)很方便的嘗試網(wǎng)頁抓取技術(shù)的地方。

另一個(gè)方便的工具是廣泛且有據(jù)可查的維基百科 API，它使信息檢索更容易。接下來我們一起開始吧。

第一步：安裝

它可以安裝在 Mac、Mac 和.

對于這個(gè)項(xiàng)目，我使用了。如果您使用 /，那么您可以按照以下步驟啟動(dòng)并運(yùn)行它。如果沒有，那么安裝過程不會(huì)太糟糕。

將最新版本下載到您的系統(tǒng)（在撰寫本文時(shí) v.0.9.1）。準(zhǔn)備就緒后，您需要解壓縮文件。

您可能需要檢查您的 Java JRE 版本。需要最新版本。在我剛剛安裝的那個(gè)上，我只安裝了-jre，下面的所有內(nèi)容都會(huì)在此基礎(chǔ)上構(gòu)建。

在您準(zhǔn)備好安裝之前，還有一個(gè)步驟。為了將圖表導(dǎo)出到網(wǎng)絡(luò)，您可以使用 .js 插件。

從菜單欄中選擇“工具”選項(xiàng)，然后選擇“插件”。

單擊“可用插件”選項(xiàng)卡并選擇“”（我還安裝了 JSON 導(dǎo)出器，因?yàn)樗橇硪粋€(gè)有用的插件）。

單擊“安裝”按鈕，您將完成整個(gè)安裝過程。安裝結(jié)束后，需要重新啟動(dòng)。

第二步：編寫腳本

本教程將使用 3.x 和一些模塊來簡化它。要使用 pip 模塊安裝程序，您需要運(yùn)行以下命令：

現(xiàn)在，在一個(gè)新目錄中，創(chuàng)建一個(gè)名為 .py 的文件并在您喜歡的代碼編輯器/IDE 中打開它。以下是主要邏輯的概述：

首先，您需要有一個(gè)編程語言列表。

接下來，瀏覽列表并檢索相關(guān)維基百科文章的 HTML。

提取受每種語言影響的編程語言列表。這是我們連接節(jié)點(diǎn)的粗略標(biāo)準(zhǔn)。

同時(shí)，我們可以獲取有關(guān)每種語言的一些元數(shù)據(jù)。

最后，將所有收集到的數(shù)據(jù)寫入 .csv 文件。

完整的腳本在這里：

()。

導(dǎo)入模塊

在 .py 中，首先導(dǎo)入一些模塊。

當(dāng)您準(zhǔn)備好時(shí)，通過創(chuàng)建節(jié)點(diǎn)列表開始。這是模塊派上用場的地方。它使訪問維基百科 API 變得非常容易。

添加以下代碼：

保存并運(yùn)行上述腳本，您將看到打印出的“列表”維基百科文章中的所有鏈接。

此外，您需要手動(dòng)檢查自動(dòng)收集的數(shù)據(jù)?？焖贋g覽后，我們可以發(fā)現(xiàn)除了許多實(shí)際的編程語言外，腳本還提供了一些額外的鏈接。

例如，您可能會(huì)看到“List of”、“of”等。

雖然可以刪除不想包含的節(jié)點(diǎn)，但為了節(jié)省時(shí)間，還是先進(jìn)行一輪數(shù)據(jù)清洗吧。

這些代碼定義了要從數(shù)據(jù)中刪除的子字符串列表。運(yùn)行腳本時(shí)，遍歷數(shù)據(jù)并刪除所有包含不需要的子字符串的元素。

在語言中，只需要一行代碼就可以做到這一點(diǎn)！

其他輔助功能

現(xiàn)在我們可以開始抓取數(shù)據(jù)并構(gòu)建邊緣列表（并收集所有元數(shù)據(jù)）。為了方便起見，讓我們先定義一些函數(shù)。

抓取 HTML

第一個(gè)函數(shù)使用該模塊獲取每種語言的頁面 HTML。

該函數(shù)使用. 獲取“”+“編程語言”頁面的HTML的模塊。

然后傳遞給它，它會(huì)讀取 HTML 并將其解析為可用于搜索信息的對象。

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

下面是每篇編程語言文章頂部的匯總表。如何識(shí)別？

最簡單的方法是訪問其中一個(gè)編程語言頁面。在這里，您可以簡單地使用瀏覽器的開發(fā)工具來檢查感興趣的元素。匯總表具有 HTML 標(biāo)記和 CSS 類 "" 和 ""，因此這些可用于標(biāo)識(shí) HTML 中的表。

用參數(shù)指定它：

() 返回滿足條件的所有元素的列表。為了指定感興趣的元素，需要添加索引 [0]。如果函數(shù)執(zhí)行成功，則返回對象，否則返回 None。

在自動(dòng)數(shù)據(jù)收集程序的情況下，全面的異常處理非常重要。如果沒有，那么在最好的情況下，如果腳本崩潰，數(shù)據(jù)捕獲程序需要重新啟動(dòng)。

在最壞的情況下，你得到的數(shù)據(jù)集會(huì)包含不一致和錯(cuò)誤，這會(huì)給你后續(xù)的工作埋下隱患。

檢索元數(shù)據(jù)

下一個(gè)函數(shù)使用對象來查找一些元數(shù)據(jù)。下表給出了搜索語言首次出現(xiàn)在該表中的年份代碼。

這個(gè)簡短的函數(shù)將一個(gè)對象作為參數(shù)，并調(diào)用 () 函數(shù)生成一個(gè)字符串。

下一步是創(chuàng)建一個(gè)名為 year 的子字符串。該字符串在單詞“”第一次出現(xiàn)后存儲(chǔ) 30 個(gè)字符。該字符串應(yīng)包含該語言第一次出現(xiàn)的年份。

為了僅提取年份，請使用正則表達(dá)式（通過 re 模塊）匹配以 1 到 3 之間的數(shù)字開頭且緊接三個(gè)數(shù)字的任何字符串。

如果執(zhí)行成功，該函數(shù)將返回一個(gè)整數(shù)年份。否則，我們將得到“不”。您可能還想進(jìn)一步挖掘元數(shù)據(jù)，例如示例、設(shè)計(jì)器或鍵入規(guī)則。

收藏鏈接

我們還需要一個(gè)函數(shù)——該函數(shù)讀取給定語言的對象并輸出其他編程語言的列表。

仔細(xì)看看上面代碼的嵌套部分，這是怎么回事？

該函數(shù)利用了對象具有結(jié)構(gòu)一致性的事實(shí)。表格中的信息是按行存儲(chǔ)的（相關(guān)的 HTML 標(biāo)簽是）。一行包含文本“\ \ n”。函數(shù)的第一部分找出這是哪一行。

一旦找到這一行，就可以確定下一行包含到受當(dāng)前行影響的每種編程語言的鏈接。使用 ("a") 來查找這些鏈接——其中參數(shù) "a" 對應(yīng)于 HTML 標(biāo)簽。

對于每個(gè)鏈接 j，將其 [""] 屬性添加到名為 out 的列表中。對 [""] 屬性感興趣的原因是因?yàn)樗鼘⑴c存儲(chǔ)在節(jié)點(diǎn)中的語言名稱完全匹配。

例如，Java 在節(jié)點(diǎn)中存儲(chǔ)為“Java（編程語言）”，因此需要在整個(gè)數(shù)據(jù)集中使用這個(gè)確切的名稱。

如果執(zhí)行成功，() 將返回一組編程語言。函數(shù)的其余部分處理異常，以防止程序在某個(gè)階段出現(xiàn)問題。

數(shù)據(jù)采集

最后，當(dāng)一切準(zhǔn)備就緒時(shí)執(zhí)行腳本以收集數(shù)據(jù)并將其存儲(chǔ)在兩個(gè)列表對象中。

現(xiàn)在編寫一個(gè)循環(huán)，將之前定義的函數(shù)應(yīng)用于 in 中的每個(gè)條目，并將輸出存儲(chǔ)在 和 meta 中。

該函數(shù)使用節(jié)點(diǎn)中的每種語言并嘗試從維基百科頁面檢索匯總表。

然后，該函數(shù)將檢索表中列出的與目標(biāo)語言相關(guān)聯(lián)的所有語言。

對于同時(shí)出現(xiàn)在節(jié)點(diǎn)列表中的每種語言，添加一個(gè)[","]形式的元素。通過這種方式，創(chuàng)建了一個(gè)邊列表并將其傳遞給。

出于調(diào)試目的，打印添加的每個(gè)元素 - 這只是為了確保一切正常。如果想調(diào)試的更徹底，還可以在語句中添加語句。

接下來，獲取語言的名稱和年份并將其添加到元列表中。

寫入CSV文件

循環(huán)運(yùn)行后，最后一步是將 和 meta 的內(nèi)容寫入 CSV 文件。通過使用之前導(dǎo)入的 csv 模塊編程語言圖案，完成上一步就容易多了。

就是這樣！保存腳本并從終端運(yùn)行它：

$.py

構(gòu)建邊列表時(shí)，可以看到腳本輸出-yes。確保網(wǎng)絡(luò)連接穩(wěn)定后，您可以等待結(jié)果，腳本將發(fā)揮作用。

第 3 步：用于創(chuàng)建圖形

希望您已經(jīng)安裝并運(yùn)行?，F(xiàn)在您可以創(chuàng)建一個(gè)新項(xiàng)目并使用您收集的數(shù)據(jù)來構(gòu)建有向圖。有向圖將展示不同的編程語言如何相互影響！

首先在中創(chuàng)建一個(gè)新項(xiàng)目，然后切換到“數(shù)據(jù)實(shí)驗(yàn)室”窗口。提供擴(kuò)展接口來處理數(shù)據(jù)。首先，導(dǎo)入列表。

單擊“導(dǎo)入電子表格”。

選擇腳本生成的 .csv 文件。確保使用逗號(hào)作為分隔符。

從列表類型中選擇“側(cè)列表”

單擊“下一步”，將源列和目標(biāo)列作為字符串導(dǎo)入，并檢查。

使用節(jié)點(diǎn)列表更新數(shù)據(jù)實(shí)驗(yàn)室?，F(xiàn)在，導(dǎo)入 .csv 文件。這次，從列表類型中選擇“節(jié)點(diǎn)列表”。

切換到“”選項(xiàng)卡以查看網(wǎng)絡(luò)外觀。

此時(shí)的圖形看起來顏色很單一，雜亂無章編程語言圖案，就像一盤意大利面。所以接下來我們要美化圖像。

圖像美化

我們可以通過多種方式展示圖像，也可以充分發(fā)揮我們的創(chuàng)造力。此外，關(guān)于網(wǎng)絡(luò)可視化，還需要考慮三件事：

節(jié)點(diǎn)定位：生成網(wǎng)絡(luò)布局模式的算法有很多。最流行的是算法，它支持這種算法。

節(jié)點(diǎn)大小：圖中節(jié)點(diǎn)的大小可以用來表示一些有趣的屬性。通常，這是一個(gè)中心性度量。衡量中心性的方法有很多，但它們都反映了給定節(jié)點(diǎn)的“重要性”，即它與網(wǎng)絡(luò)其他部分的關(guān)聯(lián)程度。

節(jié)點(diǎn)著色：我們還可以使用顏色來顯示節(jié)點(diǎn)的某些屬性。通常，顏色用于表示社區(qū)結(jié)構(gòu)，廣義上將其定義為“一組比圖中其他部分更密切相關(guān)的節(jié)點(diǎn)”。在社交網(wǎng)絡(luò)中，社區(qū)結(jié)構(gòu)可以揭示個(gè)人友誼、家庭或?qū)I(yè)團(tuán)體之間的聯(lián)系。檢測社區(qū)結(jié)構(gòu)的算法有很多種，內(nèi)置的檢測算法就是方法。

要執(zhí)行上述步驟，需要計(jì)算一些統(tǒng)計(jì)信息。切換到“”窗口。在這里，您可以看到右側(cè)的面板。它包含一個(gè)“”選項(xiàng)卡。打開它，您將看到一系列選項(xiàng)。

有許多內(nèi)置的統(tǒng)計(jì)功能。對于每個(gè)功能，單擊“運(yùn)行”將生成一份報(bào)告，其中顯示了有關(guān)網(wǎng)絡(luò)的一些見解。

如果我們想修改網(wǎng)絡(luò)的外觀，我們可以轉(zhuǎn)到左側(cè)面板。

在“”選項(xiàng)卡中，您可以選擇要使用的布局算法。點(diǎn)擊“運(yùn)行”，實(shí)時(shí)觀看圖表變化！看看您認(rèn)為哪種布局算法效果最好。

選項(xiàng)卡上方是“”選項(xiàng)卡。在這里，可以設(shè)置節(jié)點(diǎn)和每條邊的顏色、大小和標(biāo)簽，也可以根據(jù)數(shù)據(jù)的屬性（包括要計(jì)算的數(shù)據(jù)）進(jìn)行配置。

一個(gè)建議：

根據(jù)模塊化屬性為節(jié)點(diǎn)著色。著色基于節(jié)點(diǎn)的社區(qū)成員資格。

根據(jù)節(jié)點(diǎn)的平均度數(shù)確定節(jié)點(diǎn)的大小。密切相關(guān)的節(jié)點(diǎn)將比稀疏相關(guān)的節(jié)點(diǎn)顯得更大。

但是，您也可以嘗試設(shè)計(jì)自己喜歡的布局。一旦您對圖形的外觀感到滿意，就可以進(jìn)行最后一步——將圖形導(dǎo)出到網(wǎng)頁！

第 4 步：使用 .js 插件

現(xiàn)在您已經(jīng)構(gòu)建了一個(gè)可以查看的網(wǎng)絡(luò)可視化，您可以選擇使用屏幕截圖或?qū)D形保存為 SVG、PDF 或 PNG 格式。

如果您安裝了.js插件，還可以將圖形導(dǎo)出為HTML，這將創(chuàng)建一個(gè)交互式可視化，不僅可以在線發(fā)布，還可以上傳并與他人共享。

您可以從菜單欄中選擇“>.js 模板...”。

根據(jù)需要填寫詳細(xì)信息。確保選擇導(dǎo)出項(xiàng)目所在的目錄。您還可以更改圖表的標(biāo)題、圖例、描述、懸停和許多其他詳細(xì)信息。準(zhǔn)備好后，單擊“確定”。

現(xiàn)在，如果您打開導(dǎo)出項(xiàng)目所在的目錄，您將看到一個(gè)文件夾，其中包含 .js 生成的所有文件。

在您喜歡的瀏覽器中打開 .html 文件。哈！你的網(wǎng)絡(luò)！如果您了解一些 CSS 和 Java，您可以將各種生成的文件加載到您的網(wǎng)絡(luò)中，以根據(jù)您的意愿調(diào)整輸出網(wǎng)絡(luò)。

敞開心扉，在網(wǎng)上畫畫

許多系統(tǒng)可以建模和可視化為網(wǎng)絡(luò)。圖論是數(shù)學(xué)的一個(gè)分支，它提供了幫助理解網(wǎng)絡(luò)結(jié)構(gòu)和屬性的工具。

使用從程序中獲得的數(shù)據(jù)來構(gòu)建編程語言的影響圖。相關(guān)性標(biāo)準(zhǔn)是一種給定的語言是否可以被列為對另一種語言設(shè)計(jì)的影響。

.js 是一個(gè)用于分析和可視化網(wǎng)絡(luò)的開源工具。它們允許您以圖像、PDF 或 Web 格式導(dǎo)出 Web。

模仿本文中的方法，您還可以對許多其他關(guān)系進(jìn)行建模和可視化。我敞開心扉，開始在互聯(lián)網(wǎng)上畫畫。

原文鏈接：