第二章 相關研究
2.3 時間序列與階層式資料結構化標準
國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
8
達 parent-child 結構，但隱性表達方式如 Treemap [22] 視覺化其優勢在於能夠 比顯性表達方式更清楚的呈現樹狀結構中各節點的屬性，例如各節點類型或者是 資訊量高低，且能夠較有效率地進行比較。
而對於資訊量偏低的節點，在 Sunburst 中的呈現卻有其缺點，起因於其幾 何區域擴張角度會被其他資訊量相對高之節點壓縮，導致擴張角度較小而 Sunburst 中會出現部分零碎區域的情況，該篇論文即對此情況提出三種改良方法，
使得使用者在使用隱性階層資料視覺化時，能夠更有效地觀察並與資訊量相對較 低的訊息互動。
圖 5 針對 Sunburst 零碎區域視覺化之改良方法其一 [10]
2.3 時間序列與階層式資料結構化標準
Rind 等人在 2013 年提出 TimeBench，該研究致力於解決設計時間關聯性資 料視覺化過程中會碰到的問題 [6]，由於時間是一種特殊的維度，不同於一般計 量所使用的維度，時間擁有各式各樣的粒度，導致開發者在設計視覺化演算法時 需要耗費大量的時間成本針對少數研究上所關注的案例重新設計特定的解決方 法 (ad-hoc)，且無法有彈性地活用在其他案例上，以諸多會運用到時間序列資料 之領域為例，常見的有電子醫療紀錄、網路流量紀錄等，再者，在缺乏一套結構 化標準的情況下，開發者往往會因為無法透過一套標準輔助來互相與其他研究合
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
9
作或進行比較，故 TimeBench 設計了一套針對時間關聯性資料視覺化的資料結 構與演算法設計方式，對時間維度定義三種重要的模型與結構－時間粒度 (granularities)、時間元素(time primitives)、時間不確定性 (determinacy)，希望能 基於對時間定義其設計準則，進而推廣到演算法與資料結構的設計考量上，使往 後針對時間關聯性資料視覺化之研究能有一套標準可以參考，減少開發上所耗費 的時間成本。
圖 6 時間維度上的粒度與時間元素之關係 [6]
2013 年，Dou 等人提出 HierarchicalTopics [7]，表達出在這個資訊爆炸，
且社群媒體已成為人們生活中不可或缺接收或傳達資訊的重要媒介，資訊產生的 速度非常迅速，導致大量的資訊對分析上也造成一定程度的困難性，但這些巨量 資料的背後隱藏未被發掘且豐富的研究價值，該研究著重在如何高效率地分析資 料，並提出三個期望高效率分析所會面臨的設計問題－如何有效率地將各自分散 之議題組織成主題、如何透過視覺化結果表達主題所要傳達之訊息，並允許使用 者進行互動式操作依照需求對主題之組織進行更改、如何分析議題中隱含的訊息，
改進組織主題的結構能夠表達更明確的視覺化結果。該研究針對上述設計提出 Topic Rose Tree ( TRT )演算法，能夠自動地將議題產生階層式架構，並且能透過 使用者改變視覺化間接更改 TRT 演算的結果，並採用 stacked graph 的呈現方 式表達主題之間隨時間變化所隱含的訊息。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
10
圖 7 Topic Rose Tree (TRT) 演算法的三種主要操作 [7]
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
11
第三章 研究方法與步驟 3.1 系統架構
圖 8 系統流程圖
本論文目前利用 ThemeRiver Graph 呈現時變資料視覺化，由於時變資料視 覺化需要時變性資料配合方能進行呈現，而本論文主要研究之資料集來自於 Facebook Graph API ， 並 希 望 呈 現 Facebook 上 粉 絲 專 頁 與 其 貼 文 之 評 論 (comments)資料行為隨時間變化之情形，但除了評論資料本身與回覆所發布之時 間外，按讚資料並無時間記錄，故在 ThemeRiver Graph 上之呈現，本論文採用每 筆評論資料當前即時之按讚數做為 ThemeRiver Graph 所呈現之 layers 其中之一，
並以當前即時之回覆數做為另一層 layer 使得使用者能夠在時變資料視覺化上觀 察兩者之關係。
而針對階層資料視覺化，本論文利用 Sunburst 呈現 Facebook 上行為中的聲 量比例，聲量代表某些議題得到大眾關注的廣度，而在社群網路中，按讚是其中 最能代表 Facebook 特色的社群行為，當一位 Facebook 使用者想對一則評論表 達同意與支持，成本最低之方式能透過按讚來表現，故聲量的大小能以得到的按 讚數量來代表，本論文將按讚數進而轉換為 Sunburst area 的大小與顏色深淺，
並藉由 Sunburst 屬於階層資料隱性表達的特性，有效地利用環狀排列的特色易
‧
‧
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
14
上二者可直接決定 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 (1) 𝑔𝑖 = 𝑔0+ ∑𝑖𝑗=1𝑓𝑗 (2) 而下圖為遵照以上公式定義表示 n = 2 時之情形 [3]。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
15
不同類型之 Stacked Graph 差異在於 baseline function g0 取捨，最簡易之 Traditional Stacked Graph 其 g0 公式如下：
𝑔0 = 0 (3)
利 用 以 上 g0 公 式 繪 製 圖 形 ， 並 搭 配 Facebook 粉 絲 專 頁 貼 文 (postid 為 10154233979726509)評論資料將會呈現如圖 10 之結果，為了盡可能地突顯所有 評論資料於時變資料視覺化中的呈現結果，針對 Facebook 按讚、評論、分享行 為皆接近並集中在貼文剛建立不久之時間點，我們將時變資料視覺化結果在水平 方向上進行非線性擠壓與延伸，將所有評論之建立時間點之中位數其對應之資料 所呈現之位置固定置於排版空間之中央，如圖 9 所示。
圖 9 時變資料視覺化沿水平方向進行非線性擠壓與延伸示意圖。(a.)原始資料 之呈現結果 (b.)進行非線性擠壓與延伸之呈現結果
而在視覺化中淺藍色 layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評論當前即時按讚數之呈現，圖形之底部平貼於傳統二維坐標圖形 之 x 軸，在此圖形排版的結果下，每個 layer 所表達的數值總和能夠透過垂直 地觀察圖 形在 y 軸 方向上的 長度大 小， 來清楚感 受到資 料的 特性 ，透過 Traditional Stacked Graph 之呈現可以觀察到在一些時間點上，即時按讚數與即時 評論數形成一些高峰，代表在該時間點上其貼文出現了具有代表性之評論，這些
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
16
評論接受到大量的按讚與回覆，可能是評論者提出了有趣的觀點或者是值得被討 論的議題，才得以在綜觀整個貼文評論情形，以突出之姿形成高按讚數與高回覆 數，是值得使用者加以分析與探討的評論意見領袖，而除了上述高按讚數與高回 覆數之評論無疑是潛在意見領袖並值得被探討外，透過 Traditional Stacked Graph 我們可以觀察到某些時間點上之高峰並不是具有高按讚數與高回覆數兩者條件，
而可能是僅具有高按讚數或高回覆數其中一者條件，如圖 10 之綠圈部分所示，
這些評論者在 Stacked Graph 中可以易於與其他時間點之資料進行按讚數與評 論數的比較，若使用者特別對這些評論者感興趣，此呈現便能幫助使用者觀察出 上述評論者在時變資料中的角色。假若在設計上注意 Traditional Stacked Graph 所會發生之各 layers 過度擠壓而造成視覺混亂之問題，Traditional Stacked Graph 是非常符合易讀性之 Stacked Graph 類型。
圖 10 Traditional Stacked Graph 與其 baseline function 𝑔0 = 0呈現結果，淺藍色 layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評論當前即時按 讚數之呈現，其中綠圈部分為僅具有高按讚數或高回覆數其中一者條件之資料
位置 12 people like this
0 replies
0 people like this 1 replies
‧
ThemeRiver Graph 對稱之特性，其設計考量也被廣泛探討，撇除美觀性之設計考 量，此種排版方式造成了某些數值特性 最小化的效果，特別的是每個位於 ThemeRiver Graph 之資料點其繪圖結果之頂端與底端邊界輪廓能夠盡量緊貼 x 軸，故每個上邊界輪廓與下邊界輪廓其斜率結果因此而成為最小值（同理於求解 取最小平方和），以上種種數學特性使得 ThemeRiver Graph 繪製結果其垂直排 版不至於太過於「失真」，並符合 Cleveland’s principal [22] ，受惠於圖形並不 會在垂直方向上有過多的單方向偏移造成失真，整體圖形之平均斜率應盡量趨近 式之 generalization，並解釋了擁有對稱性質之 ThemeRiver Graph 其排版方式能 夠使上邊界輪廓與下邊界輪廓平方和因此而成為最小值：‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
18
𝑠𝑖𝑙ℎ𝑜𝑢𝑒𝑡𝑡𝑒(𝑔0) = 𝑔02+ 𝑔𝑛2 (9) 進而推導為
𝑔02+ 𝑔𝑛2 = 𝑔02+ (𝑔0+ ∑𝑛𝑖=1𝑓𝑖)2 (10) 以上公式是以另一種方式表示 ThemeRiver Graph 在圖形之任意資料點上，最小 化了 g0 與 gn 之斜率平方和。因此，ThemeRiver Graph 不只產生了對稱圖形，
且在避免整體圖形扭曲與失真上可視為有最佳化的效果，搭配 Facebook 粉絲專 頁貼文(postid 為10154233979726509)評論資料將會呈現如圖 11 之結果，淺藍 色 layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評論當前即時 按讚數之呈現，同樣地，從 ThemeRiver Graph 中我們可以觀察出幾個具有代表 性評論的高峰，這些高峰可能是潛在的評論意見領袖，而這些高峰各自具備不同 之數值特性，假若兩層 layers 在視覺上幾乎互相對稱，平均分配垂直方向上的 空間，則該時間點之評論得到的按讚數與回覆數相當，有非常多的使用者以按讚 的方式擴增該則評論之聲量，並同時吸引了非常多使用加入第二層評論來進行議 題的討論，相反地，假若該則評論僅具有高按讚數或高回覆數其中一者條件，則 必有其中一層 layer 在該則評論之時間點上獲得較多的排版空間，如圖 11 之綠 圈部分所示。
‧ 國
立 政 治 大 學
‧
N a tio na
l C h engchi U ni ve rs it y
19
圖 11 ThemeRiver Graph 與其baseline function 𝑔0 = −12∑𝑛𝑖=1𝑓𝑖呈現結果，
淺藍色 layer 表示各評論當前即時回覆數之呈現，深藍色 layer 表示各評 論當前即時按讚數之呈現，其中綠圈部分為僅具有高按讚數或高回覆數其
中一者條件之資料位置
透過 ThemeRiver Graph 之呈現我們可以與 Traditional Stacked Graph 比較，
透過 ThemeRiver Graph 之呈現我們可以與 Traditional Stacked Graph 比較，