分享脈絡：社群媒體訊息散播行為視覺化 - 政大學術集成

全文

(1)國立政治大學資訊科學研究所 Department of Computer Science National Chengchi University 碩士論文 Master's Thesis. 立. 政治大. ‧ 國. 學. 分享脈絡：社群媒體訊息散播行為視覺化. ‧. ShareFlow: Information Diffusion Visualization with Social Media. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 研究生：魏浩翔指導教授：紀明德. 中華民國一百零四年十一月 November 2015.

(2) 分享脈絡：社群媒體訊息散播行為視覺化 ShareFlow: Information Diffusion Visualization with Social Media 研究生：魏浩翔. Student: Hao-Xiang Wei. 指導教授：紀明德. Advisor: Ming-Te Chi. 治. 立. 政國立政治大學資訊科學系. 大. ‧. ‧ 國. 學. 碩士論文. y. sit. Nat. A Thesis. er. io. Submitted to Department of Computer Science National Chengchi University a. n. iv l C n in partial fulfillment Requirements h e n gofcthe hi U for the degree of Master in Computer Science. 中華民國一百零四年十一月 November 2015.

(3) 致謝. 時光匆匆，轉眼間已來到了這時候，在政大的日子已經兩年多了，這段期間很謝謝我的指導老師紀明德老師，從一開始的願意指導我，在研究過程中適時的引導我前進，給我肯定和鼓勵，謝謝老師的幫助以及包容。謝謝這段期間支持我學業的父母、姐姐，謝謝佩敏在我準備考試期間的支持，如果沒有妳的幫助，就不會有現在的我。謝謝汪禹學長、凱彬學長、明慶學長、士豪學長、維晉學長、臻騏. 政治大. 這段日子以來的照顧，碩一時期雖然課業繁重，但因為有你們而添了幾分歡樂，. 立. 仍然很懷念那段時光，謝謝承毅、睿誠、建凱、春閔為實驗室帶來歡樂、活力氣. ‧ 國. 學. 氛，幫忙了實驗室很多事情。謝謝貞佑、育如、婷雅、柔文、芷瑄、科豫、崇銘、彥廷、佳霖、久芳、義瑋、主員、巽凱、翰陽、雯琪、家禎、言翰、巧如、怡潔. ‧. 學姊，除了給我研究上的建議與幫助外，也讓我參與到很多有趣的活動，增添不. y. Nat. sit. 少美好的回憶，謝謝你們。謝謝劉慧雯老師、徐國偉老師、怡璇、怡瑩、哲嘉在. n. al. er. io. 計畫、研究上的幫忙。最後，謝謝同屆的凱文跟亞憲，兩年多一路上的相互扶持，. i n U. v. 從討論研究到稀鬆平常的小事都可以無話不談，以為見面是如此平常的事情，然. Ch. engchi. 而現在這段時光很快就會稍縱即逝，之後各自分飛，願我們仍能保持聯繫。最後，很高興能遇見你們，謝謝你們陪我走過這段旅程，這此將這份喜悅分享給大家，願你們都能順利完成想做的事情。. 3.

(4) 分享脈絡：社群媒體訊息散播行為視覺化. 摘要. 本篇論文針對社群使用者在社群網路文章上的互動行為進行研究，以視覺化工具 Shareflow 探索互動過程中造成資訊擴散的意見領袖以及. 治政傳播路徑。本研究主要分成兩個部分，第一部分為單一篇文章的分享大立 ‧ 國. 學. 路徑視覺化，基於階層化邊線綑綁(Hierarchical edge bundles)方法，根據控制點的引導將鄰近邊線進行綑綁，透過邊線捆綁舒緩資料量過大. ‧. 時造成之視覺混亂(visual clutter)問題。第二部分為粉絲專頁文章視覺. sit. y. Nat. 化，分析多篇文章中具有多次分享、留言行為之使用者，呈現整體社. er. io. n. al 群中積極活動的使用者以及其相關文章的視覺化。最後提供即時互動 iv. n U engchi 操作介面，以並列方式呈現出資料的廣度和深度，本研究的貢獻為提. Ch. 供一套視覺化工具，協助使用者探索臉書社群網路中的資訊散播過程以及發掘積極活動的臉書使用者。. i.

(5) ShareFlow: Information Diffusion Visualization with Social Media Abstract. In this thesis, we propose a visualization tool, “Shareflow”, for observing the user activities in social media posts, and to explore opinion leaders. 政治大 parts. The first part is. and the propagation path caused by the information diffusion. Our approach contains two. 立. a visualization of. propagation path for a post in Facebook fanpage. Based on hierarchical. ‧ 國. 學. edge bundles, we optimize the layout to reduce visual clutter caused by. ‧. excessive information. The second part is visualization for a summary of. sit. y. Nat. posts in Facebook fanpage. It provides a tool for analysis the active users. io. er. through their sharing and comments activities; In addition, we provide a real-time interactive interface, which demonstrates the breadth and depth. n. al. of information concurrently.C h .. engchi. ii. i n U. v.

(6) 目錄摘要............................................................................................................................... i Abstract ........................................................................................................................ii 目錄............................................................................................................................ iii 圖目錄.......................................................................................................................... v. 政治大 1.1 研究動機與目的............................................................................................. 1 立. 第一章緒論.............................................................................................................. 1. 1.2 問題描述......................................................................................................... 2. ‧ 國. 學. 1.3 論文貢獻......................................................................................................... 3. ‧. 1.4 論文章節架構................................................................................................. 3. y. Nat. 第二章相關研究...................................................................................................... 4. er. io. sit. 2.1 社群網路視覺化............................................................................................. 4 2.2 圖形簡化......................................................................................................... 8. al. n. v i n 2.3 邊線捆綁....................................................................................................... 10 Ch engchi U. 第三章研究方法與步驟........................................................................................ 13 3.1 系統架構....................................................................................................... 13 3.2 資料撈取、整合與分析............................................................................... 14 3.2.1 資料撈取.................................................................................................... 15 3.2.2 資料整合與分析........................................................................................ 16 3.3 階層化邊線捆綁........................................................................................... 18 3.4 單一篇文章分享路徑視覺化....................................................................... 20 3.5 粉絲專頁視覺化........................................................................................... 25 iii.

(7) 3.6 互動機制....................................................................................................... 31 第四章實驗結果與討論........................................................................................ 35 4.1 實作與實驗環境........................................................................................... 35 4.2 個案研究....................................................................................................... 35 4.2.1 單一粉絲專頁觀察(以懶人時報為例) ..................................................... 36 4.2.2 單一事件觀察(以 2015 年 11 月巴黎襲擊事件為例) ............................. 38 4.3 使用者測試(初測) ........................................................................................ 44 4.4 使用者測試(線上問卷) ................................................................................ 49. 政治大結論與未來工作........................................................................................ 58 立. 4.5 限制............................................................................................................... 55 第五章. 5.1 結論............................................................................................................... 58. ‧ 國. 學. 5.2 未來工作....................................................................................................... 59. ‧. 參考文獻.................................................................................................................... 60. n. er. io. sit. y. Nat. al. Ch. engchi. iv. i n U. v.

(8) 圖目錄圖 2-1 Google+ Ripples，摘自[1] ........................................................................... 5 圖 2-2 Plurpagation 的影響樹，摘自[2]................................................................. 6 圖 2-3 Whisper，摘自[3]......................................................................................... 7 圖 2-4 微博視覺分析系統各功能呈現，摘自[4] ................................................. 7 圖 2-5 視覺混亂現象，摘自[9] .............................................................................. 8 圖 2-6 模擬撥弦效果以及 EdgeLens 和 Edge Plucking 方法比較，摘自[6]...... 8. 政治大圖 2-8 Flow map，摘自[8] 立 ...................................................................................... 9 圖 2-7 Force-directed placement，摘自[7] ............................................................. 9. ‧ 國. 學. 圖 2-9 階層式邊線捆綁的不同綑綁程度，摘自[9] ........................................... 10 圖 2-10 基於幾何的邊線綑綁流程圖，摘自[10] ............................................... 11. ‧. 圖 2-11 基於邊線兩種力引導之示意圖，摘自[11] ........................................... 11. sit. y. Nat. 圖 2-12 Multilevel agglomerative edge bundling 結果圖，摘自[12] ................... 12. al. er. io. 圖 2-13 Divided Edge Bundling 結果圖，摘自[13] ............................................. 12. v. n. 圖 3-1 Shareflow 系統架構圖 ............................................................................... 14. Ch. engchi. i n U. 圖 3-2 Pagedata：臉書粉絲專頁文章撈取工具 .................................................. 16 圖 3-3 資料整合流程(以積極分享者視覺化為例) ............................................. 17 圖 3-4 資料合併之階層關係架構圖 .................................................................... 17 圖 3-5 利用階層關係將鄰近邊線綑綁，參考自[9] ........................................... 18 圖 3-6 最終綑綁程度差異 .................................................................................... 20 圖 3-7 單一篇文章分享路徑視覺化(局部邊線綑綁) ......................................... 21 圖 3-8 階層化資料之差異：(a)無階層化資料 (b)階層化資料 ......................... 22 圖 3-9 大部分文章的分享路徑情形 .................................................................... 23 圖 3-10 單一篇臉書文章分享情形圖以及意見領袖百分比軸 .......................... 24 v.

