基於堆疊圖方式之社群媒體階層式議題的視覺化探索架構 - 政大學術集成

全文

(1)國立政治大學資訊科學研究所 Department of Computer Science National Chengchi University 碩士論文 Master's Thesis. 立. 政治大. ‧ 國. 學. 基於堆疊圖方式之社群媒體階層式議題的視覺化探索架構. ‧. n. al. er. io. sit. y. Nat. TopicWave: Visually Exploring Topics of Hierarchical Time-Oriented Data. Ch. en. hi. i n U. v. gc 研究生：熊凱文指導教授：紀明德. 中華民國一百零四年十一月 November 2015.

(2) 基於堆疊圖方式之社群媒體階層式議題的視覺化探索架構 TopicWave: Visually Exploring Topics of Hierarchical Time-Oriented Data 研究生：熊凱文. Student: Kai-Wen Hsiung. 指導教授：紀明德. 立. 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. 入狀況；感謝浩翔，從碩一開始就一起在傳播學院的計畫中共事，並一起從事. er. io. sit. 視覺化的研究，在這段期間於研究、計畫上無數次的攜手合作；感謝從大學開始就是同學的亞憲，常常帶給實驗室歡樂的氣氛，並且能在研究上教學相長；. al. n. v i n 感謝一起分享實驗室空間的密碼學實驗室同學們，尚文、承毅、逸修、阿和、 Ch engchi U. 阿泰，在這段期間融洽地相處；感謝科豫、睿誠、春閔、建凱學弟們，在最後這段期間提供許多研究上測試及實驗室事務上的幫助；感謝臻騏，處理實驗室大大小小的繁瑣事務；感謝在傳播學院計畫一起共事的同學與學長姊們，怡璇、怡瑩、哲嘉，能夠提供很多不同領域的意見；感謝電腦視覺實驗室的學長姊們與同學以及學弟妹們，言翰、婷雅、育如、崇銘、義瑋、佳霖，能夠在研究所生活認識你們很棒；感謝貞佑，感謝妳的貼心與照顧，有妳的陪伴真好。在此將我所完成這篇論文的喜悅分享給大家。.

(4) 基於堆疊圖方式之社群媒體階層式議題的視覺化探索架構. 摘要如何透過視覺化探索勢力消長情形，是近年來頻繁被探討的問題，常見之做法會針對帶有時間屬性的時間關聯資料 (time-oriented data)來進行觀察，而以社群媒體為例，重大議題通常是透過意見領袖提出具. 治政有關鍵性之觀點，而得以分歧出新議題並吸引其他社群媒體上之閱聽大立 ‧ 國. 學. 人加入討論，上述之過程牽涉評論之階層資料其層次隨著時間變化分歧與合併，然而，能夠透過視覺化之方式同時觀察上述特性有其挑戰. ‧. 性。本篇論文將針對階層式資料提出一套整合方式，稱為 TopicWave，. sit. y. Nat. 特別是帶有時間變化屬性的資料，希望透過改良動態圖形視覺化工具，. er. io. n. al 結合 Sunburst 與 ThemeRiver Graph，實作 Facebook 上公開文章之 iv n U engchi 評論(comments)行為隨時間變化的趨勢，而透過直覺式互動功能之設. Ch. 計。透過案例分析和使用者測試，本論文提出的方法能清楚呈現評論關係隨時間之變化與階層式結構，達到組合式創新之效果。. i.

(5) TopicWave: Visually Exploring Topics of Hierarchical Time-Oriented Data Abstract. In recent research, it is a frequently asked question about how to explore the topic trend during a time interval. If we want to analysis and discuss. 政治大 example, on social media platform, major issues are commonly formed by 立 this question, time-oriented data will be the most appropriate dataset. For. opinion leaders, people will be attracted by opinion leaders and join in the. ‧ 國. 學. commentary on a topic. The above-mentioned procedure will involve in. ‧. commentary hierarchy level increasing or decreasing while time changes,. y techniques.. We. io. sit. visualization. propose. TopicWave,. a. er. traditional. Nat. however, it is challenging when we want to explore these properties using. visualization design that combines ThemeRiver Graph (time-oriented. n. al. C h(hierarchical visualization) and Sunburst. engchi. iv n data U visualization).. It can. visualize the trend of a post’s comment on Facebook Page. TopicWave can clearly present hierarchy and time-varying trend of a Facebook post’s comment data at the same time through the intuitive design of interactive on visualization.. ii.

(6) 目錄. 摘要................................................................................................................................. i Abstract ..........................................................................................................................ii 目錄.............................................................................................................................. iii 圖目錄............................................................................................................................ v 第一章. 政治大. 緒論............................................................................................................ 1. 立. 1.1 研究動機與目的 ................................................................................................. 1. ‧ 國. 學. 1.2 問題描述 ............................................................................................................. 2 1.3 論文貢獻 ............................................................................................................. 3. ‧. 1.4 論文章節架構 ..................................................................................................... 3. y. Nat. 相關研究.................................................................................................... 4. io. sit. 第二章. n. al. er. 2.1 時變資料圖形生成與應用 ................................................................................. 4. Ch. i n U. v. 2.2 階層資料之隱性表達方式改良 ......................................................................... 7. engchi. 2.3 時間序列與階層式資料結構化標準 ................................................................. 8 第三章. 研究方法與步驟...................................................................................... 11. 3.1 系統架構 ........................................................................................................... 11 3.2 時變資料視覺化 ............................................................................................... 12 3.3 階層資料視覺化 ............................................................................................... 20 3.4 時間維度變化呈現與直覺式互動設計 ........................................................... 25 第四章. 實驗結果與討論...................................................................................... 30. 4.1 實作與實驗環境 ............................................................................................... 31 iii.

(7) 4.2 實作與實驗結果 ............................................................................................... 31 4.2.1 布魯塞爾恐怖攻擊警戒於 CNN 粉絲專頁貼文.............................. 31 4.2.2 Facebook 更換大頭貼響應恐怖攻擊事件於 CNN 粉絲專頁貼文 . 33 4.2.3 布魯塞爾恐怖攻擊警戒於 BBC News 粉絲專頁貼文 .................... 34 第五章. 評估方法.................................................................................................. 36. 5.1 先導性研究測試 ............................................................................................... 36 5.2 正式研究測試 ................................................................................................... 39 第六章. 結論與未來發展...................................................................................... 44. 政治大. 參考文獻...................................................................................................................... 47. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. iv. i n U. v.

(8) 圖目錄圖 1 Stacked Graph 四種分類：(a.)Traditional Stacked Graph、(b.)ThemeRiver Graph、(c.)最佳化 wiggle function 之 Stacked Graph、(d.)Streamgraph [3] ........ 4 圖 2 DimpVis 將傳統時間軸與視覺化結合及其隱含軌跡之設計 [5]..................... 6 圖 3 StoryFlow 設計準則與互動機制之配合 [8] ...................................................... 6 圖 4 分析社群媒體上的資料來進行勢力消長情形之視覺化 [9] ............................ 7 圖 5 針對 Sunburst 零碎區域視覺化之改良方法其一 [10] .................................... 8. 政治大 Topic Rose Tree (TRT) 立演算法的三種主要操作 [7] ....................................... 10. 圖 6 時間維度上的粒度與時間元素之關係 [6] ........................................................ 9 圖 7. ‧ 國. 學. 圖 8 系統流程圖 ......................................................................................................... 11 圖 9 時變資料視覺化沿水平方向進行非線性擠壓與延伸示意圖。(a.)原始資料之. ‧. 呈現結果 (b.)進行非線性擠壓與延伸之呈現結果 ............................................. 15. sit. y. Nat. 圖 10 Traditional Stacked Graph 與其 baseline function 𝑔0 呈現結果，淺藍色. al. er. io. layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評論當前即時. v. n. 按讚數之呈現，其中綠圈部分為僅具有高按讚數或高回覆數其中一者條件之. Ch. engchi. i n U. 資料位置 ................................................................................................................. 16 圖 11 ThemeRiver Graph 與其 baseline function 𝑔0 呈現結果，淺藍色 layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評論當前即時按讚數之呈現，其中綠圈部分為僅具有高按讚數或高回覆數其中一者條件之資料位置 ............................................................................................................................. 19 圖 12 (a.)Traditional Stacked Graph 與 (b.)ThemeRiver Graph 比較圖，橘圈部分可觀察出兩者繪製結果之 layer 交界線與輪廓線生與下降起伏程度之不同 . 20 圖 13 針對電腦檔案結構之 Sunburst 視覺化結果 [12] ........................................ 21 圖 14 Facebook 貼文評論階層式結構 ..................................................................... 22 v.

