InteractiveGraph 實現酷炫關係圖譜以前瞻

本文代碼和數據等，會等下一篇實戰文章更新後一塊兒放在 github/DesertsX 上，敬請期待！

前言

話說以前片刻老哥（羣主/組織負責人之一）在 ApacheCN 中文開源組織 的機器學習羣（qq 羣：629470233）裏問我下面這個項目（見於：安利一個驚豔的紅樓夢可視化做品）研究的如何，我答曰那時安利事後僅分析了下該紅樓夢關係圖譜的 json 數據，並曾興致高昂地寫下左手讀紅樓夢，右手寫BUG，閒快活一文。

再是不久前爬取明星相互關係的數據（仍是那句話數據質量不必定多高，僅爲練手），以供 neo4j 上手操練之用，並寫有詳細的入門教程： 一文教你用 Neo4j 快速構建明星關係圖譜，而 neo4j 是赫然寫在 grapheco/InteractiveGraph 這一開源項目的 github 介紹中的。

除此以外，再無有過多研究，只說來日因緣際會再去看看。雖然有由於不懂前端等技術、難以上手「官方教程」而推脫往後再研究之意，但或許更多地是古柳深信沒準哪一天就有人助我填補了自身淺薄的知識與酷炫的開源項目之間的鴻溝，而後就像往昔文章中經常提到的「因緣際會」四字通常，一切天然而然地得以解決，新技能得以 get 了！

股票圖譜

正所謂：「無巧不成書」，世上就果然有那麼巧的事，沒幾日就看到利用 Tushare 數據實現知識圖譜效果這篇新近出爐的文章（感謝做者提供完整代碼和數據，下文將補上本身實踐明星關係圖譜的代碼和數據後，統一開源供你們學習），原做者調用 Tushare API 接口，拿到股票及其最基礎的屬性數據，如股票所屬地區 area、所屬工業類別 industry 和所屬板塊 market 等。

將其轉換成開源項目 grapheco/InteractiveGraph 所需的數據格式（上述代碼均在 stock-demo.py 中，若是隻是關心可視化結果，能夠略過上述步驟，由於轉換後的數據已經存在於webapp\static\stock_graph.json） ，運行 webapp\app_run.py ，打開 http://127.0.0.1:5000/graph/relation?stock1=平安銀行&stock2=招商銀行 就能看到漂亮的圖譜，可改爲其餘股票名稱查看效果。

以上，差很少就是所有流程了，若是你只是想了解下該項目是如何實現的，其實知道這麼多就夠了，真的很是簡單，前端的東西都是現成的，只須要準備好數據，套用一下模板，就能拿出去「裝逼」了。

熱身一下

而若是你想更進一步應用到本身的數據上，而且像開頭紅樓夢項目同樣加上圖像的話（有圖真的靈動好看不少），那麼下面的實戰部分將幫你實現這個願望！

首先是用片刻老哥手動構造的關於 ApacheCN 中文開源組織 的小數據集 apachecn-basic.csv 熱熱身，固然我在此基礎上將每一個人的圖像由統一的綠帽頭盔圖（老哥對綠帽真的情有獨鍾呢）改爲了各人的 qq 頭像，並在 webapp\static\images\person\ 文件夾下保存好相應圖片；

注意：這裏每一行是每一個 person 對應每一個 project （如：ml/dl/kaggle）的格式，因此單個 person 可能出現不少行；

id,person,image,area,project,info
1,那一抹微笑,static/images/person/那一抹微笑.jpg,北京,kaggle,那一抹微笑
1,那一抹微笑,static/images/person/那一抹微笑.jpg,北京,ml,那一抹微笑
1,那一抹微笑,static/images/person/那一抹微笑.jpg,北京,dl,那一抹微笑
2,片刻,static/images/person/片刻.jpg,北京,ml,世界很美，而你正好有空
2,片刻,static/images/person/片刻.jpg,北京,kaggle,世界很美，而你正好有空
2,片刻,static/images/person/片刻.jpg,北京,dl,世界很美，而你正好有空
3,瑤妹,static/images/person/瑤妹.jpg,北京,kaggle,瑤妹
3,瑤妹,static/images/person/瑤妹.jpg,北京,ml,瑤妹
3,瑤妹,static/images/person/瑤妹.jpg,北京,dl,瑤妹
4,飛龍,static/images/person/飛龍.jpg,上海,ml,飛龍
4,飛龍,static/images/person/飛龍.jpg,上海,ml,飛龍
4,飛龍,static/images/person/飛龍.jpg,上海,ml,飛龍
5,鹹魚,static/images/person/鹹魚.jpg,北京,kaggle,鹹魚
5,鹹魚,static/images/person/鹹魚.jpg,北京,dl,鹹魚
複製代碼

