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

Zheng-yan Yu
Oct 23, 2018 · 8 min read
Image for post
掃掃QR code,關注我們的微信公眾號,獲得最前沿的可視化資訊!

本文作者

Image for post
Image for post

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

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

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

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

今天workshop的開場短講:

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

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

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

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

Image for post
Image for post
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是一個協作工具,可以對文章、句子、單詞進行高亮或是撰寫備註:

Image for post
Image for post
eMargin

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

Image for post
Image for post
Literary organism

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

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

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


數據

我們獲得的數據有三類:

  1. 元數據

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

2. 文本元素數據

組織名稱、位置名稱、人物名稱,下圖是人物名稱的例子:

Image for post
Image for post

3. 全文數據

從1526年到1850年匯集的文本(TEI-encoded),下圖是一個文本全文的部分截圖:

Image for post
Image for post

設計目標 & 設計過程

這裡展示我們從頭腦風暴階段到後續不斷改進的過程。在畫草稿階段,我跟Sarah Cambell同學各自畫了自己想要呈現的可視化,並討論這些可視化的優缺點。

弧線圖(Arc Diagram) 與 Node-link圖可視化

Image for post
Image for post

弧線圖(左邊)展示了文本元素跟文本的關係,若兩個文本元素(藍色方框)被紅線連接起來,代表這兩個文本元素屬於同一個文本。

Node-link圖可視化(右邊),展示了機構名稱跟發表地點的關係,若三角形(機構名稱)跟發表地點(圓圈)被連接起來,代表屬於同一個類型的文本,不同的顏色連接線,代表不同種類。

但這兩種可視化對一般使用者並不友好,在解讀上比較不直觀,加上容易產生視覺上的雜亂(visual clutter)。

多視角的可視化

Image for post
Image for post

這個草稿同時使用了兩種不同的可視化:左邊是概覽可視化,展示了文本的發佈時間分佈,數據分析維度較宏觀;右邊是Bipartite圖可視化,展示了文本元素跟標題、作者的關係,數據分析維度較微觀。

我們最後決定使用這個多視角的可視化展現方式。在看了許多的關係網絡可視化作品後,我們發現很多作品對使用者並不友好,在交互上或是信息獲取上,都不太直觀。用多視角的可視化,可以較好的解決這個問題。另外,使用Bipartite圖可視化可以減少視覺雜亂,為了讓一般使用者容易解讀,考量這個因素非常重要。

在決定使用的可視化樣式後,我們開始使用代碼導入數據,並繼續迭代修改:

概覽可視化

Image for post
Image for post

從左到右是迭代的設計修改過程,一開始使用半透明的圓圈來展示文本的發佈時間分佈。但我們想要讓使用者可以對每一個文本進行交互,所以每一個圓圈要可以讓使用者選取,但階段一有許多圓圈相互重疊,所以我們摒棄這個方式。階段二在階段一的基礎上修改,若圓圈重疊,我們增加的每一個圓圈的半徑,但視覺上仍有許多圓圈重疊;最後我們使用了蜂群圖(Bee Swarm),才解決這個問題。

Bipartite圖可視化

Image for post
Image for post

這裡展示了Top 20的文本元素的對應關係。一開始是將Top 20的文本元素對應到每一個文本,我們想要看這些文本元素到底在哪些文本有較高的出現頻率。但因為有401個文本,所以在視覺展現上非常差。我們在階段二摒棄401個文本,使用了文本類別來跟Top 20的文本元素展示對應關係,並將連接線曲線化,視覺雜亂的問題在階段二已經有顯著的改善,但仍有所不足。在階段三,我們將不同的線平均分佈,讓每一條線得以清晰展示。清晰展示關係線,在關係網絡分析中是非常重要的。

PS.在這一階段中,我自己不斷反思可視化設計師的重要性到底在哪。課堂中,只有我跟我同學是可視化設計項目的學生,其他都是Computer Science的本碩博學生。在代碼的作業上我們確實不如這些學生,但在可視化草稿構思階段與後續的設計修改迭代階段,我跟我同學這組獲得授課老師的高度讚揚,只有我們可以想出各種不同的可視化樣式,也只有我們在視覺上有更多的改進想法,這是在其他組別中所沒有的。

或許,設計本身而言就是一個不斷迭代的過程,身為設計師,在視覺上有較高的敏銳性、以及願意不斷的改進視覺呈現吧。


討論

Image for post
Image for post

這個可視化工具呈現了一些有趣的分析結果,例如選取了機構名稱後,British Parliament(英國議會)大量的出現在非虛構小說中,時間是紛亂的十七世紀。


後續

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

Image for post
Image for post
Photo credit: Jonathan C. Roberts

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

Image for post
Image for post
Image for post
Image for post

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

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


Vis It 有視沒事

致力於創作及分享優質的數據可視化內容,打造集資訊、理論、與實踐心得成果於一體的可視化中文資訊平台。團隊成員均具有相關專業…

Zheng-yan Yu

Written by

@NU_CAMD alumni. Data visualization designer. Formerly @philipslight, @Deloitte. My portfolio 👉🏼https://noelfish6.github.io 台北、北京、波士頓,走走停停

Vis It 有視沒事

致力於創作及分享優質的數據可視化內容,打造集資訊、理論、與實踐心得成果於一體的可視化中文資訊平台。團隊成員均具有相關專業背景,活躍於各大互聯網公司及前沿實驗室。我們熱愛數據可視化,沒視就有事!

Zheng-yan Yu

Written by

@NU_CAMD alumni. Data visualization designer. Formerly @philipslight, @Deloitte. My portfolio 👉🏼https://noelfish6.github.io 台北、北京、波士頓,走走停停

Vis It 有視沒事

致力於創作及分享優質的數據可視化內容,打造集資訊、理論、與實踐心得成果於一體的可視化中文資訊平台。團隊成員均具有相關專業背景,活躍於各大互聯網公司及前沿實驗室。我們熱愛數據可視化,沒視就有事!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store