(9) 圖 15 以 Sunburst 呈現 Facebook 評論階層式資料，其排序方式依建立時間順時針遞增排序。 (a.) (b.)將滑鼠置於 level 1 之評論所顯示之 tooltip 情形，與將滑鼠置於 level 2 之評論回覆所顯示之 tooltip 情形比較，(c.) (d.)同為 level 1 之評論 Sunburst area 大小相近之情形 ................................................................. 24 圖 16 Sunburst area color scale function 示意圖 ....................................................... 24 圖 17 輔助物件法及其呈現方式 [5] ........................................................................ 25 圖 18 靜態連續圖法及其呈現方式 [5] .................................................................... 27 圖 19 以 D3 實現 DOM element 溝通與互動之方式 ............................................... 29. 政治大 TopicWave 視覺化結果架構 ........................................................................... 31 立. 圖 20 將滑鼠置於 ThemeRiver Graph 與 Sunburst 進行直覺式互動示意圖.......... 29 圖 21. 圖 22 比利時升高首都布魯塞爾恐怖攻擊警戒於 CNN Facebook 粉絲專頁貼文. ‧ 國. 學. 之評論情況 (a.)TopicWave 呈現結果 (b.)將滑鼠置於 Sunburst area 顯示. ‧. tooltip 呈現結果 ..................................................................................................... 32. y. Nat. 圖 23 Facebook 更換大頭貼響應對法國巴黎恐怖攻擊事件表達哀悼之討論於. er. io. sit. CNN Facebook 粉絲專頁貼文之評論情況 (a.)TopicWave 呈現結果 (b.)將滑鼠置於 Sunburst area 顯示 tooltip 呈現結果 ........................................................... 34. al. n. v i n 圖 24 比利時升高首都布魯塞爾恐怖攻擊警戒於 BBC News Facebook Ch engchi U. 粉絲專頁貼. 文之評論情況 (a.)TopicWave 呈現結果 (b.)將滑鼠置於 Sunburst area 顯示 tooltip 呈現結果 ..................................................................................................... 35. 圖 25 (a.)將階層資料視覺化以樹狀結構呈現之 ThemeRiver-Tree layout (b.)將時變資料視覺化以時間軸呈現之 Sunburst-Timeslider layout ................................ 38 圖 26 (a.)Retrieve Value 先導性研究測試受測者所花費時間 (b.)Comparsion 先導性研究測試受測者所花費時間 (c.)Characterize Distribution 先導性研究測試受測者所花費時間 (d.)Detect Outliers 先導性研究測試受測者所花費時間 (e.)Start and End Time 先導性研究測試受測者所花費時間 ............................... 39. vi.

(10) 圖 27 正式研究測試環境之畫面 ................................................................................ 41 圖 28 正式研究測試流程與設計 ................................................................................ 41 圖 29 正式研究測試之前測受測者應答所花費時間圖表，表中長條圖即代表不同受測者，縱軸位於左側，折線圖即代表不同受測者應答該問題所花費之平均時間，縱軸位於右側 ............................................................................................. 42 圖 30 正式研究測試之 Comparison 與 Trend & Theme 類型問題受測者應答所花費時間圖表，表中長條圖即代表不同受測者，縱軸位於左側，折線圖即代表不同受測者應答該問題所花費之平均時間，縱軸位於右側 ................................. 43. 政治大即代表不同偏好 ..................................................................................................... 43 立. 圖 31 正式研究測試之 Attraction 類型問題受測者偏好投票結果圖表，表中長條圖. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. vii. i n U. v.

(11) 第一章緒論 1.1 研究動機與目的人們的意見常被意見領袖所左右，爾後影響自身之觀點並持續一段時間，傳統新聞媒體透過報紙、電視等媒介傳播資訊，閱聽人通常沒有直接管道表達對一項議題之意見，而近年來社群媒體盛行，強化閱聽人與議題的互動性，除了許多人已經將社群媒體視為表達意見之重要媒介外，現實社會上的意見領袖們為了爭. 政治大點分享給更多閱聽人並且與社群直接產生激盪，當世界上有許多重要事件發生時，立取其意見之曝光度，也紛紛投入社群媒體發聲平台的行列，期待將自己獨特的觀. 社群媒體不外乎是觀察意見領袖如何表達意見的平台，當有興趣發掘意見流向之. ‧ 國. 學. 傳播領域工作者與專家，或者是創建社群平台之社群經營者，期望探討社群中閱. ‧. 聽人評論議題狀況，皆可以觀察社群使用者如何與意見領袖交互影響，並且帶動. y. Nat. 議題整體波動，進而擴大影響到其他議題勢力消長之情形。. er. io. sit. 如何觀察勢力消長情形，針對帶有時間屬性的時間關聯資料(time-oriented data)，進行分析與視覺化是常用的手法，對時間關聯性資料進行分析的方式與順. al. n. v i n 序性資料(sequential data) 雷同，在經濟社會、醫學工程等領域常有許多時間關聯 Ch engchi U. 性資料，而這種類型的資料常常帶有階層(hierarchical)架構，以社群網路為例，一件具有大方向的議題可以再細分為許多不同的事件，而不同的事件透過意見領袖的傳達又可以另闢新議題來吸引閱聽人加入討論，隨著時間演進的結果下能使一項議題擁有其討論的聲量廣度與階層深度，近年之研究已注意到時變資料相關視覺化方式已無法配合階層架構的呈現，紛紛開始進行改良，本篇論文將針對時變資料與階層資料提出一套整合方式，透過不同的觀點來觀察資料視覺化之結果。. 1.

(12) 1.2 問題描述本論文之視覺化設計問題與問題之考量可分為兩個部分，如何針對資料特性設計時間關聯資料視覺化(time-oriented data visualization)以及階層資料視覺化 (hierarchical data visualization)並加以結合。歷年文獻皆對於上述兩種視覺化設計進行了歸納與分類 [1] [2]，並皆可巨觀地分類為顯性表達(explicit)、隱性表達 (implicit)、混合三種類型。針對時變資料視覺化，顯性表達與隱性表達可對應至 linear 與 cyclic 兩種不同的視覺化表達方式，linear 類型的時變資料視覺化以二維座標系作為基礎，. 政治大化結果，而 cyclic 類型的時變資料視覺化則將較有時間直覺性之 linear 類型視立並以 x 軸代表時間變化，y 軸代表資料特性變化，繪製一連串橫向伸展之視覺. ‧ 國. 學. 覺化結果加以設計，翻轉、捲曲其視覺化結果，在易讀性之考量上除了能夠有效利用有限解析度下之排版空間外，利用相較於 linear 之視覺化表達方式較為捲. ‧. 曲與資料呈現能夠較為環狀貼合之優勢，能夠幫助使用者觀察相鄰資料之關係。. sit. y. Nat. 針對階層資料視覺化，顯性表達與隱性表達可對應至 node-link 與 space-. al. er. io. filling 兩種不同的視覺化表達方式，node-link 類型的階層資料視覺化其優點為. v. n. 直觀清晰，為人類對於階層資料直接的理解，缺點為當節點數目上升時，階層的. Ch. engchi. i n U. 廣度與深度也會成長並大幅提高視覺化結果所佔用的空間，難以有效率地利用螢幕空間，並伴隨著較差的可讀性，而 space-filling 類型的階層資料視覺化其優點為相比於 node-link 方法，更適合於顯示包含與從屬關係，並且有較高的螢幕使用率，缺點為階層排序資訊不如 node-link 方法清晰。在以往之研究中，由於隱性的設計方式需要投入比顯性更多的時間加以探討設計方針，時變資料視覺化與階層資料視覺化大多採用顯性的設計方式呈現其視覺化結果，且缺乏兩種視覺化互相交流與結合之研究，本論文希望能針對社群媒體資料隨時間傳遞的特性，將兩種視覺化進行結合，並能夠往隱性設計方式多加延伸，期望可以立即表達資料特性，並兼具排版空間有效利用與美觀等考量。 2.

(13) 1.3 論文貢獻本論文嘗試將時變資料視覺化與階層資料視覺化兩種視覺化呈現互相整合，產生能夠更多元表達階層資料隨時間變化的視覺化結果，本論文的方向主要可以分為以下三大部分，各部分內容簡單敘述如下： . 探討如何利用兼顧簡潔與清楚表達資料隨時間變化的時變資料視覺化來表達資料特性。. . 探討如何利用階層資料視覺化能適時表達使用者所關心的資料階層變化與資料特性。. . 政治大並設計互相關聯之直覺式互動。立. 探討如何將時變資料視覺化與階層資料視覺化進行有效率的排版與結合，. ‧ 國. 學. 1.4 論文章節架構. 在第二章中，本論文將會介紹與本論文相關的研究背景知識，第三章為主要. ‧. 的研究方法與步驟，第四章為實驗結果呈現與分析比較討論，第五章為結論與未. n. al. er. io. sit. y. Nat. 來研究。. Ch. engchi. 3. i n U. v.

(14) 第二章相關研究在此章節本論文將會整理與本論文的研究背景知識所相關之論文，依視覺化種類分為時變資料與階層資料兩個部分進行相關研究之探討，並在第三部分探討時變資料與階層資料其資料結構上如何搭配與設計等相關研究。. 2.1 時變資料圖形生成與應用 2008 年，Byron 與 Wattenberg 統整 Stacked Graph 排版演算法的設計，對. 政治大日常生活中圖形報表的 Traditional Stacked Graph，與具有突顯 layer 間隨著時間立 stacked graph 的發展進行系統性的整理 [3]，其中包含已被社會大眾廣泛使用於. 序列變化之勢力消長情形的 ThemeRiver Graph。該研究對於 Stacked Graph 如. ‧ 國. 學. 何透過電腦演算法進行設計立下良好的研究基礎，且針對排版提出改良方法，減. ‧. 少 slope 過於急驟的上升與下降，使 layer 隨著時間序列的變化情況更能貼近. y. Nat. 原始資料的情形，並將改良過後的設計命名為 Streamgraph ，由於 ThemeRiver. er. io. sit. Graph 與 Streamgraph 能以簡單的視覺設計傳達直觀的訊息，至今已被廣泛應用在探討社群網絡 (social network) 下族群間交互影響情形，並透過探索式資料分. al. n. v i n 析 (exploratory data analysis) 之方式比較在時間因素的介入下特定族群的聲量傳 Ch engchi U 播差異。. 圖 1 Stacked Graph 四種分類：(a.)Traditional Stacked Graph、(b.)ThemeRiver Graph、(c.)最佳化 wiggle function 之 Stacked Graph、(d.)Streamgraph [3]. 4.

