美麗的輻射圖表呈現方式

資訊的呈現總是一門學問，我們常常在科幻電影裡面看到一些炫麗的操作介面與資訊圖表，不管是在鋼鐵人、Tron 或是駭客任務中，這些圖表似乎都能夠幫助操作員快速的得到資訊。而在現實生活中，輻射圖表（Radial Table）就是其中一種同時包含美麗外觀、資訊能見度以及資料關連性的圖表。

關係輻射圖表

前一陣子有一個很流行的 Facebook App「Friend Wheel」，只要按下登入、授權這個 App 取得 Facebook 上好友的資料，就可以把所有的好友排成一個環，再用不同顏色的線條把朋友之間的關係相連，就可以清楚的看出自己的交友關係。

這種環狀的圖表我們稱之為輻射圖表，能夠快速的呈現出資料表很長時，每筆資料之間的關係，採用這種圖表呈現的時候，讀者最容易注意到的就是環狀中間的曲線，他們是否密集、密集在哪裡，有時候還會用不同粗細與顏色的線條來代表關係的強弱（或是數值關係）。在輻射資料表上面呈現關係是兩點之間的弧線，遠比直線要更容易被判讀。

由於輻射圖表本身是環狀的關係，圓環越中間能利用的空間就越小，越外的空間能利用的就越大。因此通常我們會將比較大範圍、而且能代表關係或是需要表達出群聚性的資料放置在圓環的中心，而比較細節、或是和其他資料相關性比較低放在外側。

除了線條顏色以及位置之外，關係線條的張力（Tension）也可以呈現出資料之間關係的不同面相。

當線條張力較小時，則比較容易看出不同資料之間的密集程度（左上角的資料交集較多，右下角則比較少），而當關係線條張力較大時，線條比較密集，可以很清楚的看出每個資料項目的關係分類（哪一群資料項目和另外一群資料項目的關係較大）。

另一方面，如果設計的是可以互動的圖表，那麼如果讓使用者即時調整張力會更容易呈現出資料的細節。此外，當滑鼠移到某個資料項目上時，突顯出該項目的線條，也會非常容易幫助使用者閱讀資料的細節。

Open Source 的 Data-Driven SVG Library D3js 提供完整的範例以及原始碼，有興趣實作的朋友可以直接在這裡找到範例：Hierarchical Edge Bundling 以及 github 上的原始碼：https://github.com/mbostock/d3 。

另一個很有趣的例子是波蘭的設計師 Marcin Kuczynski 在 Behance 上面發表的資訊圖表便透過這種輻射圖表的方式，繪製出歐洲 26 個國家中最多人用的名字，圖表的最外圍畫出各個國家前十名的名字（輻射圖外圍呈現細節），在採用弧線表現出相同的名字位於不同的國家之間的關係（內圈表示連結關係）。右圖呈現的是 Anna 這個名字在不同國家之間的連結。

Circos 是一個專門拿來繪製輻射圖表的軟體，有豐富的有興趣的朋友也可以參考看看。

樹狀輻射圖表

除了表現出平行的關係以外，輻射圖表也可以用來表達垂直的分類或繼承關係。早在 1924 年就有人採用這種圖表的繪製方式，這張組織結構圖以獨裁領袖為中心，像外圍畫出不同下屬的分群以及層級。採用輻射圖表的繪圖方式可以清楚的看出領袖和下屬之間的從屬關係，每個同心圓都屬於一個不同的階級，而坐落在同一個圓上的人則有著相同的階級責任。

演化學家也很喜歡採用樹狀輻射圖表來表達出不同物種之間的關係，環狀這種中央空間密集，外圍空間比較寬廣的圖形，非常適合樹狀圖這種頂端資料比較少，而越外圍資料越多越細，需要更多空間的呈現方式。下圖是 POPSCI 網站呈現出 9993 種鳥類在同一張圖的演化關係，有興趣的讀者可以到 POPSCI (http://www.popsci.com/science/article/2012-11/daily-infographic-evolution-birds) 進一步和這個圖表進行互動。

在軟體的應用上，用樹狀的輻射圖表來呈現出資料夾結構也是一種非常有創意的表達方式。例如一個介面設計的非常漂亮的 Mac 軟體 DaisyDisk 就採用了輻射圖表來呈現出硬碟的使用分布，讓使用者可以一眼就看出到底是哪一種資料、或是哪一個資料夾佔用了最多的硬碟空間。同樣的，圓環的越外圍資料就越詳細，滑鼠只要移上去馬上就能知道該資料夾名稱、大小、以及裡面的檔案。當你的硬碟裡面塞滿檔案而空間不夠時，打開這個軟體就可以很輕鬆的找到最佔空間的檔案呢！