(9) 圖 3-11 具有方向性的單一篇臉書文章分享情形圖 ......................................... 25 圖 3-12 粉絲專頁視覺化階層示意圖 ................................................................... 26 圖 3-13 粉絲專頁視覺化，依照文章的建立時間進行分類。 .......................... 27 圖 3-14 積極分享者分享情形圖。 ...................................................................... 28 圖 3-15 積極留言者留言情形圖。 ....................................................................... 30 圖 3-16 粉絲專頁視覺化以及單一篇文章分享路徑視覺化 .............................. 32 圖 3-17 在提示框上顯示該文章的基本訊息。 .................................................. 32 圖 3-18 單一篇文章分享路徑視覺化之互動機制 .............................................. 33. 政治大圖 4-1 Shareflow：多篇文章的分享行為視覺化。 ............................................ 36 立圖 3-19 積極留言者針對粉絲專頁文章之留言 .................................................. 34. 圖 4-2 具有間接分享行為的文章的基本訊息 .................................................... 37. ‧ 國. 學. 圖 4-3 不同使用者所分享的文章標題集合 ........................................................ 38. ‧. 圖 4-4 國外媒體粉絲專頁中的積極留言者 ........................................................ 39. y. Nat. 圖 4-5 CNN 在期間內的前三名積極留言者的部分留言 .................................... 40. er. io. sit. 圖 4-6 路透社在期間內的前三名積極留言者的留言 ........................................ 41 圖 4-7 積極留言者在粉絲專頁上的留言情形 .................................................... 41. al. n. v i n 圖 4-8 BBC 在期間內的前三名積極留言者的留言 ............................................ 42 Ch engchi U 圖 4-9 華爾街日報在期間內的前三名積極留言者的留言 ................................ 43 圖 4-10 法新社在期間內的前三名積極留言者的留言 ...................................... 43 圖 4-11 群聚樹狀圖(Cluster Dendrogram layout) ............................................... 44 圖 4-12 Treemap layout .......................................................................................... 45 圖 4-13 受測者對積極分享者和積極留言者問題(Q1~Q8)的正確率結果 ....... 47 圖 4-14 整體佈局評估結果 .................................................................................. 48 圖 4-15 單一文章分享路徑佈局之評估結果 ...................................................... 48 圖 4-16 分享路徑視覺化的三種風格比較 .......................................................... 49 vi.

(10) 圖 4-17 使用者議題的可讀性測試結果 .............................................................. 51 圖 4-18 可讀性測試所花費的時間 ...................................................................... 52 圖 4-19 分享路徑的階層性測試結果 .................................................................. 53 圖 4-20 分享路徑視覺化的整體美觀評估結果 .................................................. 53 圖 4-21 分享路徑視覺化的方向性評估結果 ...................................................... 54 圖 4-22 分享路徑視覺化的層次性評估結果 ...................................................... 54 圖 4-23 分享路徑視覺化的意見領袖評估結果 .................................................. 55 圖 4-24 文章分享路徑中斷現象 .......................................................................... 56. 政治大. 圖 4-25 積極留言者的視覺混亂 .......................................................................... 57. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. vii. i n U. v.

(11) 第一章緒論. 1.1 研究動機與目的. 政治大近年來社群網站在臺灣十分盛行，尤其是臉書(Facebook)平台，社群網路上立. ‧ 國. 學. 有成千上萬的使用者在臉書上互動，以及基於品牌、組織、理念而成立的粉絲專頁向使用者提供相關訊息，其中部分粉絲專頁針對臺灣熱門議題、新聞時事而成. ‧. 立，聚集了許多對該粉絲專頁有興趣的臉書使用者，臉書使用者可針對文章進行. sit. y. Nat. 按讚、留言、分享等行為，透過這些臉書使用者在粉絲專頁上的互動行為，可幫. al. er. io. 助我們了解部分臉書使用者對於臺灣一些熱門議題的反應程度。. v. n. 在臉書使用者與文章的互動行為中，臉書使用者的分享行為通常是對該文章. Ch. engchi. i n U. 最有認同感的表示行為，本研究根據來源將分享行為分為兩種，分別是直接分享行為和間接分享行為，直接分享行為即從粉絲專頁(原創者)直接分享文章，而間接分享行為是透過分享該文章的臉書使用者進行再次的分享，在分享的過程中，若有使用者的分享行為促使了後續的分享擴散，則定義該使用者為意見領袖，以單一篇文章為例，我們可以透過點線圖(node-link diagram)來表示分享者與意見領袖的關係，將這些分享關係連接起來，也就是網路圖(Network graph)，即為這篇文章因為分享行為造成資訊擴散之情形，透過這樣的網路圖可呈現文章散播的路徑，但是，由於網路圖較缺乏分類上的視覺表現，本研究採用階層化邊線捆綁方法，根據不同的分享來源為每一次的分享行為作分類，透過此視覺化可顯示文章 1.

(12) 的散播路徑，也強調出傳播過程中分享來源所造成的影響程度多寡。我們通常希望關注熱門的文章，追蹤這些文章的發展情形以及發掘出引導這些發展的意見領袖們，由於熱門文章的規模通常不小，可能導致繪製圖形時的節點、邊線數量過多，容易形成邊線交錯的現象，這樣的畫面使我們不容易看出整個資料的主流趨勢、部分資料彼此間的關係。本研究根據其階層化的關係將分享資料進行分類，以解決視覺混亂問題。除了針對單一篇的文章進行分析，我們進一步以粉絲專頁的角度進行分析觀察，將粉絲專頁的文章資料視覺化，並且找出在同一個粉絲專頁中積極熱衷於分享、留言的使用者們，本研究將這些使用者定. 政治大章，幫助了解這些具有積極活動行為的臉書使用者所偏好的文章議題。立. 義為積極分享者以及積極留言者，並且呈現出積極臉書使用者所分享、留言的文. ‧ 國. 學. 1.2 問題描述. ‧. 本篇論文要解決的問題主要分為兩部分，第一部分為單一篇文章的分享路徑. y. Nat. 視覺化，第二部分為多篇文章的積極分享者視覺；在第一部分，我們會使用點線. er. io. sit. 圖來呈現社群網路的結構，節點代表社群使用者，邊線代表使用者之間的關係，然而，代表分享關係的邊線相交過於頻繁時，可能會導致視覺混亂(visual clutter)；. al. n. v i n 我們採用邊線綑綁(edge bundling)的技術，即將多條鄰近的邊線綑綁成束，這樣 Ch engchi U 束狀的視覺化能讓我們容易看出資料的流向，也讓資料看起來較為美觀；但由於. 原始的分享資料只有紀錄分享者與意見領袖之間的關係，我們必須先將這些資料轉換成節點邊線關係，依照其分享關係建立起階層式的樹狀結構，將每個節點依照其父節點進行階層分類，以利於後續的階層化邊線捆綁處理；基於分享資料可轉換成階層式的樹狀關係，本研究參考階層化綑綁技術(Hierarchical edge bundles)，將資料依照其來源進行分類，每個資料根據其樹狀架構尋找最小共同祖先，透過階層式的關係影響綑綁程度；而分享關係具有從屬的階層關係，只透過靜態的圖呈現階層關係尚嫌不足。 2.

(13) 第二部分，由於多篇文章之間沒有明確階層式關係聯繫，因此資料間的關係較為薄弱，本研究以積極活動者建立社群使用者和文章之關係，積極活動者分為兩種，分別是積極分享者以及積極留言者，即是指在期間內具有多次分享行為或是留言行為的臉書使用者；研究透過 Rotating Cluster Layout 的形式呈現積極活動者以及其分享文章之間的關係，並且以外部子節點表示其相關之文章，透過外部子節點提供更深層的分享行為路徑關係。. 1.3 論文貢獻. 政治大間內的文章資料視覺化，以及其相關文章之分享路徑視覺化，並且從中發掘積極立. 在本研究論文當中，我們撈取了臉書上的粉絲專頁資料，將粉絲專頁特定期. 分享、留言的臉書使用者以及其相關文章，透過視覺化呈現粉絲專頁上的積極分. ‧ 國. 學. 享者以及透過分享行為造成後續訊息擴散的意見領袖。本研究的方向主要分為以. 呈現單一篇文章的分享傳播路徑，並且以階層式視覺化強調造成後續分享擴. y. Nat. . ‧. 下三大部分，各部分的內容簡單敘述如下：. 探討多篇文章之間的積極活動者，以積極活動者為媒介，呈現多篇文章共同. al. n. 關係之視覺化。 . er. io. . sit. 散的意見領袖。. Ch. engchi. i n U. v. 將上述兩種視覺化整合，提供一個具廣度與深度的社群網路行為探索工具。. 1.4論文章節架構在第二章中，我們將會介紹與本研究相關之研究：社群網路視覺化、圖形簡化以及邊線捆綁。在第三章中則是主要的研究方法與步驟：資料撈取、資料分析與資料整合、局部分享路徑、粉絲專頁以及積極活動者視覺化。在第四章則是實驗結果的呈現與分析，其中包含個案研究、使用者評估以及評估結果。第五章是結論與未來研究。 3.

