關係網路可視化 | 實際案例分享

掃掃QR code,關注我們的微信公眾號,獲得最前沿的可視化資訊!

本文作者


本文介紹我跟同學合作的一篇論文,以一個數字化檔案庫為例,如何使用可視化工具幫助一般讀者對文本進行分析,同時連接細讀(close reading)與遠讀(distant reading);並在文中展示這個可視化工具的設計過程,以及個人參加會議的感想。

稍早在會議上分享論文的設計思路,​​現在趕緊寫這篇文章,不然又會繼續拖稿了。

論文收錄於可視化Top 1會議 IEEE VIS 2018 的 VIS4DH (數字人文可視化)Workshop。

10/21在柏林舉行的可視化會議

今天workshop的開場短講:

所有workshop收錄的文章都刊登於此

會寫這篇文章(以及這一系列的關係網絡文章),是因為去年底修了一堂博士生的課程。在課堂期末時,我跟一位同學合作,完成了一個交互可視化與一篇短論文,然後在今年初時,跟授課老師與同學一起修改這篇短論文,再發到今年的VIS4DH Workshop,最後很榮幸的被收錄了🎉

論文的作者,依次是:Sarah Campbell(同學)、Zhengyan Yu、Sarah Connell(數據項目負責人)、Cody Dunne(授課老師)。

可視化工具的簡要交互如下(gif圖):

https://github.com/VisDunneRight/WWOVis

鼠標移到左邊的圓圈上,在中間的關係網絡可視化中,會顯示出這篇文本最常見的文本元素(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是一個協作工具,可以對文章、句子、單詞進行高亮或是撰寫備註:

eMargin

Stefanie Posavec的這個作品是 distant reading的一個經典例子,有在關注可視化的人應該對這個作品不陌生:

Literary organism

樹狀結構代表了單詞結構,而不同的顏色代表不同的主題。

雖然有許多的可視化跟工具被開發來探討 close reading 跟 distant reading,然而只有少數的可視化可以同時結合 close reading 與 distant reading,並提供數據分析給使用者探索。因此,我們這篇論文的最主要的貢獻是,開發了一個可以同時進行 close reading 與 distant reading 的可視化分析工具。

此外,在論文當中,也公開了我們的設計思路,​​從草稿階段到完成作品,透明化這個過程,希望能對設計師或是其他研究數據人文相關問題的研究人員,在設計可視化工具的思路上有所幫助。


數據

我們獲得的數據有三類:

  1. 元數據

標題、作者、發佈時間、發布地點、文本類別。

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(英國議會)大量的出現在非虛構小說中,時間是紛亂的十七世紀。


後續

因為在報告的過程中太緊張,最後在問答環節沒有表現好,所幸仍然有收到其他學者給的正面回饋,還好沒有被我完全搞砸。我下次若還有機會,真要好好準備,尤其是回答問題的部分。

Photo credit: Jonathan C. Roberts

應該是看了許多龍應台筆下的東西德的緣故,柏林是我在所有歐洲國家(甚至是整個西方國家)中,最想拜訪的城市。下午吃完飯後就去柏林圍牆跟附近逛逛:

後續文章會繼續更新,繼續講一些我在關係網絡課程中學到的基礎知識,以上。

👉🏼點擊此link直接下載本論文👈🏼