第三章 研究方法與步驟
3.5 互動機制設計
3.5.2 時間區塊的互動操作
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
27
圖3.17 連續貼文的細節比較以及散佈圖上的時間曲線
3.5.2 時間區塊的互動操作
時間區塊為主的互動設計中，使用者會透過觀察不同的時間區塊找出多個相 似度高的時間區塊，例如：兩個時間區塊都有出現當日累積較多按讚數、留言數 或是分享數的日期，使得時間區塊的圖形有突出的現象產生；或是，觀察到時間 區塊中有連續幾天 Facebook 粉絲專頁發佈的貼文數量特別多，會在時間區塊的 圖形中產生許多小區塊。使用者在觀察不同時間區塊的過程中，會在其中發現不 同時間區塊會具有各自的特色；因此，使用者可以去選擇任意兩個時間區塊進行 比較。
我們提供使用者可以切換三種不同的屬性，分別為 Facebook 使用者對於一 篇貼文中最關心的按讚總數(Like)、分享總數(Share)以及留言總數(Comment)，使 用者可以在此三種屬性中進行切換，時間區塊中的貼文的半徑差也會根據選取的 屬性得到的數值進行貼文圖形的繪製；透過切換不同種的屬性，使用者可以觀察 不同屬性下時間區塊的變化，如圖3.18。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
28
圖3.18 切換不同屬性。圖(A)屬性為 Like，圖(B)屬性為 Comment，圖(C)屬 性為Share，圖(D)切換按鈕。
使用者選取了兩個時間區塊後，系統會在貼文散佈圖中同時會將兩個時間區 塊中發佈的貼文進行 Highlight 的呈現，透過此種視覺化的互動，讓使用者了解 到兩個時間區塊的貼文在貼文散佈圖中的分布；由於，使用者已經在散佈圖觀察 的過程中對於貼文在散佈圖中的位置意義有一定的了解，能夠幫助使用者更加了 解時間區塊中的貼文受到Facebook 使用者的關注程度，如 圖 3.19。
圖3.19 時間區塊的互動設計
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
29
時間區塊的互動設計與上述討論到的貼文散佈圖得互動設計相同，系統會統 計兩個選取的時間區塊中貼文的各個屬性的統計數值，紅色標籤的區塊對應紅色 外框的數值，藍色標籤的區塊對應到藍色外框的數值；讓使用者可以了解到兩個 時間區塊的整體受到 Facebook 使用者關注度程度；並且，系統會計算出兩個時 間區塊中出現的關鍵字次數，關鍵字的擷取方式以及排序方法與上述貼文散佈圖 為主的互動設計一樣，透過關鍵字在不同時間區塊出現的次數以及時間區塊整體 受到 Facebook 使用者的關注程度，進一步地判斷出時間區塊中的受到使用者高 度關注的字彙，或是此種字彙因為何種原因在不同的時間區塊無法受到Facebook 使用者的青睞，如圖3.18。
圖3.20 時間區塊關注度判斷與其關鍵字
‧
覺化分析，資料來源為Facebook 上的公開粉絲專頁 Greenpeace 綠色和平(台灣網 站)於 2016 年度發布的所有貼文資料，資料內容包含了按讚數、留言數、分享數、 化的呈現與互動上，使用者可以觀察出具有特色的Time Block，例如：發佈貼文 數量特別多、單日具有6 篇以上的貼文、有多篇貼文具備高數值的屬性…等等現 象，透過觀察Time Block 中貼文於散佈圖的位置，可以了解到 Time Block 整體 的關注度的差異，關鍵字的出現的頻率也能夠使 Time Block 與現實事件進行連 接。‧
以及互動機制的設計。D3.js 是一款能夠進行多種視覺化設計的 Javascript 函式 庫。在實驗環境上，機器的作業系統為Windows 10 64 位元作業系統，機器裝載 的CPU 為 Intel(R)Core(TM)i7-6700 CPU @ 3.40GHz；記憶體大小為 16G。在貼 文數量為1000 篇以下的貼文資料集當中，所花費時間 20 秒到 30 秒之間，貼文‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
32
圖4.1 單一粉絲專頁視覺化
圖4.2 散佈圖的不同群聚貼文的比較
接下來，我們進一步的觀察了左下方以及右上方的貼文群集在Time Block 發 佈的時間，發現到了藍色Brush 區域的貼文在 Time Block 具有較突出的特色，如 圖 4.3，藍色 Brush 區域的貼文不僅僅是有較突出的特色，我們也觀察到了藍色 Brush 區域的貼文在 Time Block 中具有連續性，也就是說粉絲專頁在那個時間發 佈的貼文受到 Facebook 使用者相同的關注度以及特性，以藍色 Brush 區域的貼
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
33
文為例，它們在嗚(Sad)以及生氣(Angry)兩種情緒具有較高的比例。另外，在關 鍵字的出現次數比較我們發現「臺灣」、「北極」、「塑膠」以及「海洋」四個詞彙 在藍色Brush 區域的貼文出現次數相較於紅色多出許多，也可以說明三個詞彙在 貼文內容出現的時候，Facebook 使用者常會對於貼文內容感到比較傷心或是生 氣，如圖4.4。
圖4.3 貼文散佈圖與Time Block 的比較
圖4.4 貼文散佈圖與關鍵字比較
上述我們是從貼文散佈圖的觀點觀察資料集的特色，接下來我們會反過來透 過Time Block 的觀點進行資料的探索。圖 4.5 為 Greenpeace 綠色和平(台灣網站)
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
34
於2016 年度的 Time Block 的呈現圖，我們發現在第二個 Time Block 以及第七個 Time Block 皆有特別突出的貼文；另外，在第 11 個 Time Block 中有單日發布超 過 4 篇貼文的日期存在。利用互動機制將發現了第七個以及第二個 Time Block 特別突出的那幾篇貼文皆出現在散佈圖的右上角，而在上述我們又觀察到在散佈 圖中右上角的貼文，在嗚(Sad)以及生氣(Angry)兩種情緒較為突出。
圖4.5 Time Block 視覺化呈現圖
圖4.6 具特色的Time Block vs 貼文散佈圖
另外，在觀察第二個以及第七個Time Block 與關鍵字的比對中，如圖 4.7，
出現一個對環境有害的物質「PFCs」在關鍵字的統計中出現次數為所有關鍵字的
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
35
第四高，其中關鍵字「PFCs」在第二個 Time Block 中的貼文提到的次數(藍色 Bar) 遠比第七個Time Block 的次數(紅色 Bar)多出許多；另外有提到「PFCs」的貼文 在散佈圖中出現在貼文的右上方居多，標記的顏色為藍色，只有少數紅色標記的 貼文出現在右下方。最後，我們透過本系統在探索其他Time Blocks 的過程中，
也發現到「PFCs」、「北極」與「塑膠」為 Facebook 使用者較為關注的關鍵字，
有這兩個關鍵字出現的貼文，比較容易獲得大量Facebook 使用者的回應。
圖4.7 Time Block vs 關鍵字
4.2.2 兩個粉絲專頁比較觀察
在 Facebook 上存在成千上萬個粉絲專頁，其中探討具有相似性質的粉絲專 頁，可以幫助我們瞭解到相同性質的粉絲專頁中活動的 Facebook 使用者之間關 注程度的差異；因此，當一件事件發生的時候，粉絲專頁會因為該事件而發佈相
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
36
關內容的貼文，當有重大事件發生時，相似性質的粉絲專頁所發佈的貼文會有所 差異，因此造成不同粉絲專頁的 Facebook 使用者會有不一樣的反應；在此小節 我們將針對這個現象進行觀察並且探討。
圖4.8 為 CNN 與 Reuters 於 2017 年 5 月 2 號到 2017 年 7 月 29 號之間，兩 個粉絲專頁發佈的影片貼文。圖 4.8 中所有粉紅色的物件皆為 CNN 的貼文、所 有淺藍色的物件皆為Reuters 發佈的貼文，在 Time Blocks 的部分，我們以 15 天 為一個單位將整個時間軸切割成六個Time Block，進行視覺化的呈現；因此，兩 個粉絲專頁加起來會有12 個 Time Block。另外，在正規化每一個屬性的時候，
我們將兩個粉絲專頁的貼文分開進行正規化的動作；此動作是為了讓使用者專注 於比較兩個粉絲專頁的差異，也避免因為粉絲專頁中粉絲人數的多寡影響到了比 較的基準；貼文散佈圖的Brushing-Linking 功能，從可以同時圈選兩個區域變更 成允許圈選單一區域產生，並且同時將該區域所涵蓋兩個粉絲專頁的貼文於 Time Block 進行 Highlight 動作。
圖4.8 CNN 與 Reuters
在貼文散佈圖中，我們發現大部分淺藍色貼文也就是Reuters 發佈的貼文聚 集在散佈圖的下半部；而CNN 的貼文分布就稍微偏向散佈圖的上半部，如圖 4.9。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
37
而在系統中，貼文散佈圖是根據貼文與貼文之間其各個屬性彼此的相似程度，進 一步地將貼文分散配置在散佈圖中；因此可以從散佈圖觀察到CNN 與 Reuters 兩 個粉絲專頁的貼文會有相當的差異性存在。
圖4.9 觀察CNN 與 Reuters 貼文散佈圖
本系統的使用者可以透過貼文散佈圖中 Brushing-linking 功能在貼文散佈圖 中進行深度的探索，我們發現了在貼文散佈圖中留言數較少以及按讚數較少的貼 文，大多集中在貼文散佈圖的上方的區域；而按讚數高的貼文集中在貼文散佈圖 的右半部分，留言數較高的貼文則是在於散佈圖中的左下的區域出現，這個現象 說明了具有大量按讚數的貼文，在留言的數量並不會因為有大量的按讚數就有大 數字的產生。
進一步地，我們將目光轉向了按讚數裡各個情緒的數量，在留言數及按讚數 少的貼文中，五種情緒的比例相對的也比較低；在貼文散佈圖的左下區域中，具 有上述留言數較高的特性的貼文群集，其中哈哈(Haha)以及生氣(Angry)兩個情緒 的數量比其他三個情緒高出許多；將Brush 的區域往散佈圖的右半邊移動，Brush 圈出的貼文群集不同而按讚數有升高以及留言數降低的趨勢，在五種情緒的部分，
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
38
生氣(Angry)的數量相較於散佈圖左下區域的貼文低，相對應的大心(Love)以及哇 (Wow)的數量有提高的現象產生。而在按讚數較高的貼文區域，則是大心(Love) 在五種情緒中佔有較高的比例，如圖4.10。
圖4.10 貼文散佈圖中五種情緒之變化趨勢
上述在貼文散佈圖中得到的資訊，我們搭配上關鍵字的統計圖表，發現了在 貼文散佈圖左下角區域的貼文，大量的出現了「President」以及「Trump」…等關 鍵詞彙能夠代表新上任的美國總統川普的詞彙；再搭配上貼文在Time Blocks 上 得知貼文發佈的時間點，我們發現了在左下角的貼文在所有的Time Blocks 皆有 貼文存在，以及我們已經知道左下角的貼文具有哈哈(Haha)以及生氣(Angry)較高 比例的資訊，推斷出在兩個粉絲專頁中貼文內容裡有關於美國總統川普的關鍵詞 彙會令Facebook 使用者感到生氣(Angry)或是哈哈(Haha)的比例較高，如圖 4.11。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
39
另外，於CNN 以及 Reuter 第二個 Time Block 中的 7 點鐘方向的位置，兩個粉絲 專頁都有出現一篇具有較高半徑差的貼文，代表該貼文具有較高的留言數、按讚 數以及分享數，兩篇貼文出現在日期分別為 2017 年 5 月 27 號以及同月份的 26
另外，於CNN 以及 Reuter 第二個 Time Block 中的 7 點鐘方向的位置，兩個粉絲 專頁都有出現一篇具有較高半徑差的貼文，代表該貼文具有較高的留言數、按讚 數以及分享數，兩篇貼文出現在日期分別為 2017 年 5 月 27 號以及同月份的 26