接着運行 apachecn-demo.py ，照舊將 csv 數據轉換成所需的 json 格式， 存於webapp\static\apachecn-demo.json ，由於本次實戰明星關係圖譜的數據轉換代碼不一樣於片刻老哥的，因此此處不作詳細介紹，你們可自行理解，不懂的能夠去找他請教（你有福了，羣主叫你晚上去他房間.avi）；

固然因爲後續個人版本將用 pandas 結合手頭的項目手動一步步處理數據，可能不是很方便你們直接套用到本身的數據上，因此仍是推薦搞懂 apachecn-demo.py 或 stock-demo.py，更好地實現可重用的函數。

至於爲何我不是按照這裏的代碼去處理數據，而非要自行實現，實在是由於明星相互關係的數據和上述股票和組織的數據都不太同樣，具體差別後續再說。

扯回來，有了 json 數據後，其實還須要插入下面一段玄妙的 JavaScript 代碼（這段 translator 打頭的代碼可插在 categories 和 data 之間，可去文件中查看），至於爲何不一併在轉換數據的代碼中一併實現？

"translator": {
    "nodes": function (node) {
      //set description
      if (node.description === undefined) {
        var description = "<p align=center>";
        if (node.image !== undefined) {
          description += "<img src='" + node.image + "' width=150/><br>";
        }
        description += "<b>" + node.label + "</b>" + "[" + node.id + "]";
        description += "</p>";
        if (node.info !== undefined) {
          description += "<p align=left>" + node.info + "</p>";
        } else {
          if (node.title !== undefined)
            description += "<p align=left>" + node.title + "</p>";
        }
        node.description = description;
      }
    },
  },
複製代碼

對此菜雞的片刻老哥和我都表示「非不爲也，實不能也」，說人話就是「不會！」那也是很無奈了，只求萬能的讀者去實現了。

薛定諤的好消息

固然還有一個可能算是「薛定諤的好消息」是，片刻老哥去該項目的 github 提了 iusse ：是否能夠將 gson 中的function 寫到 html 頁面的script中？

而後......而後項目貢獻者可能手頭正好有新版本的代碼，因而順勢把代碼從 InteractiveGraph 0.1.1 版本更新到了 InteractiveGraph 0.2.0！

新版本的第二個特性是 Optimize the code，結合上面 issue 裏的回覆應該是再也不須要在 json 里加那段玄妙的 JS 代碼了，固然由於本次實踐都仍是基於舊版本的，因此依然須要手動加上。

在此講述下這個插曲，方便後來人瞭解區別，可資選擇。

再次說回數據準備好後，只須要將要渲染的 webapp\templates\apachecn-demo-relation.html裏要加載的 json 文件名改爲對應的便可。

至於這個 html 文件上面並無說起，由於股票一例各方面都是匹配的，因此先行略過，等實戰時須要修改了再涉及。

而回到 grapheco/InteractiveGraph 上來，原始開源項目支持三種模式：GraphNavigator、 GraphExplorer 和 RelFinder。股票一例是第三種，下圖是第一種也是本次明星關係圖譜將要實現的模式。

三種模式分別對應 example1.html、example2.html 和 example3.html，差異主要在於 <script>...</script> ，由於只是套用模板，因此想要那個，就複製一份對應 html 文件，改下文件名和裏面 json 路徑便可。

最後只需在 webapp\views\graph_view.py 里加上幾行代碼，使得訪問對應網址時能成功渲染出相應 html 便可。沒接觸的前端的讀者須要注意，@graph.route('') 裏怎麼加網址就會怎麼辦，好比此處對應網址就是 http://127.0.0.1:5000/apachecndemo。

@graph.route('/apachecndemo') 
# 不要寫成 /graph/relation/apachecndemo 
# 不然加載圖片時沒法顯示
def apachecndemo():
    return render_template('apachecn-demo-relation.html')
複製代碼

最後運行 webapp\app_run.py，打開對應網址，就好了。雖然扯了這麼多，纔出現這麼個破圖，但一切瞎扯都是值得的。

畢竟更酷炫的明星關係圖譜，差很少也就是這麼個流程，先放張效果圖（和略大的GIF動圖）

，下一篇文章再好好講實戰吧，這篇文章也是越寫越飛、越寫越歪、越扯越長，光顧着調侃片刻老哥，不過也確實繞不過去了。

再者想把所有內容都塞到一篇文章裏也過於冗長，這樣一分爲二，倒也未爲不可。

小結

最後再總結下幾個關鍵步驟：

1. 有一份 csv 或其餘格式的想要圖譜可視化的數據，想顯示圖像的，也須要準備好；
2. 寫代碼將其轉換成所需的 json 格式（雖然文章裏一直也沒講數據格式到底如何，但相應連接的文章或文件裏總有涉及），並手動加上那段關鍵的 JavaScript 代碼；
3. 修改對應 html 以及 graph_view.py 文件；
4. 運行 app_run.py ，打開對應網頁便可。