關係網路可視化 | 實際案例分享
本文作者
本文介紹我跟同學合作的一篇論文，以一個數字化檔案庫為例，如何使用可視化工具幫助一般讀者對文本進行分析，同時連接細讀（close reading）與遠讀（distant reading）;並在文中展示這個可視化工具的設計過程，以及個人參加會議的感想。
稍早在會議上分享論文的設計思路，現在趕緊寫這篇文章，不然又會繼續拖稿了。
論文收錄於可視化Top 1會議 IEEE VIS 2018 的 VIS4DH （數字人文可視化）Workshop。
今天workshop的開場短講：
會寫這篇文章（以及這一系列的關係網絡文章），是因為去年底修了一堂博士生的課程。在課堂期末時，我跟一位同學合作，完成了一個交互可視化與一篇短論文，然後在今年初時，跟授課老師與同學一起修改這篇短論文，再發到今年的VIS4DH Workshop，最後很榮幸的被收錄了🎉
論文的作者，依次是：Sarah Campbell（同學）、Zhengyan Yu、Sarah Connell（數據項目負責人）、Cody Dunne（授課老師）。
可視化工具的簡要交互如下（gif圖）：
鼠標移到左邊的圓圈上，在中間的關係網絡可視化中，會顯示出這篇文本最常見的文本元素（In-text elements）；也可以直接對關係網絡做交互，看這個文本元素跟文本類別的關係；最右邊的是文本清單，點擊任何一個文本會直接連接到另一個網站，閱讀這個文本的完整內容。
不同顏色代表不同文本類別：戲劇（紅色）、虛構小說（紫色）、非虛構小說（藍色）、詩詞（綠色）。
細讀（close reading） 與 遠讀（distant reading）
這篇論文最主要探討的是 close reading 跟 distant reading。
Close reading 指的是傳統閱讀一個文本的過程，distant reading 在 close reading 的對立面，distant reading 提供了較為抽象的分析，可以針對一個文本或數個文本。
這兩個概念在數字人文（digital humanity）中，很常被探討與使用，雖然我在最後改論文的時候才知道hhh。
eMargin 是 close reading 的一個代表例子。 eMargin是一個協作工具，可以對文章、句子、單詞進行高亮或是撰寫備註：
Stefanie Posavec的這個作品是 distant reading的一個經典例子，有在關注可視化的人應該對這個作品不陌生：
樹狀結構代表了單詞結構，而不同的顏色代表不同的主題。
雖然有許多的可視化跟工具被開發來探討 close reading 跟 distant reading，然而只有少數的可視化可以同時結合 close reading 與 distant reading，並提供數據分析給使用者探索。因此，我們這篇論文的最主要的貢獻是，開發了一個可以同時進行 close reading 與 distant reading 的可視化分析工具。
此外，在論文當中，也公開了我們的設計思路，從草稿階段到完成作品，透明化這個過程，希望能對設計師或是其他研究數據人文相關問題的研究人員，在設計可視化工具的思路上有所幫助。
數據
我們獲得的數據有三類：
- 元數據
標題、作者、發佈時間、發布地點、文本類別。
2. 文本元素數據
組織名稱、位置名稱、人物名稱，下圖是人物名稱的例子：
3. 全文數據
從1526年到1850年匯集的文本（TEI-encoded），下圖是一個文本全文的部分截圖：
設計目標 & 設計過程
這裡展示我們從頭腦風暴階段到後續不斷改進的過程。在畫草稿階段，我跟Sarah Cambell同學各自畫了自己想要呈現的可視化，並討論這些可視化的優缺點。
弧線圖(Arc Diagram) 與 Node-link圖可視化
弧線圖（左邊）展示了文本元素跟文本的關係，若兩個文本元素（藍色方框）被紅線連接起來，代表這兩個文本元素屬於同一個文本。
Node-link圖可視化（右邊），展示了機構名稱跟發表地點的關係，若三角形（機構名稱）跟發表地點（圓圈）被連接起來，代表屬於同一個類型的文本，不同的顏色連接線，代表不同種類。
但這兩種可視化對一般使用者並不友好，在解讀上比較不直觀，加上容易產生視覺上的雜亂（visual clutter）。
多視角的可視化
這個草稿同時使用了兩種不同的可視化：左邊是概覽可視化，展示了文本的發佈時間分佈，數據分析維度較宏觀；右邊是Bipartite圖可視化，展示了文本元素跟標題、作者的關係，數據分析維度較微觀。
我們最後決定使用這個多視角的可視化展現方式。在看了許多的關係網絡可視化作品後，我們發現很多作品對使用者並不友好，在交互上或是信息獲取上，都不太直觀。用多視角的可視化，可以較好的解決這個問題。另外，使用Bipartite圖可視化可以減少視覺雜亂，為了讓一般使用者容易解讀，考量這個因素非常重要。
在決定使用的可視化樣式後，我們開始使用代碼導入數據，並繼續迭代修改：
概覽可視化
從左到右是迭代的設計修改過程，一開始使用半透明的圓圈來展示文本的發佈時間分佈。但我們想要讓使用者可以對每一個文本進行交互，所以每一個圓圈要可以讓使用者選取，但階段一有許多圓圈相互重疊，所以我們摒棄這個方式。階段二在階段一的基礎上修改，若圓圈重疊，我們增加的每一個圓圈的半徑，但視覺上仍有許多圓圈重疊；最後我們使用了蜂群圖（Bee Swarm），才解決這個問題。
Bipartite圖可視化
這裡展示了Top 20的文本元素的對應關係。一開始是將Top 20的文本元素對應到每一個文本，我們想要看這些文本元素到底在哪些文本有較高的出現頻率。但因為有401個文本，所以在視覺展現上非常差。我們在階段二摒棄401個文本，使用了文本類別來跟Top 20的文本元素展示對應關係，並將連接線曲線化，視覺雜亂的問題在階段二已經有顯著的改善，但仍有所不足。在階段三，我們將不同的線平均分佈，讓每一條線得以清晰展示。清晰展示關係線，在關係網絡分析中是非常重要的。
PS.在這一階段中，我自己不斷反思可視化設計師的重要性到底在哪。課堂中，只有我跟我同學是可視化設計項目的學生，其他都是Computer Science的本碩博學生。在代碼的作業上我們確實不如這些學生，但在可視化草稿構思階段與後續的設計修改迭代階段，我跟我同學這組獲得授課老師的高度讚揚，只有我們可以想出各種不同的可視化樣式，也只有我們在視覺上有更多的改進想法，這是在其他組別中所沒有的。
或許，設計本身而言就是一個不斷迭代的過程，身為設計師，在視覺上有較高的敏銳性、以及願意不斷的改進視覺呈現吧。
討論
這個可視化工具呈現了一些有趣的分析結果，例如選取了機構名稱後，British Parliament（英國議會）大量的出現在非虛構小說中，時間是紛亂的十七世紀。
後續
因為在報告的過程中太緊張，最後在問答環節沒有表現好，所幸仍然有收到其他學者給的正面回饋，還好沒有被我完全搞砸。我下次若還有機會，真要好好準備，尤其是回答問題的部分。
應該是看了許多龍應台筆下的東西德的緣故，柏林是我在所有歐洲國家（甚至是整個西方國家）中，最想拜訪的城市。下午吃完飯後就去柏林圍牆跟附近逛逛：
後續文章會繼續更新，繼續講一些我在關係網絡課程中學到的基礎知識，以上。
👉🏼點擊此link直接下載本論文👈🏼