(15) Baur 等人在 2012 年以 Byron 與 Wattenberg 於 2008 年之基礎做了兩項延伸，使 stacked graph 能在符合 kinetic manipulation 概念前提下將視覺化結果能夠以肢體語言操作的方式拉近人與資料的距離 [4]，kinetic manipulation 志在於鼓勵開發者利用肢體語言直接操作視覺化結果，並以動畫進行回饋達到 virtual tangibility 之目標，且更進一步地定義手勢操作來強化傳統 stacked graph 之功能性，透過基本的縮放與點擊手勢，讓 stacked graph 能間接呈現階層式資料，再結合拖曳手勢達到截取 stacked graph 中部分 layers 之效果，輔助分析不同時間點上資料所傳達的聲量。結合多點觸控技術與對 stacked graph 之改良，. 政治大所能傳達的資訊，並捨棄如滑鼠與鍵盤等溝通媒介期許使用者能透過肢體語言獲立. 使得使用者能在有限的排版空間下進行大量的操作來強化原本靜態視覺化結果. 得嶄新的視覺化體驗。. ‧ 國. 學. 2014 年，Kondo 等人發表 DimpVis [5]，該篇論文志在於資訊視覺化結果上. ‧. 直接探索其視覺資料在時間維度上的變化，並且可與之互動，DimpVis 將視覺資. y. Nat. 料隨時間的變化轉換為一種隱含軌跡，並在 DimpVis 上呈現來引導使用者藉由. er. io. sit. 與隱含軌跡之互動進而體會資料隨時間變化的特色，互動方式為使用者利用手勢選取其感興趣之資料於視覺化上呈現之絕對位置，在選取的同時，具有引導作用. al. n. v i n 之隱含軌跡便會顯示，提示使用者可順應隱含軌跡之方向進行拖曳，拖曳的同時 Ch engchi U. 所有資料皆會有如動畫般之變化，以反應使用者在時間維度上的瀏覽，藉由 DimpVis 的設計與技術，使用者可以直接透過手勢操作，並觀察資料的位置、顏色、大小變化，且可以運用於如柱狀圖、散點圖等現今已流行之視覺化基礎上達到探索視覺資料在時間維度上變化的效果。透過該篇論文設計之驗證實驗，可以顯示不同於傳統上簡單附加時間軸拉動條物件，會干擾使用者探索資料的方式，將時間維度的操作物件與視覺化結果加以設計與結合，能得到較佳的使用者體驗與回饋。. 5.

(16) 圖 2 DimpVis 將傳統時間軸與視覺化結合及其隱含軌跡之設計 [5]. 針對故事、書籍劇情進行分析是一個研究已久的領域，當故事劇情複雜時，. 政治大發生，而各種人物角色在故事中所遭遇的事件跟故事場景的關係也常具有階層式立. 人物角色與故事中的場景隨著時間變化與敘述方式的不同常有穿插出現的情形. ‧ 國. 學. 架構的型態，2013 年，Liu 等人提出 StoryFlow，提供了基於 Storyline 來追尋劇情發展的視覺化方法 [8]，以線表示人物角色，contour 表示故事場景，並加以. ‧. 考量故事中事件發生的順序，來設計視覺化所能忠實表達結果之資料結構，再透. sit. y. Nat. 過視覺化設計上的改良，考慮線段交疊問題與 stacked graph 之排版設計準則，. al. er. io. StoryFlow 在 case study 上得到很高的評價，並且可將資料擴展至社群媒體上，. v. n. 可進行分析 Twitter 上的資料，透過視覺化的結果分析不同的意見領袖與議題隨時間序列的演變。. Ch. engchi. i n U. 圖 3 StoryFlow 設計準則與互動機制之配合 [8]. 6.

(17) 2013 年，Xu 等人以兩個 Streamgraph 作為不同顏色之上下層，搭配文字雲 (Word Cloud)相互輔佐，並邀請專業之傳播學者進行合作，針對社群媒體(Social Media)上所討論的議題隨時間序列的變化之勢力角逐情形進行視覺化 [9]，該研究以傳播學的理論基礎來探究社群媒體議題關係複雜程度，得到了社群媒體上的議題關係通常是 multiple-type 且 dynamic 之結論，導致易讀、直觀的視覺化結果製作上有其困難度，表達出現今社會雖然已強烈依賴社群媒體作為傳達意見的重要媒介，但由於傳播學理論與視覺化技術並沒有相對應的成熟度，使得相關研究並不多見，透過傳播學理論的基礎考量後，該研究之視覺化結果在繪製區域之. 政治大注程度的議題上視覺化意見領袖族群在時間變化上對於該議題關注的變化，該研立. 底層呈現議題在時間變化上的競爭與關注程度之消長，並在每個互相角逐大眾關. 究是近年社群媒體視覺化中具有代表性之例子，能以直觀的方式觀察意見領袖如. ‧ 國. 學. 何操作一個社群媒體上的議題被大眾關注的程度。. ‧. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 4 分析社群媒體上的資料來進行勢力消長情形之視覺化 [9]. 2.2 階層資料之隱性表達方式改良 Stasko 等人在 2000 年針對 Sunburst 提出一套改良方法 [10]，使得較為零碎的階層資料能夠得到更有效率的關注程度，Sunburst 屬於階層資料視覺化中隱性表達的一個顯著例子，而資料的階層性常見於生活與資訊科學領域中，譬如公司組織、族譜或者是電腦檔案結構都是階層資料的例子，而最常見的階層資料視覺化方式是以顯性表達方式中的樹狀結構來呈現，樹狀結構繪圖演算法能清晰表. 7.

(18) 達 parent-child 結構，但隱性表達方式如 Treemap [22] 視覺化其優勢在於能夠比顯性表達方式更清楚的呈現樹狀結構中各節點的屬性，例如各節點類型或者是資訊量高低，且能夠較有效率地進行比較。而對於資訊量偏低的節點，在 Sunburst 中的呈現卻有其缺點，起因於其幾何區域擴張角度會被其他資訊量相對高之節點壓縮，導致擴張角度較小而 Sunburst 中會出現部分零碎區域的情況，該篇論文即對此情況提出三種改良方法，使得使用者在使用隱性階層資料視覺化時，能夠更有效地觀察並與資訊量相對較低的訊息互動。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. i n U. v. 圖 5 針對 Sunburst 零碎區域視覺化之改良方法其一 [10]. engchi. 2.3 時間序列與階層式資料結構化標準 Rind 等人在 2013 年提出 TimeBench，該研究致力於解決設計時間關聯性資料視覺化過程中會碰到的問題 [6]，由於時間是一種特殊的維度，不同於一般計量所使用的維度，時間擁有各式各樣的粒度，導致開發者在設計視覺化演算法時需要耗費大量的時間成本針對少數研究上所關注的案例重新設計特定的解決方法 (ad-hoc)，且無法有彈性地活用在其他案例上，以諸多會運用到時間序列資料之領域為例，常見的有電子醫療紀錄、網路流量紀錄等，再者，在缺乏一套結構化標準的情況下，開發者往往會因為無法透過一套標準輔助來互相與其他研究合 8.

(19) 作或進行比較，故 TimeBench 設計了一套針對時間關聯性資料視覺化的資料結構與演算法設計方式，對時間維度定義三種重要的模型與結構－時間粒度 (granularities)、時間元素(time primitives)、時間不確定性 (determinacy)，希望能基於對時間定義其設計準則，進而推廣到演算法與資料結構的設計考量上，使往後針對時間關聯性資料視覺化之研究能有一套標準可以參考，減少開發上所耗費的時間成本。. 立. 政治大. ‧ 國. 學 [7]，表達出在這個資訊爆炸，. sit. Nat. 2013 年，Dou 等人提出 HierarchicalTopics. y. ‧. 圖 6 時間維度上的粒度與時間元素之關係 [6]. n. al. er. io. 且社群媒體已成為人們生活中不可或缺接收或傳達資訊的重要媒介，資訊產生的. i n U. v. 速度非常迅速，導致大量的資訊對分析上也造成一定程度的困難性，但這些巨量. Ch. engchi. 資料的背後隱藏未被發掘且豐富的研究價值，該研究著重在如何高效率地分析資料，並提出三個期望高效率分析所會面臨的設計問題－如何有效率地將各自分散之議題組織成主題、如何透過視覺化結果表達主題所要傳達之訊息，並允許使用者進行互動式操作依照需求對主題之組織進行更改、如何分析議題中隱含的訊息，改進組織主題的結構能夠表達更明確的視覺化結果。該研究針對上述設計提出 Topic Rose Tree ( TRT )演算法，能夠自動地將議題產生階層式架構，並且能透過使用者改變視覺化間接更改 TRT 演算的結果，並採用 stacked graph 的呈現方式表達主題之間隨時間變化所隱含的訊息。. 9.