(14) 第二章相關研究. 政治大為視覺化的相關研究，根據研究對象的社群網路平台不同，依序介紹 Google+、立在第二章，將介紹與本研究相關之研究，首先，第一節介紹社群網路傳播行. ‧ 國. 學. Plurk、Twitter、微博的視覺化工具，簡述上述視覺化工具之目的、功能以及呈現的視覺化方式，接著將社群網路活動的資料進行視覺化，例如採用點線圖呈現熱. ‧. 門的網路文章互動行為時，容易產生大量的節點和邊線數量，導致鄰近節點重疊. sit. y. Nat. 和邊線交錯的現象增加，這些現象會增加使用者對圖形解讀的困難，也就是造成. al. er. io. 視覺混亂，第二節介紹圖形簡化之相關研究以解決視覺混亂問題；由於圖形簡化. v. n. 會損失部分資料的特性，節點資料通常具有較多的資料特性，而邊線僅用來建立. Ch. engchi. i n U. 節點之間的連接關係，只針對邊線處理可確保較多原有資料之特性，第三節將介紹藉由邊線捆綁的技術研究來減少視覺混亂現象。. 2.1 社群網路視覺化近年來許多社群網站興起，例如 Facebook、Google+、Twitter、Plurk 等網站都是知名的社群網站因此有許多研究以虛擬社群的使用者為研究對象，針對虛擬社群的使用者行為分析並且視覺化，Google 針對 Google+提出了 Ripples 服務[1]， Ripples 提供使用者觀察文章訊息被分享的擴散情形，呈現方式為節點圖結合 circular treemap 的表示圖，此佈局除了有效率的利用空間，也能彰顯這篇文章上 4.

(15) 每位社群使用者造成的影響力範圍，觀察某些訊息只在直接的交友圈傳遞，有些訊息則透過意見領袖的分享擴散到不同領域的交友圈，如圖 2-1，透過 Google+ Ripples 可了解參與該文章的分享行為的使用者們的影響力，進而發掘其中重要的意見領袖；並且可搭配圖形下方的分享行為之時間軸，利用動畫的方式逐一呈現該篇文章成長的過程，依照文章分享的時間順序進行畫面更新，可幫助了解該篇文章分享的趨勢消長以及部分意見領袖在時序上的影響情形。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. i n U. v. 圖 2-1 Google+ Ripples，摘自[1]. Ch. engchi. Chien-Tung Ho 等人以微網誌噗浪(Plurk)為研究對象[2]，定義一套在微網誌上測量資訊傳播能力的方法，此測量方法可分為三個面向：吸引參與話題的人數、話題的傳播速度、地理範圍上的傳播程度，以這三個面向建立資訊傳播模型，呈現方式之一為 Plurpagation 的影響樹(如圖 2-2)，此影響樹以開源工具 Graph Gear 繪製，呈現中心使用者(不萊恩)與其追隨者之間的傳播關係，顯示中心使用者在此主題所造成的影響程度，除了影響樹的呈現，搭配 Google Map 標記出參與主題的社群使用者所在之地理位置，表示出該主題在地理範圍上的傳播程度，以及 5.

(16) 發掘該主題的傳播範圍：是僅限於國內還是全球性的主題，該研究提供一套測量微網誌上傳播能力的工具(Plurpagation)，呈現特定主題在微網誌上的傳播情形。. 立. 政治大. ‧. ‧ 國. 學. 圖 2-2 Plurpagation 的影響樹，摘自[2]. 2012 年 Nan Cao 等人提出 Whisper[3]，針對全球熱門社群網站推特(Twitter). sit. y. Nat. 的轉推訊息(retweet)的擴散行為做即時追蹤並且視覺化，Whisper 以向日葵散播. al. er. io. 種子的概念譬喻社群媒體訊息散播之情形，如圖 2-3。從 Twitter API 撈取資料，. v. n. 追蹤使用者感興趣的事件，以時間軸和地域性的角度呈現該事件的擴散情形，並. Ch. engchi. i n U. 且分析不同地區分享者對於該事件的情緒反應，以了解不同地區的人們對於該事件的看法。Whisper 也對視覺混亂情形做了處理，提出一套新的繪圖方式，基於來自電場的通量線(flux line)對鄰近的通量線會產生排斥，因此通量線不會相交，藉此解決視覺混亂現象，Whisper 提供一套結合地域性、時間性的社群網路活動視覺化，視覺佈局以資料的地域性為主軸，中心圓盤呈現各地區對特定主題的情緒視覺化，邊線則結合動畫的方式表示資料傳播的時間特性，表現出每一條轉推訊息傳遞的時間點，該研究以一張圖形呈現出資料的多種特性(社群使用者的情緒、地理資訊、時間資訊)。. 6.

(17) 圖 2-3 Whisper，摘自[3]. 政治大. 2014 年 Donghao Ren 等人提出 WeiboEvents[4]，如圖 2-4 微博視覺分析系. 立. 統各功能呈現，以分析微博(Weibo)上的事件為對象的視覺化分析系統（PKUVIS），. ‧ 國. 學. PKUVIS 中的視點圖是將每一條微博訊息轉換成節點，依據訊息轉發的關係建立連線，透過視點圖來表示特定事件在微博上轉發的過程，另外提供多種視覺化的. ‧. 模式(帆狀圖、樹狀圖和圓環圖)以及一些互動操作功能，以不同的層面檢視資料，. y. Nat. n. er. io. al. sit. 為一個功能完善的微博事件視覺化平台。. Ch. engchi. i n U. v. 圖 2-4 微博視覺分析系統各功能呈現，摘自[4]. 7.

(18) 2.2 圖形簡化當點線圖顯示大量節點以及節點間彼此相連的關係緊密，容易造成節點重疊、邊線大量互相交錯之現象，增加了點線圖的複雜程度，也就是視覺混亂（visual clutter），如圖 2-5 所示，兩圖皆以邊線呈現節點與節點間的關係，由於節點間的關係緊密，導致大量的邊線產生並且形成交錯，在圖形呈現太多資訊，不易解讀各個節點之間的關係以及主要的資料特徵，增加了使用者解讀圖形的困難。. 立. 政治大. ‧. ‧ 國. 學圖 2-5 視覺混亂現象，摘自[9]. sit. y. Nat. n. al. er. io. 為了解決這樣的問題，可以透過改變節點位置、減少節點和邊線的數量或是. i n U. v. 結合互動操作[5][6]的方式減緩視覺混亂，如圖 2-6 所示，Edge Plucking 提供一. Ch. engchi. 套互動工具，在不改變節點位置以及保留點線關係的情形下，藉由改變邊線的彎曲程度減少邊線重疊之情形，一般而言，為了維持原始資料的完整性，會盡量維持節點、邊線的數量。. 圖 2-6 模擬撥弦效果以及 EdgeLens 和 Edge Plucking 方法比較，摘自[6] 8.

(19) force-directed placement [7]是一種基於物理模擬的點線圖佈局演算法，如圖 2-7，該演算法模擬彈簧伸縮之效果，在圖的架構上加入吸引力和互斥力的要素，使每個節點間保持一定距離，透過該方法可在不減少資料點的情形下減少視覺混亂，然而有些原始資料的節點具有地理意義，改變節點位置時可能會喪失部分的資訊。. 政治大圖 2-7 Force-directed placement，摘自[7] 立. ‧ 國. 學. Flow map[8]針對具有方向性、地域性的資料提出一套佈局演算法，在盡量. ‧. 維持節點之間的相對位置下，對節點位置進行微調，以減少邊線交叉、重疊之現. y. Nat. 象，如圖 2-8，以及採用 Binary hierarchical clustering 方法，將具有相同目標且. er. io. sit. 鄰近的邊線進行合併，根據 Binary hierarchical clustering 所取得的空間資訊作 edge routing，edge routing 是藉由調整 route 的位置以避免邊線交錯之機制；也有. al. n. v i n 許多研究只針對邊線進行處理，即針對邊線進行綑綁以達到圖形簡化，本研究的 Ch engchi U 單一篇文章視覺化即採用邊線捆綁技術。. 圖 2-8 Flow map，摘自[8]. 9.

(20) 2.3 邊線捆綁本篇論文透過邊線來處理視覺混亂問題，邊線綑綁（edge bundling）是將點線圖中鄰近的邊線綑綁，在不減少節點和邊線數量的情況下，盡可能地減少邊線的交叉重疊情形，透過此方法可解決視覺混亂之問題外，同時保留住資料的細節資訊，也能將重要資料的特徵凸顯出來。 Hierarchical Edge Bundles(HEB)是邊線綑綁的經典演算法之一[9]，針對具有階層式關係的資料，將鄰近的邊線進行綑綁，資料的階層關係會影響綑綁程度，. 政治大顯父節點之間相鄰的關係。HEB 演算法只適用於具有階層化結構的圖，而 GBEB 立如圖 2-9，透過這樣的方式解決視覺混亂，除了顯示出父子節點直接關係，也凸. 提出一種可針對無階層結構的圖進行邊線綑綁的方法。. ‧. ‧ 國. 學 er. io. sit. y. Nat. al. n. v i n 圖 2-9 階層式邊線捆綁的不同綑綁程度，摘自[9] Ch engchi U Geometry-Based Edge Bundling（GBEB）是基於幾何的邊線綑綁[10]是第一個能對無特別結構的點線圖進行邊線綑綁的演算法，如圖 2-10；首先，針對點線圖產生一個均勻的輔助網格，計算出每個網格內每個邊線的平均向量：接著將位置相鄰且邊線向量方向一致的網格進行合併，透過這些合併後的網格可產生一個控制網格，控制網格和原本點線圖相交即為控制點，強迫和控制網格相交的邊線只能從控制點通過，藉此達到邊線綑綁的效果。. 10.

