第二章 相關研究
2.3 時序性資料視覺化
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
9
圖2.6 Dimension Reconstruction，摘自[ZHOU et al. 2016]。
2.3 時序性資料視覺化
時序性的資料普遍存在於日常生活中，像是每日每個交通幹道的車流量變化、
每年度各個地區的房價變化等等…，都已經有專用的視覺化工具對於各種資料進 行視覺化的分析。目前已經有許多針對時序性資料進行視覺化的視覺化技術，其 中有許多種視覺化技術是定義在特殊的資料集。以Time Curves [Bach et al.2016]，
針對Wikipedia 的文章編輯紀錄、影片中每個影格的變化，或是一段時間的氣候 變化種種的時序性資料，依照每個時間點的相似程度，將相似的時間點聚集起來 形成一條時間曲線。藉由時間點的分佈觀察出時間點的聚集程度以及時間的流向，
了解到整體時間的變化，如圖2.7。
圖2.7 Time Curves，摘自[Bach et al.2016]。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
10
一般來說，隨時間變化的動態網路的視覺化方法有 Small MultiPiles 或是 Animation，一旦時間點過多使得資料量過於龐大，每個時間點的圖形便會變小，
導致使用者不好觀察每個時間點的差異程度。Small MultiPiles[Bach et al. 2015]提 出將每一個時間點的資料所形成的矩陣，進行相似度的分群，相似的時間點會被 分類到同一個群體中，群體中的時間點之間的差異性，相較於不同群體的時間點 比較起來較小。再透過時間軸把矩陣裡的資料變化呈現出來，如圖2.8。
圖2.8 Small MultiPiles，摘自[Bach et al. 2015]。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
11
第三章
研究方法與步驟
在第三章的部分，我們將會介紹本論文的研究方法以及實作的步驟；首先第 一小節介紹整個系統的架構、流程以及視覺化設計理念，第二小節介紹Facebook 貼文的架構下具備的多種屬性，以及在時間遞移下的貼文組成結構；第三小節以 及第四小節將會介紹主要的視覺化設計以及呈現方法，最後第五小節針對本系統 所設計的互動機制進行介紹，並且能夠在視覺化的結果上能夠幫助使用者進行探 索以及分析。
3.1 系統架構
圖3.1 系統流程圖
整個系統流程分為三個部分，資料搜集、視覺化設計和呈現以及互動的機制。
在資料搜集的部分，使用者可以針對感興趣的粉絲專頁所發佈的貼文進行資料撈 取的動作，我們透過Facebook Developers 提供的 Facebook Graph API ，搭配上 Node.js 提供的 fbgraph 套件針對 Facebook 上的貼文資料進行撈取；撈取下來的 貼文資料包含該貼文的內容以及按讚、留言以及分享…等屬性，並且將撈取出來
‧
切割成多個時間區塊(Time Block)，縮小觀察範圍，讓使用者可以在一定時 間範圍內找出預期的現象。 個粉絲專頁進行一段時間的資料撈取，例如：Greenpeace 綠色和平(台灣網站)在 2016 年於 Facebook 上發佈的所有貼文。首先，在資料撈取的部分，我們利用本實驗室現有的Pagedata 進行資料的撈
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
13
取以及搜集；Pagedata 是透過 Facebook Graph API 針對 Facebook 上公開的貼文 進行資料的撈取，撈取的資料細節裡包含了貼文的內容、按讚數、留言數、分享 數、發佈時間以及留言內容，並且以表格的方式進行資料的呈現，如圖 3.2；同 時，我們也針對單一篇貼文的留言內容進行了表格化的呈現，如圖3.3。
Facebook 上的一篇貼文具備了多種屬性，根據 Facebook 提供給使用者的三 種主要的行為，按讚、留言以及分享，三者會因為 Facebook 使用者不同的行為 而導致了在Facebook 上每一篇貼文具有不同的特色。對於按讚(Like)總和來說，
為六種不同的情緒(Reaction)的加總，在深入可以了解到這篇貼文中六種不同情 緒個別的數量，分別有按讚、大心、哈哈、哇、傷心以及生氣；針對留言(Comment) 來說，一則留言底下可以有數篇的回應(Reply)。根據上述的分析，我們整理出一 篇在Facebook 上發布的貼文可以擁有按讚總數、六種情緒個別的數量、留言總 數、單一留言平均回應數、分享總數以及貼文內容字數共11 種屬性。
因此，我們將Facebook 的貼文結構視為一種具有多種維度的資料集；另外，
因為 Facebook 上的貼文內容與現實世界上發生的事件會有相互對應的情況也將 其視為一種具有時序性的資料集。所以，以表格方式進行資料呈現無法有效率的 看出資料伴隨著時間流動所產生的特性或是趨勢。
圖3.2 Pagedata：Facebook 粉絲專頁貼文撈取工具
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
14
圖3.3 單一貼文之留言呈現工具
由於Pagedata 撈取下來的 Facebook 貼文資料是以一篇貼文為一個單位，而 我們希望可以得到 Facebook 粉絲專頁單日累積的貼文屬性，但同時又不會失去 每一篇貼文獨自的屬性；因此，我們將撈取下來的貼文資料依照其貼文發布時間 進行階層化的處理，初步分為三個階層，如圖 3.4。第一層為粉絲專頁，第二層 為撈取區間內的所有日期，第三層則為粉絲專頁於當日發布的所有貼文。由於粉 絲專頁不一定會每一天都發布貼文，所以會有第二層日期卻沒有第三層貼文的情 況產生。因此我們得到了以時間為主的階層化的貼文資料集，以提供粉絲專頁進 行視覺化的設計以及呈現。
圖3.4 依照日期合併後的階層關係
‧
在上一個小節，提到了由於Facebook 上貼文的結構，我們將 Facebook 的資 料集視為一種具備多維度的資料集，並且因為 Facebook 使用者的行為不同導致 每篇貼文會在屬性上產生不一樣的特色，例如：按讚數高的貼文留言數也相對的
‧
降維(Dimensional Reduction)是一種將高維度的資料集降低成低維度的資料 集的方法，其中卻又不會失去資料與資料之間的特性，透過將降維成為低維度的 資料集進行視覺化的呈現，我們能夠有效的觀察資料與資料之間的相似關係，例 如：將資料集降低成二維度的資料集，即可散佈在二維空間中，資料與資料之間 的距離及代表了兩筆資料的相似程度。Multidimensional Scaling(MDS)一種常見 的降維演算法，MDS 透過將資料點散佈在二維空間中，其中資料點與資料點之 間的距離代表了彼此在原始資料集中的相似程度。
本 論 文 採 用 t-distributed stochastic neighbor embedding(t-SNE) 演 算 法 [MAATEN et al. 2008]，是一種降維演算法，在資料從高維空間降低成二維空間 時，同時能夠最大限度地保留資料之間的關係。
以下將簡述t-SNE 的流程，以具有𝑛篇貼文的貼文資料集為例：
首先，將貼文資料集中的所有貼文兩兩一組，建立成一個Euclidean Distance Matrix 𝐷𝑃 ∈ 𝑅𝑛×𝑛，接者將𝐷𝑃轉換成機率矩陣Ｐ ∈ 𝑅𝑛×𝑛，其中：
最後，t-SNE 會基於 gradient descent 的方式，反覆地更新每一筆資料在二維 空間上的座標點，直到下述式子得出的數字為最小或是不再變動；
‧
言總數、分享總數、回應總數以及六種情緒的數量…等等。我們將其中與Facebook 使用者行為最直接相關的屬性挑選出來作為我們進行降維演算法的維度。我們挑 的孤立點產生，因此，我們將每個屬性進行Normalization。在進行 Normalization 的時後，我們針對 Facebook 貼文架構下所具備的每個屬性，分別找出每一個屬 性的最大值與最小值；由於每一個屬性的數值範圍不相同，所以，將每一個屬性 的數值範圍縮小到 0 到１之間，藉此確保每一個屬性的數值可以在相同的範圍 內，讓每一個屬性可以在公平的條件下進行降維，避免了有過高的按讚數所導致 的孤立點產生，如圖3.5 (B)。另外，我們將六種情緒中的按讚(Like)捨棄掉，因為上述所說的 Facebook 使 用者會以按讚的情緒貼圖來表達看過一篇貼文，因此按讚會在六種情緒中佔有龐 大的數量；另外，具有大量的按讚總數的貼文，個別的情緒數量也會比較高，在 情緒的部分，我們希望以比例的關係來表達 Facebook 使用者看到一篇貼文的情 緒變化；因此，我們將剩下的五種情緒，大心(Love)、哈哈(Haha)、哇(Wow)、傷 心(Sad)以及生氣(Angry)，將真實數值轉換成百分比，例如：30 個人給予大心、
10 個人給予哈哈、10 個人給予哇、40 個人給予傷心以及 10 個人給予生氣，那 轉換 下來的百分比會為 30%的大心、10%的哈哈、10%的哇、40%的傷心以及
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
18
10%的生氣；接著就將轉換出來的五種情緒百分比取代了五種情緒的真實數值進 行降維演算法的計算。
圖3.5 A 圖為未經過 Normalization 的貼文資料集進行 t-SNE 的結果。B 圖 為經過Normalization 的貼文資料集進行 t-SNE 的結果。
最後，介紹我們會進行降維演算法的8 個維度，分別有按讚總數、分享總數 以及留言總數，上述三個維度皆有進行 Normalization 的行為，再加上五個情緒 貼圖的百分比的分配；接下來會介紹我們如何對t-SNE 的降維流程進行改變。
由於t-SNE 演算法是以隨機的方式產生最初的座標點，若同一筆的貼文資料 集在不同時間點分析，進行降維動作過後的貼文座標點並不會一模一樣，導致使 用者在第一次之後於同一筆資料集中進行探索動作時，會因為貼文位置的不同需 要重複地進行探索動作，找出與第一次探索時相同的結論，我們不希望看到本系 統的使用者因為要找到相同的結論而重複操作，導致時間的流失。
根據上述說明，本研究最終希望在同一筆貼文資料集經過降維過後的結果能 夠產生固定的座標點；相較於原始的t-SNE 演算法採用隨機的方式決定貼文資料 集的座標初始位置，我們先將貼文資料集進行MDS 的降維演算法，得到在每篇 貼文二維空間的位置，並且將此MDS 產生出來的位置視為 t-SNE 的初始座標點，
藉此確保 t-SNE 的結果可以維持同一筆貼文資料集能夠產生出同一種貼文散佈
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
19
結果。
在觀察 Facebook 上面的一篇貼文時候，我們發現使用者常常會先著眼於一 篇貼文有多少按讚總數、分享總數以及留言總數，最後再細細的看到貼文中其他 較為細部的屬性，像是六種情緒的數量、留言的內容甚至留言下的回應。因此在 進行t-SNE 演算法之間，首先，我們先將使用上述所提到的 8 個維度分成兩個組
在觀察 Facebook 上面的一篇貼文時候，我們發現使用者常常會先著眼於一 篇貼文有多少按讚總數、分享總數以及留言總數，最後再細細的看到貼文中其他 較為細部的屬性，像是六種情緒的數量、留言的內容甚至留言下的回應。因此在 進行t-SNE 演算法之間，首先，我們先將使用上述所提到的 8 個維度分成兩個組