安利一個驚豔的紅樓夢視覺化作品

古柳_Deserts_X發表於2018-09-14
視覺化

更新：《左手讀紅樓夢，右手寫BUG，閒快活》一文對該資料集進行了分析挖掘，加了許多紅樓夢的內容，以及幾個書裡的黃段子，逃。程式碼開源在：DesertsX/gulius-projects

直接上圖，安利下這個關於紅樓夢的視覺化作品網址在此：InteractiveGraph/example1。要是有最近在讀《紅樓夢》的朋友，可以對照著來看，想來是很棒的體驗。

在此關係圖譜中，粉紅色節點代表紅樓夢中出現的人物，主要角色用了1987版紅樓夢部分演員的劇照，點選每個節點能看到人物的介紹；黃色節點為書中出現過的主要地點；藍色節點為書中主要的情節、事件，同樣點選後能看到情節概述，不過不是原文內容。古柳雖然很久沒看紅樓夢原書和87版電視劇了，但這些還是門兒清的。


網頁右上角提供了一些可選的按鈕，其中第四個是展示節點間關係用的，對小說不了解、或初讀的讀者可能會有幫助，比我們那年月自己看書或一些讀者搜網上單純的羅列人物圖譜要直觀的多。比如寶玉的母親、乾孃、妻子、同宗、哥哥、僕人等等，越看越覺得這背後的資料集真的是厲害…..

更多細節大家可自行探索，古柳當初看到時就覺得很驚豔，作為一個“偽”紅迷，看到這麼棒的專案，幻想著要是能哪天自己復現出來，也是“死而無憾”了。幸運的是，這個專案所有程式碼也開源在了GitHub - InteractiveGraph。

在README_CN.md檔案裡介紹了具體實現細節，還是很詳細的，哪怕裡面很多技術沒接觸過，也能有個方向。不過，技術有了，用到的資料格式又是怎麼樣的呢？假如想遷移到其他小說、其他文字內容上又該怎麼準備資料呢？

帶著這個疑惑找到了dist/examples/honglou.json檔案，簡單的摘錄開頭部分資料。categories定義了上面關係圖譜裡節點型別；translator程式碼跳過（==）；data 處開始到最後5000多行就是各類所有節點的資料了，顯示event事件的資料格式樣例。

{
  "categories": {
    "person": "人物",
    "event": "事件",
    "location": "地點"
  },
  "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;
      }
    },
  },
  "data": {
    "nodes": [{
        "label": "共讀西廂",
        "value": 2,
        "id": 3779,
        "categories": [
          "event"
        ],
        "info": "寶玉到沁芳橋邊桃花底下看《西廂記》，正準備將落花送進池中，黛玉說她早已準備了一個花冢，正來葬花。黛玉發現《西廂記》，寶玉借書中詞句，向黛玉表白。黛玉覺得冒犯了自己尊嚴，引起口角，寶玉賠禮討饒，黛玉也借《西廂記》詞句，嘲笑了寶玉。於是兩人收拾落花，葬到花冢裡去。"
      },
      {
        "label": "林如海捐館揚州城",
        "value": 4,
        "id": 3780,
        "categories": [
          "event"
        ],
        "info": "林如海考中探花後，遷為蘭臺寺大夫，欽點為揚州巡鹽御史。後身染重病於九月初三日巳時而亡。"
      },
複製程式碼

《小戲骨紅樓夢》之寶黛共讀西廂：

地點節點資料樣式：

{
        "label": "瀟湘館",
        "value": 3,
        "id": 3838,
        "categories": [
          "location"
        ],
        "info": "黛玉的居所。黛玉作詩的筆名就瀟湘妃子，這是曹雪芹對黛玉這個人物的讚美。"
      },
複製程式碼


《小戲骨紅樓夢》之寶釵

人物節點資料：

{
        "label": "王熙鳳",
        "value": 25,
        "image": "./images/photo/王熙鳳.jpg",
        "id": 4041,
        "categories": [
          "person"
        ],
        "info": "金陵十二釵之九，來自四大家族之王家，王夫人的內侄女，賈璉之妻。她精明強幹，深得賈母和王夫人的信任，成為榮國府的管家奶奶，她為人處事圓滑周到，圖財害命的事也幹過不少，在前80回裡她支援寶黛愛情。"
      },
複製程式碼

《小戲骨紅樓夢》之寶黛美如畫：


最後是所有節點所代表的實體之間的關係：

{
        "id": 3324,
        "label": "僕人",
        "from": 3876,
        "to": 4103
      },
複製程式碼

最近也接觸了些依存句法分析、資訊提取等NLP的內容，但理論歸理論，真要用來提取小說裡進行命名實體識別、實體關係提取、事件抽取等等還是差得遠，以後日後能復現這一專案。

最後再放張87版紅樓夢的劇照，雖然真的覺得對小戲骨的紅樓夢的喜好要超過前者了。逃……

歡迎關注公眾號“牛衣古柳”（ID：Deserts-X）哈！

相關文章