(21) 圖 2-10 基於幾何的邊線綑綁流程圖，摘自[10]. 由於 HEB 只能處理具有階層架構的資料才能進行綑綁，以及 GBEB 進行綑綁前需要先建立控制網格，Force-Directed Edge Bundling（FBEB）提出一種自組織(Self-Organization) 的邊線捆綁方法[11]，將邊線視為具有彈性的彈簧，邊線對. 政治大和 FDEB 演算法的計算量都非常大；GBEB 需要對圖產生一個複雜的輔助網格並立. 彼此存在吸引力，如圖 2-11，當兩條邊線達到一定條件則進行綑綁。然而，GBEB. ‧ 國. 學. 且將邊線分成多段，然後必須計算每個網格的平均方向，才能求出可作為綑綁引導的控制網格；而 FDEB 的複雜度更高，需要對全部邊線兩兩互相計算彼此彈簧. ‧. 引力，在針對大量的資料處理時得花費相當的時間。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 2-11 基於邊線兩種力引導之示意圖，摘自[11]. Multilevel agglomerative edge bundling 可解決對大量資料綑綁的效率問題 [12]，也允許處理無階層結構的點線圖，其綑綁演算法類似快速聚合分群技術，根據圖的節點位置建構出邊線的近似關係圖，以此對邊線之間的相似度進行建模，以階層式邊線聚合的方式進行綑綁，以邊線為基礎的覆蓋像素數作為衡量綑綁過 11.

(22) 程是否有效率的標準，能夠在數分鐘內捆綁百萬條邊線，如圖 2-12，此圖有 429760 條邊線。. 政治大. 圖 2-12 Multilevel agglomerative edge bundling 結果圖，摘自[12]. 立. ‧ 國. 學. 另一方面，GBEB 和 FDEB 演算法忽略了邊線的方向性、權重值以及圖的連貫性，Selassie 等人提出 Divided Edge Bundling[13]，以往的邊線捆綁技術只針對. ‧. 無向圖進行處理，此研究提出一種針對有向圖邊線捆綁方法，以類似於高速公路. sit. y. Nat. 分隔島的形式，如圖 2-1，將相同節點的邊線中不同方向的邊線分隔開來，並且. n. al. er. io. 賦予邊線權重值，保原有資料的方向性，以顯示出資料整體的流向。. Ch. engchi. i n U. v. 圖 2-13 Divided Edge Bundling 結果圖，摘自[13]. 12.

(23) 第三章研究方法與步驟. 在第三章，將介紹與本研究的方法與步驟，首先第一節介紹 Shareflow 的系統架構以及流程，第二節介紹臉書資料特性以及使用的資料撈取工具，接著將撈. 政治大章分享路徑視覺化採用的呈現方法以及佈局結果，第四節介紹粉絲專頁視覺化呈立取的資料進行整合以及分析，作為後續視覺化的輸入資料，第三節介紹單一篇文. ‧ 國. 學. 現方法，根據三種不同的目的，將粉絲專頁視覺化分成三個部分介紹，最後第五節介紹 Shareflow 所使用到的互動機制，以幫助使用者進行深度的資訊探索。. ‧. 3.1 系統架構. sit. y. Nat. al. er. io. 整個系統流程可分為三個部分，如圖 3-1，第一部分為收集資料，針對粉絲. v. n. 專頁的文章資料以及文章的細部分享、留言資料進行資料撈取，並且針對資料前. Ch. engchi. i n U. 處理，資料來源是從 Facebook Graph API 取得臉書之公開資料，系統使用 Node.js 進行臉書資料撈取、前後端溝通；接著根據分享行為之來源關係，將資料轉化為點線圖並給予階層化關係，建立分享關係圖之原型。第二、第三部分使用 D3.js 函式庫繪製圖形介面以及互動機制，其中第二部分為單一篇文章為視角，將在該篇貼文上進行分享的臉書使用者進行視覺化，以前處理後具有階層化的資料作為輸入資料，採用階層化邊線綑綁技術繪製圖形，以解決當分享人數過多時造成的視覺混亂問題，透過視覺化呈現該篇文章之分享路徑以及造成間接分享行為的意見領袖。第三部分為粉絲專頁的文章、積極分享者、積極留言者視覺化，以所有文章 13.

(24) 之細部資料作為輸入，蒐集多篇文章細部資料後進行資料整合，並且針對整合後資料進行分析，藉由分析找出粉絲專頁期間內具有積極活動的臉書使用者，接著以積極活動者為媒介，建立多篇文章之間的關係，圖形呈現方式採用 Rotating Cluster Layout[14]表示，顯示出粉絲專頁期間的所有文章、期間內的積極活躍者以及其相關文章，以利觀察粉絲專頁的文章趨勢以及積極活躍者所關心的議題偏好。. 立. 政治大. n. er. io. al. sit. y. ‧. ‧ 國. 學. Nat. 圖 3-1 Shareflow 系統架構圖. Ch. engchi. i n U. v. 3.2 資料撈取、整合與分析. 本研究主要動機是觀察社群使用者在社群網路上社群活動行為，鑒於臉書平台在臺灣的活躍度高，其中又以粉絲專頁易於聚集許多臉書使用者，比起以臉書使用者為視角可能牽涉個人隱私等問題，公開性質的粉絲專頁也較易群聚一定數量的粉絲，為後續的視覺化提供足夠數量的輸入資料，因此本研究以粉絲專頁為對象，撈取臉書使用者在粉絲專頁的文章上的互動行為為主，然而，撈取到的粉絲專頁的每篇文章各屬於獨立個體，尚未建立文章之間的關係連結，為了針對多篇文章的共同行為的臉書使用者進行比對，需要先將多篇文章進行整合，接著從 14.

(25) 整合後的資料進行分析，找出其中具有積極活動行為的臉書使用者，並且建立與其相關的階層關係，作為後續繪圖階段的輸入資料。. 3.2.1. 資料撈取. 本研究使用我們之前計畫實作的 Pagedata 工具，如圖 3-2，Pagedata 是一個針對臉書粉絲專頁撈取大量文章資訊之工具，前端提供一個介面讓使用者輸入粉絲專頁 ID 以及查詢期間等欄位，後端則是透過 Node.js 的 fbgraph 等套件進行資料撈取以及前後端的溝通，在取得使用者的授權後，使用者可透過該工具從. 政治大發佈的文章資料，以表格的形式呈現文章類型、文章建立時間、文章 ID、文章立 Facebook Graph API 撈取臉書資料，並且在 Pagedata 上呈現期間內該粉絲專頁所. 訊息、按讚次數、分享次數、留言次數。. ‧ 國. 學. 除了撈取以上的文章基本資訊外，系統還需要撈取每一篇文章的互動情形的. ‧. 細部資料，像是分享(sharedposts)、留言(comments)等欄位，透過 sharedposts 欄. y. Nat. 位可以得到該篇文章的分享資料，以及在 comment 欄位得到該文章的留言資料；. er. io. sit. 本研究定義分享該篇文章的臉書使用者稱為分享者，分享者的分享來源稱為意見領袖，每一筆的分享行為都會記錄著分享者的名稱、ID、分享時間以及意見領袖. al. n. v i n 的名稱、ID，透過該紀錄可得知每一次分享行為所參與的臉書使用者以及使用者 Ch engchi U 所扮演的角色(分享者、意見領袖)，將此分享關係轉換成點線圖之結構，將所有的分享者、意見領袖畫成節點，接著根據分享關係在節點間進行連線，此點線圖即為臉書文章分享行為的原型。已有許多研究以點線圖表示社群網路中社群使用者間的互動關係[1][2][4]，但是，點線圖只能顯示的關係程度有限，以分享行為的視覺化為例，點線圖能顯示出各節點之間的分享關係，但較無法顯示資料的階層特性，而階層式邊線捆綁技術[9]是根據資料的階層將邊線捆綁，最終的綑綁結果可顯示出資料的階層性；為了後續分享路徑視覺化所需的階層式資料，在撈取到臉書的分享資料後，接著 15.

