第一章 緒論
1.4 論文章節架構
是留言行為的臉書使用者；研究透過 Rotating Cluster Layout 的形式呈現積極活 動者以及其分享文章之間的關係，並且以外部子節點表示其相關之文章，透過外
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
4
第二章 相關研究
在第二章，將介紹與本研究相關之研究，首先，第一節介紹社群網路傳播行 為視覺化的相關研究，根據研究對象的社群網路平台不同，依序介紹 Google+、
Plurk、Twitter、微博的視覺化工具，簡述上述視覺化工具之目的、功能以及呈現 的視覺化方式，接著將社群網路活動的資料進行視覺化，例如採用點線圖呈現熱 門的網路文章互動行為時，容易產生大量的節點和邊線數量，導致鄰近節點重疊 和邊線交錯的現象增加，這些現象會增加使用者對圖形解讀的困難，也就是造成 視覺混亂，第二節介紹圖形簡化之相關研究以解決視覺混亂問題；由於圖形簡化 會損失部分資料的特性，節點資料通常具有較多的資料特性，而邊線僅用來建立 節點之間的連接關係，只針對邊線處理可確保較多原有資料之特性，第三節將介 紹藉由邊線捆綁的技術研究來減少視覺混亂現象。
2.1 社群網路視覺化
近年來許多社群網站興起，例如 Facebook、Google+、Twitter、Plurk 等網站 都是知名的社群網站因此有許多研究以虛擬社群的使用者為研究對象，針對虛擬 社群的使用者行為分析並且視覺化，Google 針對 Google+提出了 Ripples 服務[1]，
Ripples 提供使用者觀察文章訊息被分享的擴散情形，呈現方式為節點圖結合 circular treemap 的表示圖，此佈局除了有效率的利用空間，也能彰顯這篇文章上
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
5
每位社群使用者造成的影響力範圍，觀察某些訊息只在直接的交友圈傳遞，有些 訊息則透過意見領袖的分享擴散到不同領域的交友圈，如圖 2-1，透過 Google+
Ripples 可了解參與該文章的分享行為的使用者們的影響力，進而發掘其中重要 的意見領袖；並且可搭配圖形下方的分享行為之時間軸，利用動畫的方式逐一呈 現該篇文章成長的過程，依照文章分享的時間順序進行畫面更新，可幫助了解該 篇文章分享的趨勢消長以及部分意見領袖在時序上的影響情形。
圖 2-1 Google+ Ripples，摘自[1]
Chien-Tung Ho 等人以微網誌噗浪(Plurk)為研究對象[2]，定義一套在微網誌 上測量資訊傳播能力的方法，此測量方法可分為三個面向：吸引參與話題的人數、
話題的傳播速度、地理範圍上的傳播程度，以這三個面向建立資訊傳播模型，呈 現方式之一為 Plurpagation 的影響樹(如圖 2-2)，此影響樹以開源工具 Graph Gear 繪製，呈現中心使用者(不萊恩)與其追隨者之間的傳播關係，顯示中心使用者在 此主題所造成的影響程度，除了影響樹的呈現，搭配 Google Map 標記出參與主 題的社群使用者所在之地理位置，表示出該主題在地理範圍上的傳播程度，以及
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
6
發掘該主題的傳播範圍：是僅限於國內還是全球性的主題，該研究提供一套測量 微網誌上傳播能力的工具(Plurpagation)，呈現特定主題在微網誌上的傳播情形。
圖 2-2 Plurpagation 的影響樹，摘自[2]
2012 年 Nan Cao 等人提出 Whisper[3]，針對全球熱門社群網站推特(Twitter) 的轉推訊息(retweet)的擴散行為做即時追蹤並且視覺化，Whisper 以向日葵散播 種子的概念譬喻社群媒體訊息散播之情形，如圖 2-3。從 Twitter API 撈取資料，
追蹤使用者感興趣的事件，以時間軸和地域性的角度呈現該事件的擴散情形，並 且分析不同地區分享者對於該事件的情緒反應，以了解不同地區的人們對於該事 件的看法。Whisper 也對視覺混亂情形做了處理，提出一套新的繪圖方式，基於 來自電場的通量線(flux line)對鄰近的通量線會產生排斥，因此通量線不會相交，
藉此解決視覺混亂現象，Whisper 提供一套結合地域性、時間性的社群網路活動 視覺化，視覺佈局以資料的地域性為主軸，中心圓盤呈現各地區對特定主題的情 緒視覺化，邊線則結合動畫的方式表示資料傳播的時間特性，表現出每一條轉推 訊息傳遞的時間點，該研究以一張圖形呈現出資料的多種特性(社群使用者的情 緒、地理資訊、時間資訊)。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
7
圖 2-3 Whisper，摘自[3]
2014 年 Donghao Ren 等人提出 WeiboEvents[4]，如圖 2-4 微博視覺分析系 統各功能呈現，以分析微博(Weibo)上的事件為對象的視覺化分析系統（PKUVIS），
PKUVIS 中的視點圖是將每一條微博訊息轉換成節點，依據訊息轉發的關係建立 連線，透過視點圖來表示特定事件在微博上轉發的過程，另外提供多種視覺化的 模式(帆狀圖、樹狀圖和圓環圖)以及一些互動操作功能，以不同的層面檢視資料，
為一個功能完善的微博事件視覺化平台。
圖 2-4 微博視覺分析系統各功能呈現，摘自[4]
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
8
2.2 圖形簡化
當點線圖顯示大量節點以及節點間彼此相連的關係緊密，容易造成節點重疊、
邊線大量互相交錯之現象，增加了點線圖的複雜程度，也就是視覺混亂（visual clutter），如圖 2-5 所示，兩圖皆以邊線呈現節點與節點間的關係，由於節點間 的關係緊密，導致大量的邊線產生並且形成交錯，在圖形呈現太多資訊，不易解 讀各個節點之間的關係以及主要的資料特徵，增加了使用者解讀圖形的困難。
圖 2-5 視覺混亂現象，摘自[9]
為了解決這樣的問題，可以透過改變節點位置、減少節點和邊線的數量或是 結合互動操作[5][6]的方式減緩視覺混亂，如圖 2-6 所示，Edge Plucking 提供一 套互動工具，在不改變節點位置以及保留點線關係的情形下，藉由改變邊線的彎 曲程度減少邊線重疊之情形，一般而言，為了維持原始資料的完整性，會盡量維 持節點、邊線的數量。
圖 2-6 模擬撥弦效果以及 EdgeLens 和 Edge Plucking 方法比較，摘自[6]
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
9
force-directed placement [7]是一種基於物理模擬的點線圖佈局演算法，如圖 2-7，該演算法模擬彈簧伸縮之效果，在圖的架構上加入吸引力和互斥力的要素，
使每個節點間保持一定距離，透過該方法可在不減少資料點的情形下減少視覺混 亂，然而有些原始資料的節點具有地理意義，改變節點位置時可能會喪失部分的 資訊。
圖 2-7 Force-directed placement，摘自[7]
Flow map[8]針對具有方向性、地域性的資料提出一套佈局演算法，在盡量 維持節點之間的相對位置下，對節點位置進行微調，以減少邊線交叉、重疊之現 象，如圖 2-8，以及採用 Binary hierarchical clustering 方法，將具有相同目標且 鄰近的邊線進行合併，根據 Binary hierarchical clustering 所取得的空間資訊作 edge routing，edge routing 是藉由調整 route 的位置以避免邊線交錯之機制；也有 許多研究只針對邊線進行處理，即針對邊線進行綑綁以達到圖形簡化，本研究的 單一篇文章視覺化即採用邊線捆綁技術。
圖 2-8 Flow map，摘自[8]
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
10
2.3 邊線捆綁
本篇論文透過邊線來處理視覺混亂問題，邊線綑綁（edge bundling）是將點 線圖中鄰近的邊線綑綁，在不減少節點和邊線數量的情況下，盡可能地減少邊線 的交叉重疊情形，透過此方法可解決視覺混亂之問題外，同時保留住資料的細節 資訊，也能將重要資料的特徵凸顯出來。
Hierarchical Edge Bundles(HEB)是邊線綑綁的經典演算法之一[9]，針對具有 階層式關係的資料，將鄰近的邊線進行綑綁，資料的階層關係會影響綑綁程度，
如圖 2-9，透過這樣的方式解決視覺混亂，除了顯示出父子節點直接關係，也凸 顯父節點之間相鄰的關係。HEB 演算法只適用於具有階層化結構的圖，而 GBEB 提出一種可針對無階層結構的圖進行邊線綑綁的方法。
圖 2-9 階層式邊線捆綁的不同綑綁程度，摘自[9]
Geometry-Based Edge Bundling（GBEB）是基於幾何的邊線綑綁[10]是第一 個能對無特別結構的點線圖進行邊線綑綁的演算法，如圖 2-10；首先，針對點 線圖產生一個均勻的輔助網格，計算出每個網格內每個邊線的平均向量：接著將 位置相鄰且邊線向量方向一致的網格進行合併，透過這些合併後的網格可產生一 個控制網格，控制網格和原本點線圖相交即為控制點，強迫和控制網格相交的邊 線只能從控制點通過，藉此達到邊線綑綁的效果。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
11
圖 2-10 基於幾何的邊線綑綁流程圖，摘自[10]
由於 HEB 只能處理具有階層架構的資料才能進行綑綁，以及 GBEB 進行綑 綁前需要先建立控制網格，Force-Directed Edge Bundling（FBEB）提出一種自組 織(Self-Organization) 的邊線捆綁方法[11]，將邊線視為具有彈性的彈簧，邊線對 彼此存在吸引力，如圖 2-11，當兩條邊線達到一定條件則進行綑綁。然而，GBEB 和 FDEB 演算法的計算量都非常大；GBEB 需要對圖產生一個複雜的輔助網格並 且將邊線分成多段，然後必須計算每個網格的平均方向，才能求出可作為綑綁引 導的控制網格；而 FDEB 的複雜度更高，需要對全部邊線兩兩互相計算彼此彈簧 引力，在針對大量的資料處理時得花費相當的時間。
圖 2-11 基於邊線兩種力引導之示意圖，摘自[11]
Multilevel agglomerative edge bundling 可解決對大量資料綑綁的效率問題 [12]，也允許處理無階層結構的點線圖，其綑綁演算法類似快速聚合分群技術，
根據圖的節點位置建構出邊線的近似關係圖，以此對邊線之間的相似度進行建模，
以階層式邊線聚合的方式進行綑綁，以邊線為基礎的覆蓋像素數作為衡量綑綁過
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
12
程是否有效率的標準，能夠在數分鐘內捆綁百萬條邊線，如圖 2-12，此圖有 429760 條邊線。
圖 2-12 Multilevel agglomerative edge bundling 結果圖，摘自[12]
另一方面，GBEB 和 FDEB 演算法忽略了邊線的方向性、權重值以及圖的連 貫性，Selassie 等人提出 Divided Edge Bundling[13]，以往的邊線捆綁技術只針對 無向圖進行處理，此研究提出一種針對有向圖邊線捆綁方法，以類似於高速公路 分隔島的形式，如圖 2-1，將相同節點的邊線中不同方向的邊線分隔開來，並且 賦予邊線權重值，保原有資料的方向性，以顯示出資料整體的流向。
另一方面，GBEB 和 FDEB 演算法忽略了邊線的方向性、權重值以及圖的連 貫性，Selassie 等人提出 Divided Edge Bundling[13]，以往的邊線捆綁技術只針對 無向圖進行處理，此研究提出一種針對有向圖邊線捆綁方法，以類似於高速公路 分隔島的形式，如圖 2-1，將相同節點的邊線中不同方向的邊線分隔開來，並且 賦予邊線權重值，保原有資料的方向性，以顯示出資料整體的流向。