第三章 研究方法與步驟
3.4 時間維度變化呈現與直覺式互動設計
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
25
3.4 時間維度變化呈現與直覺式互動設計
現有技術用於探索資訊視覺化上資料隨時間變化之特性，可大約分為輔助物 件法、動畫法與靜態連續圖法 [5]。
輔助物件法通常將一段時間區間分離主視覺化後加以集合，並以小部件（如 時間軸）的方式呈現，然而，以時間軸等小型部件簡單呈現時間區間的視覺化方 式會很不容易探索資料如何隨著時間變化而改變，而將時間要素抽離主視覺化，
並以小型的附屬視覺化進行呈現，雖然是一種快速而且目前被廣泛接受的方法，
但使用者可能會因為整體之設計已被分割為兩種呈現方式，而產生分心的反效果，
特別是針對時間特性擁有複雜的性質，除了設計者需要投入大幅的心力探討時間 粒度與時間元素之取捨與設計，使用者在操作如時間軸等小部件時，也因致力於 了解資料在該時間點上之意義，需要投入相較於不涉及時間變化要素之視覺化較 多的心力，因此，使用者很有可能會因此分心，使注意力偏離主視覺化上的資料 呈現與資料隨時間之變化，間接產生視覺混亂與不協調等等影響使用者體驗的效 果。
圖 17 輔助物件法及其呈現方式 [5]
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
26
動畫法是將主視覺化在不同時間點上的縱觀呈現，以快照的方式儲存，並搭 配自動變化的效果達到使用者不需分心操作時間輔助物件即可探索視覺化隨時 間變化的脈絡，使得使用者可將注意力集中在主視覺化上，而特別設計的動畫效 果如將變化效果加以平滑化，可幫助使用者更容易觀察到不同時間點上，視覺化 上資料的重要變化，進而探索重要的資料 [21]，然而，捨棄使用者對時間變化的 直接操作方法，意味著使用者無法立即專注於關心特定資料與其特性，因所有的 資料之視覺呈現已緊密嵌合於動畫中，並隨著動畫自動進行演變，很容易造成視 覺混亂並且由於使用者需要暫停動畫或者記憶其感興趣之時間點，造成分心等不 協調之如同輔助物件法的反效果。
靜態連續圖法則是將視覺化隨時間點的變化依序以單一時時間視覺化進行 呈現，並通常利用相似於矩陣的排版方式清楚呈現每個時間點的視覺化呈現結果，
使得使用者可以非常容易針對特定資料進行分析數值與探索，並清楚瞭解其感興 趣之資料於特定時間所呈現的特性，藉由多個時間點以多張視覺化結果的輔助，
使用者也可以很精密的追蹤其感興趣之資料隨時間變化的特性，然而，當資料集 規模與涉及之時間區間擴展至很大的規模時，靜態連續圖法常常會耗費非常大的 排版空間來一一排列所有時間點的視覺化呈現結果，使得其原本簡單的排版設計、
容易觀察特定數值與容易將單一資料進行不同時間點比較等優點不復存在。且並 不是所有資料都會在某個時間點上會被視覺化呈現出來，使用靜態連續圖法來呈 現視覺化並不容易比較不同資料點隨時間的變化。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
27
圖 18 靜態連續圖法及其呈現方式 [5]
由於靜態連續圖法應用領域相對小，且只適用於需要對於特定資料進行不同 時間點之分析與比較等情境，針對輔助物件法與動畫法的組合式創新改良，近年 來已經出現相當多將輔助物件與主視覺化結合，並透過特殊設計將輔助物件融入 主視覺化中避免使用者因需要觀察資料之時間上的變化，造成使用者注意力被輔 助物件分散的情形發生，本篇論文透過時變資料視覺化之結果做為輔助物件之轉 換，並設計滑鼠監聽事件達到使用能夠在觀察視覺化結果的同時，與時變資料視 覺化呈現進行直接的互動。
本篇論文以 ThemeRiver Graph 呈現資料隨時間變化之輔助物件，因使用者在 接觸視覺化之前應能夠清楚視覺化所呈現之資料集來源為 Facebook 貼文評論資 料，我們將 Sunburst 中心表示貼文本身之 root 區域挖空形成空白區域，因此，本 論文利用 Sunburst 表示 root 之中心區域空間來繪製 ThemeRiver Graph，將時變 資料視覺化融入階層資料視覺化中，期望將兩種不同視覺化呈現結合為單一主視 覺化結果。本論文在時變資料視覺化中，透過 D3 所提供之 d3.on()監聽事件 function 與 DOM(Document Object Model) mousemove event，利用滑鼠當前之座 標與其移動滑鼠之方式，辨識使用者利用滑鼠於時變資料視覺化上進行移動時，
使用者所感興趣之資料是為何者，並取得目前感興趣資料之編號，利用 D3 所提 供之 selection function 對應回資料所涉及之主視覺化區塊，由於時變資料視覺化
‧
置，則可將滑鼠放置該位置於 ThemeRiver Graph 之呈現上，則可觸發 d3.on()監 聽事件 function 並以 DOM mousemove event 為參數，於 listener callback function 回傳對應之動作，本論文我們希望與階層資料視覺化互相有直覺式互動，故在 listener callback function 先取得滑鼠於 ThemeRiver Graph 位置所對應 level 1 評論 資料之 dataid，此 dataid 除了賦予在 ThemeRiver Graph 所呈現之資料位置以外，在階層資料視覺化繪製過程中已一併賦予於 Sunburst area 中，故在取得滑鼠於 ThemeRiver Graph 位置所對應 level 1 評論資料之 dataid 之後，我們能夠直接透 過 d3.select()方法與該資料所對應之 Sunburst area 進行互動，賦予對應資料之 Sunburst area 較高之 opacity，且降低其他 Sunburst area 之 opacity，並於對應資料 之 Sunburst area 中心點顯示 tooltip，顯示該則評論詳細之內文、按讚數、回覆數 與建立時間等細節資訊。針對直覺式互動之部分，在使用者將滑鼠放置於 ThemeRiver Graph 中時，使用者並不一定需要精確對準至資料於 ThemeRiver Graph 之絕對位置，我們在使用者將滑鼠置於 ThemeRiver Graph 之繪圖區域上 時，抓取滑鼠之 x 坐標，並利用 x 坐標之值利用 d3.scale().invert()方法反推滑鼠 目前位置於 ThemeRiver Graph 中所表示之時間點，在透過 d3.bisector()方法推算 該時間點最接近原始 Facebook 評論中何筆資料，進而將該筆資料之時間點於 ThemeRiver Graph 中之位置以虛線繪製於 ThemeRiver Graph 之上，並連帶將該 筆評論資料之內文、按讚數、回覆數與建立時間等細節資訊顯示於對應之 Sunburst area 中心點，達到時變資料視覺化可與階層資料視覺化進行直覺式互動 之效果，其呈現結果如圖 20 所示。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
29
圖 19 以 D3 實現 DOM element 溝通與互動之方式
圖 20 將滑鼠置於 ThemeRiver Graph 與 Sunburst 進行直覺式互動示意圖 d3.on(mousemove, listener)
d3.select(“#dataid”) d3.transition() dataid
‧
覆）情形，ThemeRiver Graph 主要呈現評論出現之時間點與該則評論於本論文撈 取資料時間點時得到之按讚量情形，時間序列依序由左至右遞增，Sunburst 主要‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
31
圖 21 TopicWave 視覺化結果架構
4.1 實作與實驗環境
本論文目前的開發環境以 Front-end 為開發環境，使用 JavaScript 並搭配 D3 撰寫視覺化結果並遵守 D3 繪製視覺化之語法規則。實驗環境上，使用的機器之 CPU 為 Intel(R) Core(TM) i5-4430 CPU @ 3.00GHz，記憶體大小為 16 GB，作業 系統為 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 播報該則新聞且
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
32
轉貼至 CNN Facebook 粉絲專頁(postid 為 10154233979726509)，引起廣泛討論，
使得該議題得以流向 Facebook 並被其他社群網路之使用者關注，本論文抓取該 篇貼文時間為 2015 年 11 月 23 日，共實際抓取 271 篇評論，保留 67 篇按讚數高 於中位數或者至少擁有一則回覆之 level 1，並透過本論文之視覺化結果呈現該貼 文之評論行為如圖 22 所示，我們可以透過時變資料視覺化快速得知大量獲得按 讚數(深藍色 layer 所表示之資料)與回覆數(淺藍色 layer 所表示之資料)評論所在 之時間點，並透過階層資料視覺化快速得知評論中的意見領袖所引起之議題討論 詳細情況，且議題幾乎集中在比利時與歐洲對於恐怖攻擊安全措施所採取之對應 策略進行討論。
圖 22 比利時升高首都布魯塞爾恐怖攻擊警戒於 CNN Facebook 粉絲專頁貼文 之評論情況 (a.)TopicWave 呈現結果 (b.)將滑鼠置於 Sunburst area 顯示 tooltip
呈現結果
‧
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 使用者可以很簡單的達到更換大頭 貼的效果，使得該現象被一些評論者質疑透過該功能對法國巴黎與近郊發生恐怖
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
34
圖 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 月 13 日法國巴黎與近郊發生恐怖攻擊事件之討論，與 2015 年 11 月 21 日，比利時 升高其首都布魯塞爾恐怖攻擊警戒，以 ”serious and imminent threat” 發布警告，
本篇 Facebook 貼文發表於 2015 年 11 月 23 日，透過 BBC 發布於 BBC News 粉絲專頁(postid 為 10153221580447217)，其議題主軸亦著重在 2015 年 11 月 13 日法國巴黎與近郊發生恐怖攻擊事件之討論，與 2015 年 11 月 21 日，比利時 升高其首都布魯塞爾恐怖攻擊警戒，以 ”serious and imminent threat” 發布警告，