關係網路可視化 | 開篇簡介

Zheng-yan Yu
Vis It 有視沒事
8 min readOct 23, 2018
掃掃QR code,關注我們的微信公眾號,獲得最前沿的可視化資訊!

本文作者

關係網路可視化之node-link:點與線構成的網絡科學(network science);圖片作者:Martin Grandjean

2017秋季,我在美國東北大學信息設計藝術碩士項目(Master of Fine Arts in Information Design and Visualization)就讀的第三個學期,修了四門課,其中一門課專注在關係網路可視化(network visualization,又稱graph visualization,圖可視化)的探索與實踐,屬於Computer Science博士班課程,一周上兩次。

Cody Dunne

授課老師是Cody Dunne,在馬里蘭大學取得碩士與博士學位,師從Ben Shneiderman大神。 Cody他專注在信息可視化、網絡科學、人機交互等,在進入東北大學教書之前,他曾擔任IBM研究單位的科學家。這門課配有兩個助教(研究領域皆是關係網路可視化),負責解決作業問題與其他課程需求。

這門課是我在美國這一年半以來選到壓力最大的一門,因為它屬於Computer Science博士班的課程,所以會有許多文獻需要閱讀;另外,部分作業很要求寫代碼的能力;再加上每週需要上兩次課,通常課程只需要一周上一次,每次三個半小時,這門課被切成兩半,雖然總上課時數沒有變,但課程壓力增加許多,作業與每週閱讀文獻的量變成一般課程的兩倍,例如周二上完課,我們必須在下一次上課前一天,也就週三(隔天週四上第二次課)之前到課程論壇上傳文獻閱讀心得。

具體課程作業要求:

  1. 整個學期總共38篇文獻需要閱讀(每週約5至7篇,集中在課程前半部分),需要上傳閱讀心得(且帶批判思維,不能只是梳理文獻結果),然後上課的時候有小考。
  2. 整個學期有5門作業:圖可視化工具實操(兩人一組上台報告展示)、2個D3可視化實作(一個為基礎的圖可視化實現,另一個為實現儀表板的交互可視化)、文獻報告(一人一組,選一篇文獻上台報告)、用代碼實現一個經典的圖可視化算法(是所有作業裡的大魔王,反正我是花了兩個整天耗在圖書館還是沒有完成… )
  3. 期末專題:2至3人一組,與業界人士合作(從他們那邊拿數據與了解他們的需求於需解決的問題),完成一個完整的圖可視化開發(從草擬到可交互的交互可視化、撰寫符合規範期刊格式的論文、上台報告展示等)

課程的詳細訊息與資料皆可以在這個網站查看與下載:https://codydunne.github.io/cs7295-f17/

關係網路可視化,簡而言之是用點(nodes)與線(edges)或矩陣(matrix)去呈現複雜數據之間的網絡關係。這一系列的文章共有7篇(包括本篇),主要梳理了我在這門課學到的知識,從閱讀文獻到實際做一個關係網絡可視化項目:

1. 開篇簡介

簡要介紹關係網絡可視化系列文章的內容。

2. 文獻泛讀之1: node-link(點線) & matrix(矩陣)

牽涉到關係網路可視化的種類,大致可以分成兩個類型,一個是使用node-link(點線)、另一個是使用matrix(矩陣)。在課堂的文獻閱讀中,可以很明顯的了解,呈現關係網路可視化主要分成這兩個陣營。 node-link(點線)可以呈現較多細節資訊,但容易使關係網絡可視化變得很複雜;matrix(矩陣)可以大幅簡化關係網路,並清楚呈現兩兩之間的關係,但同時也遺失了關係網路數據中的部分重要資訊,像是無法呈現地理資訊。兩者間的愛恨情仇會在這篇大致梳理。

a) Node-link 點線 & b) Matrix 矩陣

3. 文獻泛讀之2: 可視化的視覺呈現

包括關係網路可視化,在呈現數據可視化時,需要注意顏色以及其他視覺元素的使用,如何避免使用錯誤的顏色而造成曲解、如何使用格式塔法則(Gestalt Principles)來輔助可視化,將在此文探討。

使用彩虹色階(左邊)容易產生視覺曲解

4. 文獻泛讀之3: 輔助視角的呈現(integration & coordinated views)

此章節會介紹如何使用其他數據可視化的樣式來輔助關係網路可視化。如同儀錶盤(dashboard),關係網路也會需要其他可視化來幫助使用者來探索與深入了解數據之間的網絡關係。

左右兩個不同視角的可視化可以輔助使用者了解同一個數據

5. 關係網路可視化工具:gephi

選一個網絡可視化工具並上台報告是這門課的作業之一,可以選擇的工具有:gephi、NodeXL、Cytoscape 、Tulip、Visone 等等,我們這組(兩個人)選了gephi。 gephi的特色在易於操作以及可以呈現動態網絡關係等,但因為它也是一個開源的工具,所以有許多坑。此篇將手把手講解如何使用gephi的基本功能以及會遇到的問題。

gephi

6. 文獻報告

此篇也是課堂的其中一個作業,每個人需要選一篇文獻(由老師列出,其他文獻可以在課程網站的Paper Presentations查看)精讀並上台報告。我選的是《Many-to-Many Geographically-Embedded Flow Visualisation- An Evaluation》,發表於2016年。對於我而言,這篇論文的特點在於列舉的文獻與數理相當具有邏輯,可以從這篇文章的文獻綜述去了解為何作者要提出一個新的關係網絡可視化樣式來解決問題;另外,文章中詳細講解一個新的關係網絡可視化樣式的設計過程以及如何設計實驗來檢測該可視化,也是我獲益良多的部分。

如何在node-link與matrix之間取捨,是此篇文獻的一個重點

7. 期末project

作為課程的重點項目,我跟一個同學合作,從數據選取、問題探索、可視化樣式腦力激盪、代碼使用,從頭到尾的做出一個可以交互的可視化工具與一篇結構完整、已經可以發表的論文。此篇將呈現整個項目設計過程。

期末project 可視化工具的截圖

以上。

參考文獻:

M. Ghoniem, J.-D.Fekete, and P. Castagliola, “A Comparison of theReadability of Graphs Using Node-Link and Matrix-Based Representations,”IEEE Symposium on Information Visualization, 2004.

Stef van den Elzenand Jarke J. van Wijk, “Multivariate NetworkExploration and Presentation: From Detail to Overview via Selections andAggregations,” 2014.

Michelle A. Borkinet al., “Evaluation of Artery Visualizations for HeartDisease Diagnosis,” 2011.

Yalong Yang et al., “Many-to-ManyGeographically-Embedded Flow Visualisation- An Evaluation,” 2016.

--

--

Zheng-yan Yu
Vis It 有視沒事

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