(20) 政治大. 圖 7 Topic Rose Tree (TRT) 演算法的三種主要操作 [7]. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 10. i n U. v.

(21) 第三章研究方法與步驟 3.1 系統架構. 立. 政治大圖 8 系統流程圖. ‧ 國. 學. 本論文目前利用 ThemeRiver Graph 呈現時變資料視覺化，由於時變資料視. ‧. 覺化需要時變性資料配合方能進行呈現，而本論文主要研究之資料集來自於. sit. y. Nat. Facebook Graph API ，並希望呈現 Facebook 上粉絲專頁與其貼文之評論. al. er. io. (comments)資料行為隨時間變化之情形，但除了評論資料本身與回覆所發布之時. v. n. 間外，按讚資料並無時間記錄，故在 ThemeRiver Graph 上之呈現，本論文採用每. Ch. engchi. i n U. 筆評論資料當前即時之按讚數做為 ThemeRiver Graph 所呈現之 layers 其中之一，並以當前即時之回覆數做為另一層 layer 使得使用者能夠在時變資料視覺化上觀察兩者之關係。而針對階層資料視覺化，本論文利用 Sunburst 呈現 Facebook 上行為中的聲量比例，聲量代表某些議題得到大眾關注的廣度，而在社群網路中，按讚是其中最能代表 Facebook 特色的社群行為，當一位 Facebook 使用者想對一則評論表達同意與支持，成本最低之方式能透過按讚來表現，故聲量的大小能以得到的按讚數量來代表，本論文將按讚數進而轉換為 Sunburst area 的大小與顏色深淺，並藉由 Sunburst 屬於階層資料隱性表達的特性，有效地利用環狀排列的特色易 11.

(22) 於比較各種不同聲量的大小。一位 Facebook 使用者除了以按讚之方式表達對該評論之同意與支持，若其希望參與此項議題的討論，可以透過回覆之方式形成該評論之第二層評論，透過 Sunburst 之階層式資料呈現演算法之結果，本論文可以將評論資料之第一層與第二層評論清楚地呈現，讓使用者觀察兩者互動之狀況與關係。本論文以 D3 為函式庫繪製視覺化之結果，並以 Front-end 做為結果呈現之平台，搭配 Node.js 與其眾多函式庫進行資料撈取、前後端溝通與資料要求與傳送之步驟。由於一則張貼於熱門 Facebook 粉絲專頁之貼文，其評論往往動輒上. 政治大多不必要之評論資料呈現於視覺化結果中而造成視覺混亂的情況。關於資料前處立千則，故本論文在進行視覺化呈現之前，將撈取之評論資料進行前處理，避免過. 理之部分，每則評論資料將會依據以下兩個條件進行檢查，其條件分別為（1）. ‧ 國. 學. 若該則評論資料所得到的按讚數高於所有評論資料的按讚數之中位數、（2）若該. ‧. 則評論資料至少擁有一則回覆，若至少符合其中一者條件，本論文認為該評論即. sit. y. Nat. 為在貼文評論情形中較為顯著之評論，並將該評論資料保留以進行視覺化呈現。. io. al. er. 3.2 時變資料視覺化. v. n. 根據 2008 年 Byron 與 Wattenberg 對於歷年 Stacked Graphs 之繪製特性. Ch. engchi. i n U. 所做出的彙整 [3]，對於 Stacked Graphs 之設計考量與準則可歸納出兩個方向－易讀性 (Legibility) 與美觀性 (Aesthetics)，將資料轉換為易讀性高的視覺化結果非常重要，且整體的易讀程度之好壞可直接影響到視覺化結果的評價，而美觀性則會影響到視覺化結果受歡迎的程度，鼓勵研究者在易讀性上琢磨，且盡量遵從易讀性設計準則，力求盡量精確表達原始資料的特性以外，也能在視覺化結果的美觀性上突破以往並加深使用者對於視覺化結果的印象。對於易讀性之設計考量，主要又可細分為以下評估方向： . 符合 Tufte’s macro / micro principle，視覺化結果之設計應可以在巨觀上立即表達整個資料的所要傳達的概念，而在微觀上又可以不失 12.

(23) 資料原始的準確度。 . 兩個 layers 垂直高度相同但 slope 變化不盡相同時，在視覺化結果上兩者的厚度應要有明顯不同。. . layer 各自的垂直厚度標準與視覺化結果整體的垂直厚度標準應要進行權衡，避免迎合其中一者的結果而失去另一者所要表達資料特性之準確度。. . 當使用 Traditional Stacked Graph 來進行視覺化時須注意每個 layers 隱藏在繪圖結果上有各自壓縮的問題，造成閱讀上的困難。. 政治大 Stacked Graph 其廣受人們推崇的原因在於其美觀性之設計得當，得以吸引觀眾立而易讀性並不是設計 Stacked Graph 唯一的準則，目前很多代表性的. 的目光，近而使得觀眾對於視覺化背後的資料產生興趣，並得到啟發。. ‧ 國. 學. 針對美觀性的考量是需要細心地權衡，或者盡量在避免影響易讀性的原則下，. ‧. 設計能夠吸引使用者駐足欣賞的視覺化呈現結果。美觀性的設計使得視覺化結果. y. Nat. 盡量偏離傳統統計圖表不鮮明的觀感，然而，如何衡量視覺化的設計接近傳統統. er. io. sit. 計圖表的設計，使得設計者能夠避免製作出不受到觀眾目光青睞之視覺化作品，並沒有一個明確的準則來進行評估，如果一個視覺化圖形開始被大眾廣泛地使用，. al. n. v i n 那麼其吸引目光的美觀性成分是否會有下降的趨勢？另一方面，倘若一個視覺化 Ch engchi U 圖形擁有充分的美觀性考量設計，美觀性能夠受到觀眾贊同，也將會成為吸引觀. 眾進一步瞭解背後資料集的完好例子。美觀性之衡量能夠大致與資料內容的實用性進行優先權的比較，假如視覺化結果之目的不在吸引大量觀眾的目光並且得以推廣，而是需要被一群特定的觀眾使用，則不需要犧牲易讀性的設計準則和美觀性設計考量進行妥協，反之，視覺化結果如需吸引大量的目光，並能夠廣泛地被傳播，則美觀性設計考量之優先權則勢必高些。針對 Stacked Graphs 經過彙整後的繪製方式，可以統一成以下二者來決定呈現結果，Stacked Graphs 底部線條 (baseline) 的形狀，與 layer 堆疊之順序，以. 13.