(26) 需要將資料進行整合以及建立分享的階層化關係。. 政治大圖 3-2 Pagedata：臉書粉絲專頁文章撈取工具立. ‧ 國. 學. 3.2.2. 資料整合與分析. ‧. Pagedata 採用傳統表格的方式呈現粉絲專頁文章資料，在圖形表現上較為單. sit. y. Nat. 調，除了以單一篇文章作視覺化，本研究進一步以粉絲專頁的多篇文章視覺化為. al. er. io. 方向，根據資料對象的不同分為粉絲專頁文章、積極分享者、積極留言者視覺化，. v. n. 所需要的資料有別於先前只有以單一文章為對象，該研究需要收集期間內粉絲專. Ch. engchi. i n U. 頁的多篇文章資料，其撈取方式如圖 3-2，在使用者提交粉絲專頁 ID 以及查詢區間後，Pagedata 會自動批次撈取這期間內該粉絲專頁的多篇文章，但是，由於 Graph API 有撈取資料的速率限制，即防範使用者短時間內大量撈取資料之機制，同一個存取權限和 IP 在 60 分鐘內只能進行 200 次的 API call[15]，為了避免撈取過程被中斷，每撈取一篇文章則等候 30 秒才繼續撈取下一篇文章，當多篇文章撈取完畢後，接著進行資料的整合，以一篇粉絲專頁文章為單位，將所撈取的多篇粉絲專頁文章彙整成一個 json 格式的檔案，此檔案即可做為粉絲專頁文章的視覺化之輸入資料。. 16.

(27) 圖 3-3 資料整合流程(以積極分享者視覺化為例). 政治大由於粉絲專頁視覺化還需要呈現積極分享者以及積極留言者的資料，因此下立. 一步是針對彙整後的檔案進行分析，分別計算其臉書使用者的分享、留言次數，. ‧ 國. 學. 根據累積行為次數取前百分之一做為門檻，累積活動次數超過門檻的臉書使用者. ‧. 即為積極活動者，接著依照積極活動者的活動次數做排序，建立積極活動者與其. y. Nat. 互動的文章之間的關係，其合併格式如樹狀階層之架構，分為三個階層，如圖 3-4，. er. io. sit. 第一階層為粉絲專頁，第二階層為積極活動者作為第一階層的 children，最後第三階層是積極活動者參與的文章資料，亦作為第二階層的積極活動者的 children，. al. n. v i n 根據此架構彙整成一個新的輸入檔案，最後整合出一個可供粉絲專頁視覺化使用 Ch engchi U 的輸入資料。. 圖 3-4 資料合併之階層關係架構圖. 17.

(28) 3.3 階層化邊線捆綁本研究將視覺化方法分成兩部分，分別是單一篇文章分享路徑視覺化(單一篇文章)以及粉絲專頁視覺化(粉絲專頁、積極分享者、積極留言者)，本節針對單一篇文章分享路徑視覺化做介紹，首先，我們可藉由收集臉書文章的每次分享行為的資料，根據分享者與意見領袖的關係建立一條分享傳播路徑，如果可建立不只一條的傳播路徑，則表示該文章存在間接分享行為；分享關係也表示資料的階層關係，因此適合採用階層化邊線捆綁方法[9]，將相鄰的邊線捆綁，以解決當. 政治大本節介紹階層化邊線綑綁技術[9]的原理，以原有的樹狀結構為基礎，根據立. 資料量過大時，所造成的視覺混亂問題。. 階層化的樹狀輸入資料進行鄰近邊線綑綁，藉由某兩節點階層上的相鄰關係，沿. ‧ 國. 學. 途所經過之路徑即為仿樣曲線(Spline curves)的 control polygon，如圖 3-5 的(b). ‧. 圖中沿著階層架構的紅色路徑，假設 P0 和 P4 有關係存在，在 P0 和 P4 之間連接. y. Nat. 一條直線，以 P0 為起點延伸到 P4 為止，接著該直線對應於階層樹狀架構上，根. er. io. sit. 據此兩節點各自向上尋找最小共同祖先的路徑，此路徑所經過的節點即為控制點，此例的控制點從起點開始依序為 P0、P1、P2、P3、P4，最小共同祖先控制點為 P2，. al. n. v i n 期間經過的控制點整合起來即為 polygon 會影響此兩個 C hcontrol polygon，control engchi U 節點相連的仿樣曲線的曲率，最後的仿樣曲線即為視覺化呈現之邊線。. 圖 3-5 利用階層關係將鄰近邊線綑綁，參考自[9]. 18.

(29) 繪圖的仿樣模型(Spline Model)採用 cubic B-spline，比起 Bezier 曲線，cubic B-spline 有局部控制(Local Control)的效果，局部控制即是適合針對曲線的局部進行修改，而不會影響到曲線的其他部分，並且計算複雜度較低。階層式邊線捆綁方法提供兩種方式來調整仿樣曲線，第一種是透過階層樹狀結構上經過的控制點𝑃𝑖 來控制 control polygon，如圖 3-5，調整後的控制點𝑃𝑖′ 如下：. 𝑖. 𝑃𝑖′ = 𝛽 ∙ 𝑃𝑖 + (1 − 𝛽) (𝑃0 + 𝑁−1 (𝑃𝑁−1 − 𝑃0 )). (1). 政治大 𝑁表示控制點的數量， 𝑖表示每個控制點之索引值，𝛽表示綑綁強度，𝛽 ∈ [0,1]，立. ‧ 國. 學. 使用者可透過𝛽值決定控制點對 control polygon 的修改程度，此 control polygon 即產生新的仿樣曲線。. ‧. 第二種方法為針對新生成的曲線中每個仿樣點(Spline point, 𝑆(𝑡))作調整，調. al. n. 𝑆 ′ (𝑡) = 𝛽 ∙ 𝑆(𝑡) + (1 − 𝛽)(𝑃0 + 𝑡(𝑃𝑁−1 − 𝑃0 )). Ch. engchi U. er. io. sit. y. Nat. 整後的仿樣點𝑆 ′ (𝑡)如下：. v ni. (2). 𝑡是仿樣曲線參數，𝑡 ∈ [0,1]，可透過𝑡值決定仿樣點對仿樣曲線的影響程度多寡，階層式邊線捆綁以上述兩種方式來調整仿樣曲線，進而影響邊線捆綁之佈局結果，其中，𝛽值越高則表示綑綁程度越強，如圖 3-6 所示，另一方面，本研究後續的單一篇文章分享路徑視覺化中的𝛽值皆為 0.7。. 19.

(30) 學. ‧ 國. 立. 政治大. 圖 3-6 最終綑綁程度差異. ‧ sit. y. Nat. 3.4 單一篇文章分享路徑視覺化. n. al. er. io. 整體佈局以圓形的點線圖為主，節點表示參與這篇文章分享行為的臉書使用. i n U. v. 者，邊線表示臉書使用者之間的直接分享關係，將使用者節點平均放置在圓形外. Ch. engchi. 圍的輪廓上，以圓形的正上方為起點，順時針方向的填入使用者節點。基於階層式綑綁的原則，會依照不同的意見領袖來進行分類為主，會優先將同一類的使用者節點一起填入圓環，如圖 3-7 所示，直接從懶人時報進行分享的使用者節點會優先顯示，依序顯示不同群的使用者節點；同一群內的使用者節點則依照其分享時間作順時針排序，類似時間的隱喻，透過順時針的先後順序可了解同一群內的臉書使用者分享的優先順序。該佈局下，圓環上的使用者節點不是全部依照分享者分享文章的時間點順序進行排序，而是先根據分群結果排序，原因是該佈局以階層為導向進行邊線捆綁，如果改以分享文章的時間點排序，則會使綑綁方法難 20.

(31) 以依照資料原有的階層特性進行綑綁。與樹狀結構相比，樹狀結構呈現眾多子節點時，容易受限於畫面篇幅大小，使部分的子節點無法一併顯示，採用圓環的方式的優點在於能有效率的利用畫面空間，能在同一畫面呈現全部子節點，較不受畫面的大小影響，能讓使用者一覽整個圖形的樣貌。. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. 圖 3-7 單一篇文章分享路徑視覺化(局部邊線綑綁). n. al. Ch. engchi. i n U. v. 針對階層化邊線捆綁方法，輸入資料必須是具有階層化的 json 檔案，針對文章的分享關係資料進行前處理，在每位分享者的名稱前附加意見領袖的名稱，例如"意見領袖.分享者"的格式，將分享者和意見領袖的使用者們定義成節點，由於經過前處理的緣故，可以藉由節點名稱得知該節點的源頭，根據意見領袖的不同進行分類，透過分類的方式，可使相同意見領袖的分享者群聚在一起，有助於呈現每位意見領袖的影響力多寡，並且根據其分類進行節點、邊線著色，強調出不同意見領袖的分享路徑，最後透過該階層關係以利於後續的階層化邊線綑綁。圖 3-8 顯示了輸入資料的階層化與無階層化的差異比較，(a)圖的輸入資料 21.

(32) 僅有分享者與意見領袖的關係，尚未進行上述之格式轉換，因此資料無階層化的特性，無法根據其分類進行階層化邊線捆綁；(b)圖的輸入資料為階層化的分類資料，每條分享行為根據其意見領袖進行分類，藉由其分類階層關係產生對應的控制點，進而進行階層化邊線捆綁，與(a)圖相比，(b)圖的視覺效果明顯較為簡潔，明確顯示主要的線段的流向、各個意見領袖所屬的節點分佈，最後邊線交錯之情形也較為稀少。. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. 圖 3-8 階層化資料之差異：(a)無階層化資料 (b)階層化資料. 此外，通常大部分使用者的分享行為皆來自文章的原創者，也就表示臉書使. al. n. v i n 用者是直接從粉絲專頁進行分享，導致分享路徑的階層只有一層，表示缺乏間接 Ch engchi U. 分享行為，如圖 3-9，可觀察出該篇文章的分享者全部都是從懶人時報這個原創者直接分享文章，在右方的百分比軸也顯示單一分享來源的結果，皆顯示該篇文章的傳播過程只有懶人時報造成後續的訊息擴散，目前所撈取到的案例的分享路徑只有一層，初步推測和臉書使用者習慣於直接從原創者進行分享有關，另一方面，考量臉書個人使用者的隱私權限未公開以及臉書改版機制等因素，個人資料不再容易取得，使目前撈取的分享路徑資料受限。. 22.

