本文程式碼和資料等，會等下一篇實戰文章更新後一起放在 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動圖）
，下一篇文章再好好講實戰吧，這篇文章也是越寫越飛、越寫越歪、越扯越長，光顧著調侃片刻老哥，不過也確實繞不過去了。
再者想把全部內容都塞到一篇文章裡也過於冗長，這樣一分為二，倒也未為不可。
小結
最後再總結下幾個關鍵步驟：
- 有一份 csv 或其他格式的想要圖譜視覺化的資料，想顯示影象的，也需要準備好；
- 寫程式碼將其轉換成所需的 json 格式（雖然文章裡一直也沒講資料格式到底如何，但相應連結的文章或檔案裡總有涉及），並手動加上那段關鍵的 JavaScript 程式碼；
- 修改對應 html 以及
graph_view.py檔案； - 執行
app_run.py，開啟對應網頁即可。