(24) 上二者可直接決定 Stacked Graphs 呈現方式的不同，且能大致區分為三類： Traditional Stacked Graph、ThemeRiver Graph、Streamgraph，為了精確表達 Stacked Graphs 在數學上之繪製方式，我們將時間序列資料設計成 n 個非負實數值函式 f1, …, fn以代表n個類型資料隨時間所形成之時間序料資料，本論文將n設為2表示一位貼文評論者於Facebook貼文上得到之按讚與回覆行為之計數，並涉及m個經前處理過後所要進行視覺化呈現之評論者，其數學模型由公式(1)所示，並定義 Stacked Graphs 底部線條為 baseline function g0 ，與位於 Stacked Graphs 頂部第 i 個時間序列資料 fi 為 gi，可定義以下公式(2)： 𝑓𝑖 = {. 𝑟𝑒𝑝𝑙𝑖𝑒𝑠_𝑐𝑜𝑢𝑛𝑡1 , … , _𝑐𝑜𝑢𝑛𝑡𝑚 , 𝑖 = 1 𝑙𝑖𝑘𝑒𝑠_𝑐𝑜𝑢𝑛𝑡1 , … , 𝑙𝑖𝑘𝑒𝑠_𝑐𝑜𝑢𝑛𝑡𝑚 , 𝑖 = 2. 𝑔𝑖 = 𝑔0 + ∑𝑖𝑗=1 𝑓𝑗. 立. 政治大. ‧. ‧ 國. (2). 學. 而下圖為遵照以上公式定義表示 n = 2 時之情形 [3]。. (1). n. er. io. sit. y. Nat. al. Ch. engchi. 14. i n U. v.

(25) 不同類型之 Stacked Graph 差異在於 baseline function g0 取捨，最簡易之 Traditional Stacked Graph 其 g0 公式如下： 𝑔0 = 0. (3). 利用以上 g0 公式繪製圖形，並搭配 Facebook 粉絲專頁貼文 (postid 為 10154233979726509)評論資料將會呈現如圖 10 之結果，為了盡可能地突顯所有評論資料於時變資料視覺化中的呈現結果，針對 Facebook 按讚、評論、分享行為皆接近並集中在貼文剛建立不久之時間點，我們將時變資料視覺化結果在水平方向上進行非線性擠壓與延伸，將所有評論之建立時間點之中位數其對應之資料. 政治大. 所呈現之位置固定置於排版空間之中央，如圖 9 所示。. 立. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 9 時變資料視覺化沿水平方向進行非線性擠壓與延伸示意圖。(a.)原始資料之呈現結果 (b.)進行非線性擠壓與延伸之呈現結果. 而在視覺化中淺藍色 layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評論當前即時按讚數之呈現，圖形之底部平貼於傳統二維坐標圖形之 x 軸，在此圖形排版的結果下，每個 layer 所表達的數值總和能夠透過垂直地觀察圖形在 y 軸方向上的長度大小，來清楚感受到資料的特性，透過 Traditional Stacked Graph 之呈現可以觀察到在一些時間點上，即時按讚數與即時評論數形成一些高峰，代表在該時間點上其貼文出現了具有代表性之評論，這些 15.

(26) 評論接受到大量的按讚與回覆，可能是評論者提出了有趣的觀點或者是值得被討論的議題，才得以在綜觀整個貼文評論情形，以突出之姿形成高按讚數與高回覆數，是值得使用者加以分析與探討的評論意見領袖，而除了上述高按讚數與高回覆數之評論無疑是潛在意見領袖並值得被探討外，透過 Traditional Stacked Graph 我們可以觀察到某些時間點上之高峰並不是具有高按讚數與高回覆數兩者條件，而可能是僅具有高按讚數或高回覆數其中一者條件，如圖 10 之綠圈部分所示，這些評論者在 Stacked Graph 中可以易於與其他時間點之資料進行按讚數與評論數的比較，若使用者特別對這些評論者感興趣，此呈現便能幫助使用者觀察出. 政治大所會發生之各 layers 過度擠壓而造成視覺混亂之問題，Traditional Stacked Graph 立上述評論者在時變資料中的角色。假若在設計上注意 Traditional Stacked Graph. 是非常符合易讀性之 Stacked Graph 類型。. ‧ 國. 學. 0 people like this 1 replies. ‧. 12 people like this 0 replies. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 10 Traditional Stacked Graph 與其 baseline function 𝑔0 = 0呈現結果，淺藍色 layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評論當前即時按讚數之呈現，其中綠圈部分為僅具有高按讚數或高回覆數其中一者條件之資料位置. 16.

(27) ThemeRiver Graph 是另一種 Stacked Graph 類型，其排版方式對稱於 x 軸，透過數學化之公式，我們可以以下列公式表示之： 𝑔0 + 𝑔𝑛 = 0. (4). 或者以 i = n 將 gi 公式帶入得到： 2𝑔0 + ∑𝑛𝑖=1 𝑓𝑖 = 0. (5). 則可得到 baseline function g0 為以下公式： 1. 𝑔0 = − 2 ∑𝑛𝑖=1 𝑓𝑖. (6). 如此是為 ThemeRiver Graph baseline function g0 最為基本之定義，由於. 政治大量，此種排版方式造成了某些數值特性最小化的效果，特別的是每個位於立. ThemeRiver Graph 對稱之特性，其設計考量也被廣泛探討，撇除美觀性之設計考. ‧ 國. 學. ThemeRiver Graph 之資料點其繪圖結果之頂端與底端邊界輪廓能夠盡量緊貼 x 軸，故每個上邊界輪廓與下邊界輪廓其斜率結果因此而成為最小值（同理於求解. ‧. 取最小平方和），以上種種數學特性使得 ThemeRiver Graph 繪製結果其垂直排. sit. y. Nat. 版不至於太過於「失真」，並符合 Cleveland’s principal [22] ，受惠於圖形並不. al. er. io. 會在垂直方向上有過多的單方向偏移造成失真，整體圖形之平均斜率應盡量趨近. v. n. 於45度，使得解析度趨近於方正矩形，因此視覺化結果易於觀察並符合易讀性，. Ch. engchi. i n U. 為了解釋以上特性，我們假定一個任意實數集合 {a1,…,an}，值 x 能夠使得以下公式最小化： ∑𝑛𝑖=1(𝑥 + 𝑎𝑖 )2. (7). 故得到 x 為： 1. 𝑥 = − 𝑛 ∑𝑛𝑖=1 𝑎𝑖. (8). 以上公式能夠對應到 ThemeRiver Graph 之 baseline function g0 公式，即為其公式之 generalization，並解釋了擁有對稱性質之 ThemeRiver Graph 其排版方式能夠使上邊界輪廓與下邊界輪廓平方和因此而成為最小值：. 17.

(28) 𝑠𝑖𝑙ℎ𝑜𝑢𝑒𝑡𝑡𝑒(𝑔0 ) = 𝑔0 2 + 𝑔𝑛 2. (9). 進而推導為 𝑔0 2 + 𝑔𝑛 2 = 𝑔0 2 + (𝑔0 + ∑𝑛𝑖=1 𝑓𝑖 )2. (10). 以上公式是以另一種方式表示 ThemeRiver Graph 在圖形之任意資料點上，最小化了 g0 與 gn 之斜率平方和。因此，ThemeRiver Graph 不只產生了對稱圖形，且在避免整體圖形扭曲與失真上可視為有最佳化的效果，搭配 Facebook 粉絲專頁貼文(postid 為10154233979726509)評論資料將會呈現如圖 11 之結果，淺藍色 layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評論當前即時. 政治大性評論的高峰，這些高峰可能是潛在的評論意見領袖，而這些高峰各自具備不同立. 按讚數之呈現，同樣地，從 ThemeRiver Graph 中我們可以觀察出幾個具有代表. 之數值特性，假若兩層 layers 在視覺上幾乎互相對稱，平均分配垂直方向上的. ‧ 國. 學. 空間，則該時間點之評論得到的按讚數與回覆數相當，有非常多的使用者以按讚. ‧. 的方式擴增該則評論之聲量，並同時吸引了非常多使用加入第二層評論來進行議. y. Nat. 題的討論，相反地，假若該則評論僅具有高按讚數或高回覆數其中一者條件，則. n. al. er. io. 圈部分所示。. sit. 必有其中一層 layer 在該則評論之時間點上獲得較多的排版空間，如圖 11 之綠. Ch. engchi. 18. i n U. v.

(29) 12 people like this 0 replies. 0 people like this 1 replies. 1. 圖 11 ThemeRiver Graph 與其baseline function 𝑔0 = − 2 ∑𝑛𝑖=1 𝑓𝑖 呈現結果，. 政治大論當前即時按讚數之呈現，其中綠圈部分為僅具有高按讚數或高回覆數其立中一者條件之資料位置. 淺藍色 layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評. ‧ 國. 學. 透過 ThemeRiver Graph 之呈現我們可以與 Traditional Stacked Graph 比較，. ‧. ThemeRiver Graph 能夠較 Traditional Stacked Graph 有效利用排版空間，空白而. sit. y. Nat. 沒有使用的區域大小與繪圖結果兩者平均分配有限解析度下之排版，整體圖形對. al. er. io. 稱於 x 軸，故擁有比起 Traditional Stacked Graph 較為平衡之繪製結果，而. v. n. ThemeRiver Graph 之數學特性使得 layer 之垂直方向之寬度不至於過寬，如圖. Ch. engchi. i n U. 11 之比較所示，我們可以觀察出回覆數與按讚數 layer 之間之變化，在 Traditional Stacked Graph 之呈現與在 ThemeRiver Graph 之呈現的不同，如圖12 之橘圈部分所示，ThemeRiver Graph 在 layer 與 layer 之交界線上升與下降的起伏程度相較 Traditional Stacked Graph 和緩許多，而在 layer 之輪廓線上也遵守上述規則，符合易讀性，以上特性可以幫助使用者更容易透過時變資料視覺化觀察出其具有興趣之資料位置與其所代表之數值性質。. 19.

(30) 立. 政治大. ‧. ‧ 國. 學. io. sit. y. Nat. 圖 12 (a.)Traditional Stacked Graph 與 (b.)ThemeRiver Graph 比較圖，橘圈部分可觀察出兩者繪製結果之 layer 交界線與輪廓線生與下降起伏程度之不同. er. 3.3 階層資料視覺化. al. n. v i n 近年來，許多階層資料視覺化皆應用節點與邊線之樹狀結構視覺化演算法來 Ch engchi U. 繪製，不論是一般之面向大眾之視覺化應用，或者是學術上之視覺化分析，而 space-filling 之階層資料視覺化方式如 Treemap [22] 利用更隱性的方式與在幾何學上探討如何設計排版來表現階層式資料之從屬關係，隱性表達方式優點在於能夠更清楚地透過視覺化比較資料不同的屬性，例如資料量大小若不同，則在資料量大之視覺化呈現則相對比資料量小之視覺化呈現之幾何區域小，而資料型別若不同，則常見方式則可利用不同色調來做呈現，透過 space-filling 之視覺化表達方式，更容易使得使用者觀察到不同型別之資料在視覺化之色調呈現互相迥異。但隱性階層資料視覺化則相對比樹狀結構等顯性階層資料視覺化在表達結構上. 20.

(31) 優勢較為不足，針對 Treemap 之補強方式常見的有利用更為平衡的解析度 [23] 與 3D shading [24] 等等幫助使用者更容易在隱性階層資料視覺化中觀察階層式結構。 Radial space-filling 視覺化技術是另一種在幾何上相對於 Treemap 屬於矩形排版的隱性階層資料視覺化方法，設計者認為 radial space-filling 能夠發揮隱性階層資料視覺化之優點，且能夠加強使用者探討資料之階層結構，Sunburst 就是一種 radial space-filling 的隱性階層資料視覺化技術 [12]，其視覺化結果呈現為 root 或者是階層結構中較為淺層之資料較位於視覺化結果之內部並靠近視覺. 政治大為基準向外層擴展，每一個 level area 之寬度皆為等距，但擴張角度則因資料量立化結果之中心點，較為深層之階層資料則以環狀排列方式往視覺化結果以中心點. 大小而不同，通常資料量較大則 level area 之擴張角度呈現則較大，反之亦然。. ‧ 國. 學. 因此透過擴張角度可以很容易地比較兩個 level area 之資訊量大小，其呈現結果. ‧. 如圖 13 所示。. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 13 針對電腦檔案結構之 Sunburst 視覺化結果 [12] 為了探討 Facebook 貼文評論資料，若將貼文本身視為 root 且 level 為 0，由於回覆功能目前僅限於貼文評論，而針對評論之回覆並不允許在繼續在該回覆上. 21.

(32) 再進行回覆，故 Facebook 貼文評論資料可視為 level 最大為 2 之階層化資料，每筆評論與回覆階如同貼文本身可進行按讚的動作，如圖 14 所示。. ‧. 圖 14 Facebook 貼文評論階層式結構. Sunburst 呈現 Facebook 粉絲專頁貼文 (postid 為. sit. y. Nat. 本論文採用. 學. ‧ 國. 立. 政治大. al. er. io. 10154233979726509)評論資料，視覺化結果如圖 15 所示，為了濾除較為不重要. v. n. 之資訊，本論文於前處理部分蒐集該篇貼文 level 1 評論之所有當前按讚數並計. Ch. engchi. i n U. 算出中位數，濾除標準為將按讚數高於中位數或者至少擁有一則回覆之 level 1 評論留下進行視覺化呈現，其餘評論將不於視覺化中呈現。針對 level 1 之評論，其 Sunburst area 擴張角度受其 level 2 children 之數量(即針對該評論之回覆數)與 children 之按讚數影響，而位於 level 2 之評論回覆其 Sunburst area 擴張角度大小由於不存在 level 3 之 children 則不受此影響，直接以該則回覆所得到之按讚數決定其 Sunburst area 擴張角度之大小。假若 level 1 之評論得到較多回覆，且回覆亦得到較多的按讚數，則 Sunburst area 擴張角度則相對比起得到較少回覆，且回覆按讚數較少之 Sunburst area 擴張角度大小來得大，然而，假若某則貼文中之評論雖得到較多回覆，但回覆之內容若較為空洞與貧乏，則這些回覆在 22.

(33) Facebook 中相對不會得到較多的按讚數，形成回覆數高但回覆得到之總讚數低的現象，上述等評論情況在 Sunburst 中之呈現，在 Sunburst 中之呈現並不會獲得太大之 area 擴張角度，如圖 15 (c.) (d.)所示，該兩則評論獲得之回覆數為 9 則與 16 則，但 Sunburst area 擴張角度大小在視覺化呈現中卻相近，原因在於 (d.) 所呈現之評論其回覆總按讚數為 13 次，而 (c.) 所呈現之評論其回覆總按讚數則為 16 次，故兩則評論在回覆數上雖有一定差距，但由於其中一者其回覆得到之總按讚數較高而形成與另一者之 Sunburst area 擴張角度相當的呈現結果，此呈現方式可忠實反映貼文評論行為中真正受到廣泛關注之評論，使得使用者能夠清. 政治大本篇論文以一篇貼文之評論所有按讚數最高與最低者構成 domain，並以紫色之立. 楚地觀察評論中意見領袖於貼文評論中所扮演之角色。在顏色深淺度之呈現上，. 明度大小構成 range 建立一個 color scale function，如圖 16 所示，透過 color scale. ‧ 國. 學. function 我們皆可將同一篇 Facebook 貼文之評論得到之按讚數以顏色深淺度進. ‧. 行視覺化之呈現，幫助使用者透過顏色深淺度快速觀察評論行為中評論或者回覆. y. Nat. 何者獲得較多按讚數，並加以分析該則評論或回覆能獲得較多社群使用者關注之. er. io. sit. 原因。而針對 Sunburst 中資料之排序方式，本論文之目標為希望與時變資料視覺化結合，故排序方式以該則評論或者評論回覆之建立時間為排序標準，以環狀排. al. n. v i n 版中十二點鐘位置開始以建立時間為基準往順時針方向遞增排序，再者，由於本 Ch engchi U. 論文之視覺化著重於 Facebook 中單一貼文之評論情形，故使用者在接觸視覺化之前應能夠清楚視覺化所呈現之資料集來源，我們將 Sunburst 中心表示貼文本身之 root 區域挖空形成空白區域，以利與時變資料視覺化結合構思直覺式互動之設計。. 23.

(34) 立. 政治大. ‧ 國. 學. 圖 15 以 Sunburst 呈現 Facebook 評論階層式資料，其排序方式依建立時間順時. ‧. 針遞增排序。 (a.) (b.)將滑鼠置於 level 1 之評論所顯示之 tooltip 情形，與將滑鼠置於 level 2 之評論回覆所顯示之 tooltip 情形比較，(c.) (d.)同為 level 1 之評論 Sunburst area 大小相近之情形. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 16 Sunburst area color scale function 示意圖. 24.

(35) 3.4 時間維度變化呈現與直覺式互動設計現有技術用於探索資訊視覺化上資料隨時間變化之特性，可大約分為輔助物件法、動畫法與靜態連續圖法 [5]。輔助物件法通常將一段時間區間分離主視覺化後加以集合，並以小部件（如時間軸）的方式呈現，然而，以時間軸等小型部件簡單呈現時間區間的視覺化方式會很不容易探索資料如何隨著時間變化而改變，而將時間要素抽離主視覺化，並以小型的附屬視覺化進行呈現，雖然是一種快速而且目前被廣泛接受的方法，但使用者可能會因為整體之設計已被分割為兩種呈現方式，而產生分心的反效果，. 政治大粒度與時間元素之取捨與設計，使用者在操作如時間軸等小部件時，也因致力於立. 特別是針對時間特性擁有複雜的性質，除了設計者需要投入大幅的心力探討時間. ‧ 國. 學. 了解資料在該時間點上之意義，需要投入相較於不涉及時間變化要素之視覺化較多的心力，因此，使用者很有可能會因此分心，使注意力偏離主視覺化上的資料. ‧. 呈現與資料隨時間之變化，間接產生視覺混亂與不協調等等影響使用者體驗的效. n. al. er. io. sit. y. Nat. 果。. Ch. engchi. i n U. v. 圖 17 輔助物件法及其呈現方式 [5]. 25.

(36) 動畫法是將主視覺化在不同時間點上的縱觀呈現，以快照的方式儲存，並搭配自動變化的效果達到使用者不需分心操作時間輔助物件即可探索視覺化隨時間變化的脈絡，使得使用者可將注意力集中在主視覺化上，而特別設計的動畫效果如將變化效果加以平滑化，可幫助使用者更容易觀察到不同時間點上，視覺化上資料的重要變化，進而探索重要的資料 [21]，然而，捨棄使用者對時間變化的直接操作方法，意味著使用者無法立即專注於關心特定資料與其特性，因所有的資料之視覺呈現已緊密嵌合於動畫中，並隨著動畫自動進行演變，很容易造成視覺混亂並且由於使用者需要暫停動畫或者記憶其感興趣之時間點，造成分心等不. 政治大靜態連續圖法則是將視覺化隨時間點的變化依序以單一時時間視覺化進行立. 協調之如同輔助物件法的反效果。. 呈現，並通常利用相似於矩陣的排版方式清楚呈現每個時間點的視覺化呈現結果，. ‧ 國. 學. 使得使用者可以非常容易針對特定資料進行分析數值與探索，並清楚瞭解其感興. ‧. 趣之資料於特定時間所呈現的特性，藉由多個時間點以多張視覺化結果的輔助，. y. Nat. 使用者也可以很精密的追蹤其感興趣之資料隨時間變化的特性，然而，當資料集. er. io. sit. 規模與涉及之時間區間擴展至很大的規模時，靜態連續圖法常常會耗費非常大的排版空間來一一排列所有時間點的視覺化呈現結果，使得其原本簡單的排版設計、. al. n. v i n 容易觀察特定數值與容易將單一資料進行不同時間點比較等優點不復存在。且並 Ch engchi U. 不是所有資料都會在某個時間點上會被視覺化呈現出來，使用靜態連續圖法來呈. 現視覺化並不容易比較不同資料點隨時間的變化。. 26.

(37) 圖 18 靜態連續圖法及其呈現方式 [5]. 政治大. 由於靜態連續圖法應用領域相對小，且只適用於需要對於特定資料進行不同. 立. 時間點之分析與比較等情境，針對輔助物件法與動畫法的組合式創新改良，近年. ‧ 國. 學. 來已經出現相當多將輔助物件與主視覺化結合，並透過特殊設計將輔助物件融入主視覺化中避免使用者因需要觀察資料之時間上的變化，造成使用者注意力被輔. ‧. 助物件分散的情形發生，本篇論文透過時變資料視覺化之結果做為輔助物件之轉. y. Nat. sit. 換，並設計滑鼠監聽事件達到使用能夠在觀察視覺化結果的同時，與時變資料視. n. al. er. io. 覺化呈現進行直接的互動。. i n U. v. 本篇論文以 ThemeRiver Graph 呈現資料隨時間變化之輔助物件，因使用者在. Ch. engchi. 接觸視覺化之前應能夠清楚視覺化所呈現之資料集來源為 Facebook 貼文評論資料，我們將 Sunburst 中心表示貼文本身之 root 區域挖空形成空白區域，因此，本論文利用 Sunburst 表示 root 之中心區域空間來繪製 ThemeRiver Graph，將時變資料視覺化融入階層資料視覺化中，期望將兩種不同視覺化呈現結合為單一主視覺化結果。本論文在時變資料視覺化中，透過 D3 所提供之 d3.on()監聽事件 function 與 DOM(Document Object Model) mousemove event，利用滑鼠當前之座標與其移動滑鼠之方式，辨識使用者利用滑鼠於時變資料視覺化上進行移動時，使用者所感興趣之資料是為何者，並取得目前感興趣資料之編號，利用 D3 所提供之 selection function 對應回資料所涉及之主視覺化區塊，由於時變資料視覺化 27.

(38) 之呈現已融入主視覺化中，達到使用者可以避免進行互動時會被輔助物件分散注意力的可能，其觸發機制如圖 19 所示，以 Facebook 粉絲專頁貼文(postid 為 10154233979726509)評論資料為例，若使用者在觀察視覺化呈現結果後，對於時變資料之呈現較感興趣，特別僅具有高按讚數或高回覆數其中一者條件之資料位置，則可將滑鼠放置該位置於 ThemeRiver Graph 之呈現上，則可觸發 d3.on()監聽事件 function 並以 DOM mousemove event 為參數，於 listener callback function 回傳對應之動作，本論文我們希望與階層資料視覺化互相有直覺式互動，故在 listener callback function 先取得滑鼠於 ThemeRiver Graph 位置所對應 level 1 評論. 政治大在階層資料視覺化繪製過程中已一併賦予於 Sunburst area 中，故在取得滑鼠於立. 資料之 dataid，此 dataid 除了賦予在 ThemeRiver Graph 所呈現之資料位置以外，. ThemeRiver Graph 位置所對應 level 1 評論資料之 dataid 之後，我們能夠直接透. ‧ 國. 學. 過 d3.select()方法與該資料所對應之 Sunburst area 進行互動，賦予對應資料之. ‧. Sunburst area 較高之 opacity，且降低其他 Sunburst area 之 opacity，並於對應資料. y. Nat. 之 Sunburst area 中心點顯示 tooltip，顯示該則評論詳細之內文、按讚數、回覆數. er. io. sit. 與建立時間等細節資訊。針對直覺式互動之部分，在使用者將滑鼠放置於 ThemeRiver Graph 中時，使用者並不一定需要精確對準至資料於 ThemeRiver. al. n. v i n Graph 之絕對位置，我們在使用者將滑鼠置於 ThemeRiver Graph 之繪圖區域上 Ch engchi U. 時，抓取滑鼠之 x 坐標，並利用 x 坐標之值利用 d3.scale().invert()方法反推滑鼠目前位置於 ThemeRiver Graph 中所表示之時間點，在透過 d3.bisector()方法推算該時間點最接近原始 Facebook 評論中何筆資料，進而將該筆資料之時間點於 ThemeRiver Graph 中之位置以虛線繪製於 ThemeRiver Graph 之上，並連帶將該筆評論資料之內文、按讚數、回覆數與建立時間等細節資訊顯示於對應之 Sunburst area 中心點，達到時變資料視覺化可與階層資料視覺化進行直覺式互動之效果，其呈現結果如圖 20 所示。. 28.

(39) d3.on(mousemove, listener). dataid. d3.select(“#dataid”). d3.transition(). 圖 19 以 D3 實現 DOM element 溝通與互動之方式. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. i n U. v. 圖 20 將滑鼠置於 ThemeRiver Graph 與 Sunburst 進行直覺式互動示意圖. Ch. engchi. 29.

(40) 第四章實驗結果與討論本論文將在本章節分別對於三篇 Facebook 貼文其評論行為進行視覺化，三篇貼文發表時間依序為台北標準時間 2015 年 11 月 18 日、2015 年 11 月 21 日與 2015 年 11 月 23 日，而本論文進行資料撈取之時間皆為 2015 年 11 月 23 日，三篇貼文中前兩篇分別發表於 CNN（粉絲專頁 id 為 cnn）Facebook 粉絲專頁，而第三篇發表於 BBC News （粉絲專頁 id 為 bbcnews）Facebook 粉絲. 政治大 Graph 與 Sunburst 結合並視覺化上述三篇貼文之第一與第二層評論（評論之回立. 專頁，其貼文皆為 2015 年 11 月法國巴黎襲擊事件議題，本論文以 ThemeRiver. ‧ 國. 學. 覆）情形，ThemeRiver Graph 主要呈現評論出現之時間點與該則評論於本論文撈取資料時間點時得到之按讚量情形，時間序列依序由左至右遞增，Sunburst 主要. ‧. 呈現評論行為之詳細情況，例如該 Sunburst area 隸屬於哪位 Facebook 使用者、. sit. y. Nat. 該使用者評論之內容與該使用者評論得到按讚量，並在第一層評論中以該評論之. al. er. io. 回覆總按讚量作為聲量之高低標準呈現於 Sunburst area 之幾何區域擴張角度大. v. n. 小，以環狀排版中十二點鐘位置開始以評論建立時間為基準往順時針方向遞增排序。. Ch. engchi. i n U. 利用 Sunburst 視覺化，本論文之呈現可以很快速地觀察到，該篇貼文之評論情形中哪些參與評論之使用者得到的聲量相對於其他參與評論之使用者來得高。而利用 ThemeRiver Graph 視覺化，本論文之呈現可以很快速地觀察到，該篇貼文之評論情形中，聲量相對高之參與評論使用者，其評論出現之時間點，並進一步達到探索式資料分析之目的，觀察相對與整體時間來講重要的評論其出現之時間點落在何處。. 30.

(41) 圖 21 TopicWave 視覺化結果架構. 學. ‧ 國. 立. 政治大. ‧. 4.1 實作與實驗環境. sit. y. Nat. 本論文目前的開發環境以 Front-end 為開發環境，使用 JavaScript 並搭配 D3. al. er. io. 撰寫視覺化結果並遵守 D3 繪製視覺化之語法規則。實驗環境上，使用的機器之. v. n. CPU 為 Intel(R) Core(TM) i5-4430 CPU @ 3.00GHz，記憶體大小為 16 GB，作業. Ch. engchi. i n U. 系統為 Windows 7 64 位元作業系統，若在不同作業系統上可運行 Google Chrome V8 JavaScript Engine，則可於不同作業系統上呈現本論文之視覺化結果。. 4.2 實作與實驗結果 4.2.1 布魯塞爾恐怖攻擊警戒於CNN粉絲專頁貼文 2015 年 11 月 13 日，法國巴黎與近郊發生恐怖攻擊事件，地點包括巴黎街區與體育場附近酒吧發生槍擊與爆炸事件，造成一百三十名受害者死亡，近四百人受傷，經過調查後結果顯示襲擊策劃者為比利時籍恐怖分子，該事件發生後引起國際廣泛關注，而在 2015 年 11 月 21 日，比利時升高其首都布魯塞爾恐怖攻擊警戒，以 ”serious and imminent threat” 發布警告，並由 CNN 播報該則新聞且 31.

(42) 轉貼至 CNN Facebook 粉絲專頁(postid 為 10154233979726509)，引起廣泛討論，使得該議題得以流向 Facebook 並被其他社群網路之使用者關注，本論文抓取該篇貼文時間為 2015 年 11 月 23 日，共實際抓取 271 篇評論，保留 67 篇按讚數高於中位數或者至少擁有一則回覆之 level 1，並透過本論文之視覺化結果呈現該貼文之評論行為如圖 22 所示，我們可以透過時變資料視覺化快速得知大量獲得按讚數(深藍色 layer 所表示之資料)與回覆數(淺藍色 layer 所表示之資料)評論所在之時間點，並透過階層資料視覺化快速得知評論中的意見領袖所引起之議題討論詳細情況，且議題幾乎集中在比利時與歐洲對於恐怖攻擊安全措施所採取之對應策略進行討論。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. i n U. v. 圖 22 比利時升高首都布魯塞爾恐怖攻擊警戒於 CNN Facebook 粉絲專頁貼文之評論情況 (a.)TopicWave 呈現結果 (b.)將滑鼠置於 Sunburst area 顯示 tooltip 呈現結果. 32.

(43) 4.2.2 Facebook更換大頭貼響應恐怖攻擊事件於CNN粉絲專頁貼文本篇 Facebook 貼文發表於 2015 年 11 月 18 日，亦透過 CNN 發布於 CNN Facebook 粉絲專頁(postid 為 10154226041916509)，其議題主軸亦著重在 2015 年 11 月 13 日法國巴黎與近郊發生恐怖攻擊事件之討論，由 James Mulvaney 撰寫於 CNN Opinion，主題方向圍繞於 Facebook 為此恐怖攻擊事件表達哀悼，推出更換大頭貼之功能，使大頭貼達成能夠與法國國國旗合成之效果，由於 Facebook 全球使用者眾多，且在台灣知名度高，Facebook 此項功能受到台灣國內外民眾大量的響應，紛紛透過此功能將大頭貼更換與法國國國旗合成之效果之大頭貼，由. 政治大貼的效果，使得該現象被一些評論者質疑透過該功能對法國巴黎與近郊發生恐怖立. 於此功能由 Facebook 官方設計，故 Facebook 使用者可以很簡單的達到更換大頭. 攻擊事件表達哀悼民眾之誠意，使得此項議題不只圍繞在恐怖攻擊事件本身，也. ‧ 國. 學. 得已分歧出著重在 Facebook 大頭貼更換做法與政策之議題討論，本論文抓取該. ‧. 篇貼文時間為 2015 年 11 月 23 日，共實際抓取 1421 篇評論，保留 97 篇按讚數. y. Nat. 高於中位數或者至少擁有一則回覆之 level 1，透過本論文之視覺化結果呈現該貼. er. io. sit. 文之評論行為如圖 23 所示，我們可以透過時變資料視覺化快速得知大量獲得按讚數(深藍色 layer 所表示之資料)與回覆數(淺藍色 layer 所表示之資料)評論所在. al. n. v i n 之時間點，並透過階層資料視覺化快速得知評論中的意見領袖所引起之議題討論 Ch engchi U 詳細情況，透過本論文之視覺化結果可以發現許多評論議題並不在於討論法國巴. 黎恐怖攻擊事件本身，而圍繞在 Facebook 更換大頭貼響應對法國巴黎恐怖攻擊事件表達哀悼功能之討論，甚至出現 Facebook 更換大頭貼為同性戀議題表達支持功能之討論，如圖 23 (b.)所示。. 33.

(44) 圖 23 Facebook 更換大頭貼響應對法國巴黎恐怖攻擊事件表達哀悼之討論於 CNN Facebook 粉絲專頁貼文之評論情況 (a.)TopicWave 呈現結果 (b.)將滑鼠置於 Sunburst area 顯示 tooltip 呈現結果. 立. 政治大. 4.2.3 布魯塞爾恐怖攻擊警戒於BBC News粉絲專頁貼文. ‧ 國. 學. 本篇 Facebook 貼文發表於 2015 年 11 月 23 日，透過 BBC 發布於 BBC News. ‧. 粉絲專頁(postid 為 10153221580447217)，其議題主軸亦著重在 2015 年 11 月. y. Nat. 13 日法國巴黎與近郊發生恐怖攻擊事件之討論，與 2015 年 11 月 21 日，比利時. er. io. sit. 升高其首都布魯塞爾恐怖攻擊警戒，以 ”serious and imminent threat” 發布警告，並由 CNN 播報該則新聞且轉貼至 CNN Facebook 粉絲專頁之議題相同，本論文. al. n. v i n 抓取該篇貼文時間為 2015 年 C 11 月 23 日，共實際抓取 101 篇評論，保留 24 篇按 hengchi U 讚數高於中位數或者至少擁有一則回覆之 level 1，透過本論文之視覺化結果呈現. 該貼文之評論行為如圖 24 所示，可以觀察到一些得到大量按讚數與回覆數之評論議題圍繞在恐怖攻擊事件本身，而 BBC News 粉絲專頁本身亦在其貼文中之評論進行回覆，並得到相較於其他評論之回覆較高之按讚數，如圖 24 (b.)所示。. 34.

(45) 圖 24 比利時升高首都布魯塞爾恐怖攻擊警戒於 BBC News Facebook 粉絲專頁貼文之評論情況 (a.)TopicWave 呈現結果 (b.)將滑鼠置於 Sunburst area 顯示. 立. 政治大 tooltip 呈現結果. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. Ch. engchi. 35. i n U. v.

(46) 第五章評估方法本論文將在本章節描述評估方法之進行流程與設定，依性質將分為先導性研究測試與正式研究測試，藉由先導性研究測試本論文得到寶貴之建議，並檢討評估方法可改善之處，以設計評估方法進行流程與設定更加完善之正式研究測試。. 5.1 先導性研究測試. 政治大覺化之研究結果觀感取決於個人主觀意識，而視覺化研究常用之評估方式為將過立. 本論文重點在於設計並改良既有之時間關聯性資料視覺化呈現方式，由於視. 去既有之呈現方式與改良之方式進行比較，並讓使用者評分挑選出個人感興趣之. ‧ 國. 學. 呈現方式，評估觀察同樣資料之效率是否有明顯減少或者增加，與資料的相仿程. ‧. 度是否明顯上升或降低，並計算使用者判斷思考之時間，本論文利用以上方式之. y. Nat. 評分與紀錄評估研究呈現之結果，進行先導性研究測試，期望增進研究成效。. er. io. sit. 針對 Facebook 粉絲專頁一篇貼文之評論資料，以及本論文所呈現之時變資料視覺化與階層資料視覺化結合之呈現，我們將與時變資料視覺化單一之呈現. al. n. v i n （ThemeRiver-Tree layout，如圖 C h25(a.)所示）以及階層資料視覺化單一之呈現 engchi U （Sunburst-Timeslider layout，如圖 25(b.)所示）進行先導性研究測試之比較，並透過以下五大分類提出問題給受測者進行問答並記錄時間：. 36.

(47) . Retrieve Value Q1.1. 本篇貼文第一則評論「使用者名稱」、「得到之按讚數」、「得到之回覆數」為何？ Q1.2. 本篇貼文位於中位數時間點評論「使用者名稱」、「得到之按讚數」、「得到之回覆數」為何？ Q1.3. 本篇貼文最後一則評論「使用者名稱」、「得到之按讚數」、「得到之回覆數」為何？. . Comparison. 政治大 Q2.2. 請列舉三位獲得高回覆數的「評論者」立 Q2.1. 請列舉三位獲得高按讚數的「評論者」. Q2.3. 請列舉三位獲得高按讚數的「評論回覆者」. ‧ 國. 學. Q2.4. 請列舉一位沒有回覆，但卻有得到按讚數的「評論者」 Characterize Distribution. ‧. . Q3.1. 您認為哪兩個相鄰「時間點」形成的時間區間，兩位評論者得到. y. Nat. sit. 的按讚數變化最大？. n. al. er. io. Q3.2. 您認為哪兩個相鄰「時間點」形成的時間區間，兩位評論者得到的回覆數變化最大？. Ch. engchi. i n U. v. Q3.3. 您認為哪兩個「時間點」（可不相鄰）形成的時間區間，評論行為只有少量的人在參與評論與回覆，並沒有高按讚數、高回覆數的評論意見領袖的存在？ Q3.4. 您認為擁有高按讚數且高回覆數的評論意見領袖大多集中在整體時間的「哪一個區間」（請勾選前段、中段、後段一個選項）？ . Detect Outliers Q4.1. 您認為發布時間最晚之擁有高按讚數、高回覆數的評論意見領袖是「何者」、「得到之按讚數」、「得到之回覆數」？. 37.

(48) . Start and End Time Q5.1. 針對獲得最多按讚數之評論者，並且回答以下其回覆者出現之時間：「第一則回覆」、「最後一則回覆」. 透過先導性研究測試我們獲得兩位受測者之受測答案、受測時間等資料，透過資料我們發現受測者在使用本論文之結果進行互動並尋找答案、回答問題時所花費之時間相對較少，並且給予本論文呈現之結果較正面之回饋，透過統計受測所花費之時間，五大類問題兩位受測者所花費時間如圖 26 所示。. 立. 政治大. ‧. ‧ 國. 學. n. er. io. sit. y. Nat. al. i n U. v. 圖 25 (a.)將階層資料視覺化以樹狀結構呈現之 ThemeRiver-Tree layout (b.)將時變資料視覺化以時間軸呈現之 Sunburst-Timeslider layout. Ch. engchi. 38.

(49) 立. 政治大. ‧ 國. 學. 圖 26 (a.)Retrieve Value 先導性研究測試受測者所花費時間 (b.)Comparison 先導性研究測試受測者所花費時間 (c.)Characterize Distribution 先導性研究測試受測. ‧. 者所花費時間 (d.)Detect Outliers 先導性研究測試受測者所花費時間 (e.)Start and End Time 先導性研究測試受測者所花費時間. sit. y. Nat. io. al. er. 5.2 正式研究測試. v. n. 透過先導性研究測試，本論文得到兩位受測者之測試資料與許多建議，其中，. Ch. engchi. i n U. 以問題設計上之建議最多，由於本論文之先導性研究測試回答問題形式以受測者主動填空答案的形態為主，故得到受測者作答時隨著測驗時間增加，受測者精神與耐心出現疲累問題之意見回饋。有鑒於此，本論文在正式研究測試改變問題之提問方式，以單選或者多選解答之答案，答案之設計非期望受測者必須精確地觀察視覺化之結果，而以概觀之瀏覽視覺化呈現結果即能推敲問題答案為主，並精簡問題類型由五大類縮減至三大類，本論文參考 Rubinstein 等人於 2010 年提出之論文之附屬測驗系統設計[25]，亦設計前測系統，使受測者在進行正式測試之前能夠熟悉本論文之視覺化呈現與欲比較之視覺化呈現，前測與正式測試問題設計如以下所示： 39.