(33) 立. 政治大. 圖 3-9 大部分文章的分享路徑情形. ‧ 國. 學 ‧. 為加強直接分享行為與間接分享行為之間的差異，賦予每位意見領袖不同顏. y. Nat. 色，接著根據其意見領袖之分類關係以不同的顏色繪製邊線，如圖 3-10 所示，. er. io. sit. 使用者可藉由顏色直觀地看出該篇文章是否存在間接分享行為，也較易看出意見領袖的數量，此例中的意見領袖有四位（分別是懶人時報、反黑箱服貿協議、經. al. n. v i n 濟民主連合以及我反服貿、全臺聲援大串聯），透過著色邊線的輔助，強調不同 Ch engchi U. 分群間的臉書使用者之差異，此外也在圖的右方顯示分享來源百分比軸，每次分享行為根據不同的意見領袖分類，此軸顯示意見領袖在整體分享數量上所佔的比例程度，透過百分比軸助於發掘文章中較具有影響力的意見領袖。透過顏色可強調出意見領袖的重要性，但是圖形還沒能表現出資料的方向性，基於意見領袖可透過其他要素顯示(節點名稱、意見領袖百分比軸)，本研究將以賦予圖形的方向性為目標，藉由線段的顏色來表示出分享路徑的先後順序。. 23.

(34) 立. 政治大. 圖 3-10 單一篇臉書文章分享情形圖以及意見領袖百分比軸. ‧ 國. 學 ‧. 資訊擴散是經由不同的角色分享而向外擴散，因此分享是具有方向性的，我. y. Nat. 們希望能在圖中表現出資訊傳散的方向性，透過該圖可了解臉書文章分享過程中. er. io. sit. 傳散的優先次序。然而，原有的階層化邊線綑綁方法缺乏方向性的特性，無法從圖形辨別出資料的源頭以及結尾；本研究以線條寬度和線條顏色表現資料的方向. al. n. v i n 3-11，以線段的寬度由寬至窄顯示其單一個意見領袖內的分享關係， Ch engchi U. 性，如圖. 寬的一端表示意見領袖，窄的一端表示其追隨者；根據分享深度的不同，線段顏. 色由白色漸層至深藍色，例如在此例中，懶人時報為第一層，線段顏色以白色顯示，並且以橘色箭頭輔助提示其原創者的角色，經濟民主連合、反黑箱服貿協議都屬於第二層，因此皆以淡藍色顯示，我們可透過顏色的漸層來看該圖的發展順序，以及在這過程中重要意見領袖的參與順序為何。. 24.

(35) 立. 政治大. ‧ 國. 學. 圖 3-11 具有方向性的單一篇臉書文章分享情形圖. ‧ sit. y. Nat. 3.5 粉絲專頁視覺化. n. al. er. io. 除了針對單一篇文章的分享行為進行視覺化，我們希望能進一步處理更大層. i n U. v. 面的資料，將實驗對象設為粉絲專頁一定期間內的多篇文章，最終呈現出該粉絲. Ch. engchi. 專頁期間內的所有文章以及在這些文章中活躍的臉書使用者群，使用經過整合、分析過的階層化檔案作為圖形的輸入資料，根據其階層關係以 Rotating Cluster Layout[14]的佈局呈現，如圖 3-12 所示，(a)圖為粉絲專頁視覺化，以單一天數作為區分，其階層分為三層：依序為粉絲專頁、日期、當天所發佈的文章，目的是呈現期間內粉絲專頁所發佈的所有文章，(b)圖則為積極活動者視覺化，以積極活動者作為區分，其階層分為三層：依序為粉絲專頁、積極活動者、積極活動者相關之文章，本研究主要針對臉書文章活動行為中的分享行為以及留言行為作討論，圖 3-12 的積極活動者是以分享行為為例，此佈局為粉絲專頁視覺化初 25.

(36) 步的原型。. 政治大圖立 3-12 粉絲專頁視覺化階層示意圖. ‧ 國. 學. 依照 Rotating Cluster Layout 的原型，每個階層之間都會有邊線相連，以表示. ‧. 其相關資料之關聯性，然而，本研究在階層的定義上是不一致的，如積極活動者. sit. y. Nat. 與所參與活動的文章，兩者間的關係是屬於直接的關係連結，此關係從原始資料. al. er. io. 即可取得，而粉絲專頁和積極活動者之間兩者又屬於不同層級的對象，積極活動. v. n. 者是透過分析後所篩選出來的對象，該對象和粉絲專頁之間不存在直接的關係連. Ch. engchi. i n U. 結，因此若在圖上皆以邊線相連，容易造成解讀圖形上的歧異，因此取消在關係較為薄弱的粉絲專頁和積極活動者之間的邊線。粉絲專頁視覺化所要呈現的對象有三個，根據三個不同目的分為三個部分，在圖 3-13 左上角三個圖示依序表示粉絲專頁文章、積極分享者和積極留言者的視覺化，使用者可點選圖示切換圖形模式，所選圖示以橘色表示，此圖例目前的模式為粉絲專頁文章模式。首先，介紹粉絲專頁文章的視覺化，其目的是呈現粉絲專頁期間內的所有文章資料，將文章依照其發佈文章的時間天數進行分類，以單一天數為單位將文章歸類，如圖 3-13 所示，將此分類根據天數作順時針排序，而每個天數中的文章也依照建立時間之先後順序作排序，簡言之，以圓環中心的 26.

(37) 12 點鐘位置為起點，依照順時針方向所經過之文章皆符合文章發佈時間的先後順序，已呈現出資料的時序性。. 立. 政治大. ‧. ‧ 國. 學. 圖 3-13 粉絲專頁視覺化，依照文章的建立時間進行分類。. sit. y. Nat. al. er. io. 除了在圖形上呈現文章發佈時間的趨勢，顯示文章的分享次數、文章類型也. v. n. 有助於呈現粉絲專頁的特性，在節點上顯示文章的基本資訊，像是節點的半徑是. Ch. engchi. i n U. 依照該篇文章所獲得的分享數增加，藉此觀察該粉絲專頁期間內各篇文章的發展情形，幫助使用者發掘粉絲專頁期間內的熱門文章，而節點顏色則表示文章的類型，為臉書所規定的文章型別，分別是連結（Link）、照片（Photo）、近況更新（Status）、影片（Video）以及其他，其他包含 event、offer 等較為少見的類型，故歸類於其他，圖 3-13 左下角的圖示依序表示文章類型的切換，提供顯示單一文章類型的模式，透過節點顏色可了解該粉絲專頁偏好於發佈的文章類型，以及發現哪種文章類型較容易受到臉書使用者的關注以及活動。本研究目的之一是單一文章的分享路徑視覺化，在觀察社群訊息的擴散行為中，間接分享行為是主要的觀察對象，藉由間接分享行為進一步發掘意見領袖， 27.

(38) 因此間接分享行為對於本研究是值得關注的指標，為了加強該指標，在粉絲專頁視覺化上針對具有間接分享行為的文章節點予以提示，提示方式為含有白色框線的節點表示該篇文章存在間接分享關係，如圖 3-13 所示，期間內有四個白色框線節點存在間接分享關係，使用者點選該節點後即可呈現該文章的分享情形圖，如圖 3-10，透過該提示可幫助使用者易於發掘具有間接分享關係的文章，進一步針對該文章進行更深層的分享路徑探索。粉絲專頁文章模式主要目的是呈現期間內粉絲專頁的全部文章，並且根據時間天數分類，將期間內的文章皆依照順時針方向排序，呈現一個譬喻於時鐘的概. 政治大與的粉絲專頁文章，使部分沒有積極活動者參與的文章就不會顯示出來，因此提立念；由於其他模式下的文章由於是以積極活動者為媒介，只呈現積極活動者所參. 出該模式以觀察粉絲專頁的文章整體樣貌。. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3-14 積極分享者分享情形圖。. 粉絲專頁視覺化的第二個主要目的為顯示積極分享者以及其分享的文章，本研究以在多篇文章間活動的臉書使用者為媒介，建立起多篇文章間的關聯性，然 28.

(39) 而，熱門粉絲專頁文章的活動(分享、留言)規模往往相當大，在呈現的佈局上，為了考量畫面空間以及關注社群活動積極活躍的特定族群，本研究以積極分享者為媒介，積極分享者是指查詢的粉絲專頁在期間內分享次數最頻繁的臉書使用者，其篩選的方式為：期間內對粉絲專頁文章進行分享行為的臉書使用者中，記錄每位臉書使用者在期間內所分享的粉絲專頁文章以及分享次數，以每個參與分享的臉書使用者為單位，針對其分享次數進行累加，最後在所有參與分享的臉書使用者中，根據其分享次數取前百分之一作為閾值，將分享次數超過閾值的臉書使用者作為積積分享者，如圖 3-14，該圖形的佈局為在圓環正中心顯示了目前所查. 政治大分享者，沿著線段延展到圓環外圍的節點，表示該積極分享者所分享的文章來立詢的粉絲專頁對象懶人時報，處於圓環中間位置的文字則分別代表了不同的積極. 源。. ‧ 國. 學. 關於積極分享者的佈局呈現，根據收集的粉絲專頁的文章的分享細部資料，. ‧. 計算分享次數特別突出的臉書使用者，以圓環正上方為起點，根據其分享次數依. y. Nat. 照順時針排序。另一方面，為了凸顯積極分享者中的分享次數層級，依照全部積. er. io. sit. 極分享者數量取四分位數進行分類，將積極分享者分成三類：第一類為分享次數前 25%的積極分享者(Q1)，第二類為分享次數前 25%~50%的積極分享者(Q2)以. al. n. v i n 及第三類為 50%~100%的積極分享者(Q3+Q4)，依序以橘色、淡藍色以及白色顯 Ch engchi U 示出分類差異，如圖 3-14 中，橘色的臉書使用者是積極活躍者中最為頻繁活動的一群，而淡藍色的臉書使用者的活躍程度僅次於橘色，透過此圖發掘該段期間內在粉絲專頁上分享行為活躍的使用者，以及透過提示框的互動機制了解這些積極分享者所分享的文章議題偏好程度。在積極分享者的模式下，圓環外圍的文章來源指的是粉絲專頁所發佈的文章，而非積極分享者分享後的文章，原因是 Graph API 不提供臉書使用者分享的文章，詳細部分見第四節說明，另一方面，基於此模式下目的是關注於臉書使用者的分享行為，因此節點半徑取自該文章的分享次數，以呈現積極分享者所分享的文章 29.

(40) 的熱門程度。. 學. 圖 3-15 積極留言者留言情形圖。. ‧. ‧ 國. 立. 政治大. sit. y. Nat. 第三個目的是顯示查詢的粉絲專頁在期間內留言次數最頻繁的臉書使用者，. al. er. io. 和採用積極分享者的理由一樣，收集期間內在粉絲專頁的每篇文章上的留言，若. v. n. 要全部呈現所有曾經留言過的臉書使用者，則會有空間版面設計問題以及無法彰. Ch. engchi. i n U. 顯其中的資料特徵，因此從中挑選特定臉書使用者進行研究，積極留言者篩選的比例為：期間內在粉絲專頁的文章上進行留言行為的臉書使用者中，以臉書使用者為單位計算其留言次數，接著根據其留言次數取前百分之一做為積極留言者，如圖 3-15，根據收集的粉絲專頁的文章的留言資料，計算留言次數特別頻繁的臉書使用者，基於資料階層的相似，呈現方式大致與積極分享者分享情形圖一致，兩者差異點在於外部圓環的文章節點的意義不同，積極留言者的外部節點文章取自於積極留言者在粉絲專頁文章上所留下的評論，由於臉書使用者是在公開粉絲專頁的貼文上進行留言，故該留言屬於公開性質的資料，我們可以在 Graph API 上取得留言資料，因此文章節點以積極留言者對該文章的留言為對象，而節點半 30.

(41) 徑取自這些留言的按讚數，以呈現積極留言者的留言受關注之程度，透過此圖可發掘該段期間內在粉絲專頁上留言行為活躍的使用者。此視覺化幫助使用者發掘期間內在粉絲專頁文章上積極留言的臉書使用者，但還沒有顯示出留言本身的資訊，本研究採用互動機制，藉由滑鼠在圖形上的互動，顯示出積極留言者所留言的詳細文字訊息，以及顯示特定積極留言者期間內的所有留言集合，接下來在第五節將會介紹互動機制部分。. 3.6 互動機制. 政治大持圖形的佈局，將粉絲專頁文章以及積極活動者詳細的文字訊息隱藏，改以互動立. 本研究以粉絲專頁文章為研究對象，因此原有資料存在不少文字訊息，為維. 機制的方式顯示，首先是粉絲專頁視覺化與單一篇文章分享路徑視覺化的整合，. ‧ 國. 學. 以粉絲專頁視覺化外圍的文章節點為媒介，當使用者選擇某個文章節點，則顯示. ‧. 對應文章的分享路徑視覺圖，如圖 3-16 所示，左圖圓環上的橘色節點代表目前. y. Nat. 使用者所選擇之文章節點，右圖即顯示該篇文章的分享路徑視覺化，另一方面，. er. io. sit. 當使用者選擇某個文章節點，使左圖圓環同時出現兩個以上的橘色節點時，則表示該篇文章被不只一位的積極活動者分享或留言，透過該方式可觀察出該篇文章. n. al. Ch. 是否存在共同的積極活動者進行參與。. engchi. 31. i n U. v.

(42) 政治大. 圖 3-16 粉絲專頁視覺化以及單一篇文章分享路徑視覺化. 立. 在粉絲專頁視覺化以及單一篇文章分享路徑視覺化各自提供互動機制讓使. ‧ 國. 學. 用者針對每篇文章、臉書使用者進行探索或是過濾資訊，如圖 3-17、圖 3-18。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3-17 在提示框上顯示該文章的基本訊息。. 在粉絲專頁視覺化上的每個文章節點皆存在詳細的文章訊息，基於版面限制考量，以提示框的方式呈現詳細訊息，選取外圍文章節點即顯示該粉絲專頁文章的基本訊息，如圖 3-17，藉此了解每個文章節點的實質意義，幫助使用者探討 32.

(43) 熱門文章、積極活動者所關注的文章議題。圖 3-18 為單一篇文章路徑視覺化的互動機制，使用者可針對外圍的使用者節點進行互動，以反黑箱服貿協議的臉書使用者為例，單一篇文章路徑視覺化會以顏色強調和反黑箱服貿協議相關的分享關係特徵，並且降低和反黑箱服貿協議無關的分享路徑之特徵，選擇的使用者名稱以橘色顯示(反黑箱服貿協議)，反黑. 箱服貿協議的分享來源對象以赤紅色表示(懶人時報)，藍綠色則表示反黑箱服貿協議分享後的後續擴散對象，透過此互動機制幫助使用者解讀每一條分享路徑過程，以特定臉書使用者的視角觀看此圖，進一步發掘該臉書使用者在分享過程中所扮演的角色。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 3-18 單一篇文章分享路徑視覺化之互動機制. 在積極分享者、積極留言者模式下，選擇使用者的名稱則會顯示不同的訊息集合，選擇積極分享者名稱會顯示分享的粉絲專頁文章的文章訊息，而積極留言者名稱會顯示粉絲專頁不同文章上的留言，如圖 3-19 所示，可透過提示框觀察. 臉書使用者 K 在懶人時報的文章上的所有留言(基於保護個人隱私，此圖經過修改：隱藏使用者名稱並改以使用者代號稱之)，我們可藉由這些訊息快速了解特 33.

(44) 定的積極分享者對於議題文章的偏好以及反應。. 圖 3-19 積極留言者針對粉絲專頁文章之留言. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 34. i n U. v.

(45) 第四章實驗結果與討論. 4.1 實作與實驗環境. 立. 政治大. 我們目前使用的語言以 Javascript 為主，並且使用 D3.js 繪製圖形架構，D3.js. ‧ 國. 學. 是一套 Javascript 函式庫，提供多種視覺化相關的輔助函式。在實驗環境上，作. ‧. 業系統為 Window 7 64 位元作業系統，使用的機器之 CPU 為 Intel(R) Core(TM) i5. y. sit. io. al. n. 4.2 個案研究. er. 670。. Nat. -4430 CPU@ 3.00GHz，記憶體大小為 16.00GB，顯示卡為 NVIDIA GeForce GTX. Ch. engchi. i n U. v. 在此節將針對國內外的事件在臉書粉絲專頁的文章上的互動進行探討，我們以國內和國外粉絲專頁作個別討論，大致分成兩小節，首先以觀察單一粉絲專頁為例，以懶人時報為研究對象，觀察懶人時報發佈的文章以及探索在懶人時報上活動的臉書使用者，接著將探索的層面提升到多篇粉絲專頁的比較，我們觀察單一事件在不同粉絲專頁上的比較，我們針對 2015 年 11 月巴黎恐怖攻擊襲擊事件進行研究，以國外知名媒體的官方粉絲專頁為例，依序為 CNN、BBC、路透社、. 華爾街日報以及法新社，觀察不同粉絲專頁的積極活動者所關心的事件議題，透過這些案例說明 Shareflow 能發掘值得關注的活動者以及相關粉絲專頁文章。 35.

(46) 4.2.1. 單一粉絲專頁觀察(以懶人時報為例). 圖 4-1 顯示了懶人時報從 2015 年 8 月 1 日到 2015 年 9 月 15 日的發佈文章分享情形，總共有 973 位臉書使用者參與分享行為，積極分享者有 13 位，477 位臉書使用者參與留言，積極留言者有 5 位；其中，左圖是以懶人時報粉絲專頁的角度呈現這期間在懶人時報上較為活躍的積極分享者以及其所發佈的相關文章，中間階層的使用者即為篩選出來的積極分享者，透過左圖可發掘分享次數頻繁的臉書使用者，並且透過具有白色框線的文章節點發掘具有間接分享行為的文章。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-1 Shareflow：多篇文章的分享行為視覺化。. 在圖 4-1 中，即選擇了其中一篇文章作深度的分享路徑探索(橘色節點)，該篇文章的分享路徑視覺化如圖 4-1 中的右圖，透過邊線捆綁的佈局以及顏色的分類，可觀察出在該篇文章的分享擴散過程中，有造成後續分享行為的臉書使用者有四位，分別是懶人時報、反黑箱服貿協議、經濟民主連合以及我反服貿、全臺. 聲援大串聯，其中又以懶人時報和反黑箱服貿協議兩個臉書使用者在這篇文章的 36.

(47) 分享傳播過程中佔了八成以上的分享比率。. 政治大圖 4-2 立具有間接分享行為的文章的基本訊息. ‧ 國. 學. 回到積極分享者視覺化觀察上述的文章節點，則看見該粉絲專頁文章的基本. ‧. 訊息，如圖 4-2 所示，我們可透過文章的標題以及文字訊息了解該文章的主題與. sit. y. Nat. 太陽花學運相關，配合圖 4-1 右圖的分享路徑探索結果得知，促使該篇文章的分. er. io. 享擴散的粉絲專頁大多與服貿議題相關(反黑箱服貿協議和我反服貿、全臺聲援. n. 大串聯)，進而探討太陽花學運與服貿議題之間的關聯性。 a v. i l C n hengchi U 另一方面，系統提供臉書粉絲專頁上有興趣的文章進行探索，我們也可以針. 對這期間內分享積極的臉書使用者作觀察，除了根據圖形的點線關係了解該臉書使用者分享了那些文章，可以透過點選臉書使用者名稱的方式，顯示該使用者所分享的粉絲專頁文章的標題一覽，如圖 4-3 所示，臉書使用者 C 傾向於分享中國天津氣爆事件的相關文章，而使用者 L 則傾向於分享臺灣財經、產業相關的新聞文章，我們可透過這些訊息快速了解積極分享者分享的文章議題，進而探討積極分享者對於特定議題文章的偏好程度。. 37.

(48) 政治大圖 4-3立不同使用者所分享的文章標題集合. ‧ 國. 學. 單一事件觀察(以 2015 年 11 月巴黎襲擊事件為例). ‧. 4.2.2. sit. y. Nat. 我們以 2015 年 11 月巴黎恐怖攻擊襲擊事件作為案例，呈現 Shareflow 可從. al. er. io. 中發掘到的粉絲專頁的文章留言資訊，該事件發生於 2015 年 11 月 13 日，我們. v. n. 抓取日期設定為 13 日到 16 日之間，其中因為 CNN 以及 BBC 每天發佈的文章數. Ch. engchi. i n U. 量龐大，即使只取整體資料中的百分之一的資料顯示，目前的圖形仍然無法容納，因此 CNN 以及 BCC 的抓取資料日期改為 13 日到 15 日之間；我們針對該期間國外知名媒體粉絲專頁的文章上的留言訊息作討論，如圖 4-4 所示，以五個國外媒體粉絲專頁為觀察對象，由左而右依序是 CNN、BBC News(BBC)、Reuters(路透. 社)、The Wall Street Journal (華爾街日報)以及 Agence France Presse (法新社)，在積極者留言情形圖下方為該研究對象的名稱、抓取的時間區間、期間內在粉絲專頁上留言的臉書使用者總數以及積極留言者數量，我們可以透過圖形的整體樣貌粗估該粉絲專頁的規模、影響力，像是在這五個粉絲專頁中，CNN 和 BCC 的積極留言者數量明顯大於其他三個粉絲專頁，進而推斷出該粉絲專頁的粉絲在社群 38.

(49) 平台上的活躍程度。. 立. 政治大. ‧. ‧ 國. 學 er. io. sit. y. Nat. al. n. v i n 圖 4-4 國外媒體粉絲專頁中的積極留言者 Ch engchi U. 圖 4-5 表示 CNN 在 2015 年 11 月 13 日到 11 月 15 日期間留言次數最高的前三名的臉書使用者的留言，基於篇幅考量，只擷取積極留言者其中 20 筆的留言比較，留言次數第一名的使用者 A 期間的 59 則留言內容一致，屬於洗留言的現象，較無法從中發掘該使用者的議題偏好，使用者 B 的留言議題偏向國際議題，如出現 Kurds(庫爾德族)、Syrian(敘利亞)、Putin(普丁)等關鍵字，其中有部分留言(第三、第四則)提及 ISIS、France 等字眼，表示該使用者對巴黎恐怖攻擊事件的關注，最後使用者 C 的留言多次提及 Trump(2016 年的美國總統選舉的共和黨 39.

(50) 初選候選人)、Democrats(民主黨派人士)等字眼，顯示出使用者 C 傾向於關注美國總統大選的議題。. 立. 政治大. ‧ 國. 學. 圖 4-5 CNN 在期間內的前三名積極留言者的部分留言. ‧ y. Nat. sit. 圖 4-6 表示路特社(Reuters)在 2015 年 11 月 13 日到 11 月 16 日期間留言次. n. al. er. io. 數最高的前三名的臉書使用者的留言，該三位積極留言者的留言大多是針對巴黎. i n U. v. 恐怖攻擊襲擊事件有關，例如使用者 D 的留言訊息多次提及 Mosque (清真寺)以. Ch. engchi. 及 terrorism (恐怖主義)的關鍵字，使用者 F 的留言也多次提及 terrorism、ISIS、 Muslim(穆斯林)，而使用者 E 的留言實際上也是針對巴黎襲擊事件為主，如圖 4-6 紅框所示，部分留言被刪減，因此在該提示框無法看見完整的留言訊息，解讀該使用者所要傳達的訊息。需搭配文章節點上的提示框才能顯示完整的文章、留言訊息，如圖 4-7，顯示出使用者 E 在巴黎襲擊事件相關文章上的留言，以及其留言本身也是和該事件議題有關聯，透過提示框的訊息觀察積極留言者的留言趨勢，以幫助了解積極留言者對粉絲專頁文章的議題偏好。. 40.

(51) 政治大. 圖 4-6 路透社在期間內的前三名積極留言者的留言. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-7 積極留言者在粉絲專頁上的留言情形. 圖 4-8 表示 BBC 在 2015 年 11 月 13 日到 11 月 15 日期間留言次數最高的前三名的臉書使用者的留言，該三位積極留言者的留言大多是針對巴黎恐怖攻擊襲擊事件有關，例如使用者 G 和使用者 I 的部分留言訊息提及到 terroristes (恐怖份. 41.

(52) 子)、巴黎以及敘利亞，而使用者 H 的留言皆為空白，推測該臉書使用者習慣使用貼圖代替留言，因此無法顯示出該使用者的留言訊息。. 立. 政治大. ‧. ‧ 國. 學. 圖 4-8 BBC 在期間內的前三名積極留言者的留言. y. Nat. er. io. sit. 圖 4-8 表示 BBC 在 2015 年 11 月 13 日到 11 月 15 日期間留言次數最高的前三名的臉書使用者的留言，其中使用者 G 和使用者 I 的部分留言訊息提及到. al. n. v i n terroristes (恐怖份子)、巴黎以及敘利亞，其留言內容較貼近巴黎恐怖攻擊事件， Ch engchi U 而使用者 H 的留言皆為空白，推測該臉書使用者習慣使用貼圖代替留言，因此無法顯示出該使用者的留言訊息。最後是圖 4-9 和圖 4-10 分別表示華爾街日報以及法新社在 2015 年 11 月 13 日到 11 月 16 日期間留言次數最高的前三名的臉書使用者的留言，在華爾街日報上的三位積極留言者的留言多次提到巴黎恐怖攻擊襲擊事件相關，像是 ISIS、 France 以及 terrorism 等關鍵字，而法新社較為特別的案例，其前三位的積極留言者皆是重複性的留言，三位留言者在不同的文章上留下完全一致的留言，而其中只有使用者 N 的留言較和巴黎恐怖攻擊事件相關。 42.

(53) 立. 政治大. 圖 4-9 華爾街日報在期間內的前三名積極留言者的留言. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-10 法新社在期間內的前三名積極留言者的留言. 43.

(54) 4.3 使用者測試(初測) 本節介紹使用者測試(初測)，讓受測者比較積極活動者的不同佈局呈現，受測者根據三種不同的佈局進行個別操作。三種佈局分別是群聚樹狀圖(Cluster Dendrogram)、Treemap 以及本研究採用的佈局(Radial layout)，這三種佈局都可表現出資料的階層特性。首先，群聚樹狀圖是典型的樹狀視覺化佈局，如圖 4-11，以點線圖的形式表示其階層關係，資料階層由右自左延展，階層意義依序是粉絲專頁、積極活動者、參與文章和文章文字訊息，並且以提示框的方式顯示文章的分享數和按讚數。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4-11 群聚樹狀圖(Cluster Dendrogram layout). 和群聚樹狀圖相比，Treemap 以較不明顯的方式展現其階層特性，如圖 4-12，以分割區塊和區塊顏色表示不同的積極活動者，此外，基於在顯示積極分享者資 44.