你看的是資料視覺化還是資訊圖表?—資料視覺化工具介紹

 陳心渝

現今資訊技術進步,分享各種資訊的媒介不斷的出現,得到資訊的管道突然多了起來,伴隨而來的是各種型態資料大量又快速的成長。產生了大量資料之後,衍生出不同的大數據(Big Data)的相關應用,但不論資訊科技如何進步,會影響我們生活最重要的還是資料內容本身傳達的訊息。要怎麼從大量資料中解讀出規律、趨勢、甚至預防是未來可能發生的問題?現在有很多專家都在進行研究,若只靠文字或數字描述,大量資訊的意含並不容易被直覺的擷取出來。大家都聽過一個說法,就是「用圖像會比用文字描述更容易理解及記憶」。中央研究院統計科學研究所陳君厚教授在2005年就曾提到[1]資料視覺化,就是以圖像取代資料中的數字,以呈現出資料的特性。其作用在於從「看圖」獲得資料所傳達的訊息。」時間是最寶貴的資源,與其花許多時間看文字、數字,不如用「圖像」讓大眾能更容易明瞭的得到想傳達的訊息。

資料視覺化(Data Visualization)

加拿大安大略省約克大學Michael Friendly教授在2008年發表的論文[2]表示,資料視覺化可以涵蓋領域當中的所有發展,是最廣泛的術語。如果加以充分組織和整理,幾乎任何可見的事物都是某種資訊:表格圖形地圖,甚至是章手稿,無論靜態還是動態,都會為我們提供某種或某些手段和途徑,以便揭示其內在的本質,確定問題的答案,查明各種關係,或許甚至還包括理解那些在其他形式下不那麼易於發現的事物。也有人用簡單的說法來說明資料視覺化就是「運用視覺的方式呈現資訊,用有效的圖表將繁雜的資訊簡化成為易於吸收的內容。」從這些觀點來看,資料視覺化是個讓我們能容易理解及接受資料內容,並且窺探出未被發現或察覺的事物關係或趨勢的一個好方法。
資料視覺化的圖是什麼樣的圖?Michael Friendly教授說資料視覺化的兩個主要的組成部分:統計圖形和主題製圖[2]陳君厚教授也提到廣義而言,常見的統計圖表,例如直方圖、圓餅圖、散布圖等都算是資料視覺化的範疇[1]

資訊圖表(Infographic)

另一個我們常聽到與資料視覺化概念很雷同的名詞就是資訊圖表,它與資料視覺化有相同的呈現方式 — 運用圖像化的方式簡化複雜的資訊。但資訊圖表較主觀的資訊,表達創作人的觀點,更著重視覺化的呈現,需要較深的繪畫設計技巧。大家應該都有看過不少各種視覺效果的資訊圖表,早期最有名的應該是2010Facebook工程師Paul Butler繪製的圖表(1)這張依照使用者使用Facebook的數據資料繪製而成的地圖,大陸板塊清晰可見,每一條線條表達的是全世界城市間產生的友誼關係,以數量來決定線條的寬度及顏色,這張圖在2010年當時出現讓人眼睛為之一亮,展現了視覺效果及資訊意涵,一直到現在這有越來越多像這樣的表現方式。一張圖不用特別強調重點,卻能清楚明瞭的表達概念,這正是資訊圖表的魅力。

1全世界Facebook使用者的友誼關係圖(by Paul Butler)

瀏覽網站時常會看到充滿大量資訊卻又有藝術美感的資訊圖表,瀏覽者注意力都在圖表內的資訊及文字上,而不用在圖表外加太多文字描述,將複雜議題的簡化描述並帶有豐富資訊意義的主觀描述性圖像,例如下方圖2[3]大家只需要看圖內整理過的描述,就可以快速擷取要傳達的重點,這是很簡潔又有效率的做法。
 2梵谷油畫印刷資訊分析圖

2011年出版的Designing Data Visualizations[4]一書中,作者Noah IliinskyJulia Steele使用以下三個標準來確定圖像為資料視覺化還是資訊圖表:

1.    產生方式
指的是建立圖像內容的方式。我們經常看到用精美的圖像解釋資訊,如果用大量的原創插圖來展現資訊內容,則可能是資訊圖表。下圖3是一種資訊圖表範例。




 圖3用原創插圖方式展示汽車的歷史

2.    展現的資料量
通常資料視覺化會比資訊圖表有更多大量且不同種類的資料。而且資料視覺化中的資料較會呈現不同時間或狀態發生的動態改變。資訊圖表主要是知識的呈現,較少展現資料之間的互動變化。

3.    美學應用程度
意思指的是圖像的藝術創作性。如果用具有設計感的圖像來顯示資訊,那圖像很可能是一個資訊圖表。譬如下圖4就是經過設計編排的資訊顯示。資料視覺化較多用統計圖表的形式,較少藝術美學展現。


4你的咖啡想告訴你什麼(by Designing Data Visualizations)

總結而言,資料視覺化是將資料透過量化的屬性如點、線、形狀、數字、字母等測量單位組合使用的視覺顯示圖,產生條件規則是一致的,無特別調整資料差異,較可用資訊工具自動生成。資訊圖表通常是資訊或知識的視覺化呈現,也常被用於敏感議題之中,用來強調或支持論點,有特定的目的並且用客製化方式製作而成。兩者同樣都可以是靜態或互動式的圖片或動畫,若要說這兩者的主要差異就是目的性。資訊圖表多用於主觀的講述故事或回答問題資料視覺化從客觀的資料中找出趨勢或規則。


或許我們不是畫圖高手,但可以我們使用工具來做出有意義的圖。如果不知如何著手進行,請繼續看下面的介紹如何做資料視覺化。

如何做資料視覺化

資料視覺化要先有資料,說到資料不妨利用全台灣收藏量化資料最豐富的「學術調查研究資料庫」(Survey Research Data Archive, SRDA) [5]SRDA提供線上分析功能NESSTAR(如圖5)。使用方式是先進入SRDA網站找到想看的資料後,再進入線上分析操作使用,就可以立即得知資料的分析結果不需自備統計軟體。這對於不確定資料是否為自己所需,想先預覽資料內容的人來說,沒有比使用SRDA提供的NESSTAR方便工具NESSTAR教學影片可以參考SRDA YouTube頻道的影片(goo.gl/ge3K7q)

 5 SRDA提供的NESSTAR線上分析圖

視覺化工具
現在大多數人都會使用辦公室文書軟體做圖表,雖然我們都可以使用Excel製作出統計圖表,但若資料量龐大或較複雜時,還是會希望有好用的工具來製作較優質的視覺化圖表。我們都知道使用者付費的觀念,好的軟體需要大家購買來支持,通常付費的商用軟體操作介面比較美觀或是可調整的細節較多,但若是學生或有成本上的考量時,就希望能有付費軟體以外的選擇,在此介紹幾款免費的視覺化工具

1.      Power BI [6]
BI的全名是Business Intelligence(商業智慧),是微軟推出的軟體,有免費版也有付費版,不論付費與否想要下載就需要先註冊一個Microsoft帳號,別擔心,那很簡單就可以註冊成功,註冊完就可以順利下載。Power BI最早是Excel的一個資料視覺化套件,在2016年成為一款獨立軟體。在2017年的西雅圖資料科學高峰會(Data Insight Summit),推出全新版本的Power BI,讓資料視覺化變得更容易。這是微軟一款商用軟體,但也開放非商用模式免費使用算是難得,有興趣的你不妨下載來使用看看。

6 Power BI 產品網站畫面

2.      RAW Graph [7]
它是一個開放源碼的資料視覺化框架,在2013年公開發表,由Density Design研究實驗室(Politecnico di Milano)維護,目標是使每個人都能輕鬆地查看複雜資料的視覺化表現,為目前被許多人視為資料視覺化領域最重要的工具之一。RAW Graphs主要被設計給資料研究者及設計師使用的工具,支援各種不同的圖表類型像是樹狀圖、氣泡圖(bubble chart)等等。
你可以在它網站文字框貼入你的資料,再選擇要呈現的圖(如圖7),並設定圖像相關資訊及維度(如圖8),就會呈現你選定的圖形(如圖9)之後,就可直接下載你剛剛製作的向量圖像(如圖10),這些都在網站上編輯使用非常方便,另有提供程式API也可自行加入自行開發的程式碼。
7將你資料貼入文字框,選擇呈現圖形

8設定圖形相關資訊



 圖9你資料的散布圖 


10下載你的向量圖 

3.   Chartkick [8]
目前提供了RubyPythonJavaScript語言編寫的繪圖套件程式,讓程式開發者可使用此圖表套件產生視覺化資料圖形。為了能簡單又快速地創造出好看的圖表,整合了兩大圖表庫:Highcharts以及Google Charts,並且使用跟這兩個圖庫相同的功能來建立圖表,搭配json格式的資料集,支援多種圖表類型以及單一圖形的多種表現方式,方便程式開發者使用。



















  11 ChartKick提供多種圖表類型

4.      Ember Charts [9]
這是由 Ember.jsD3.jsJQuery-UI架構所建立圖表庫,包含時間序列、長條圖、圓餅圖以及散佈圖,容易修改,在圖表互動性及呈現上,也有不錯的體驗效果。
 圖12 Ember Charts圖表有互動效果

5.          Plotdb [10] 
                 這是一套台灣人開發的視覺化工具,目前是beta版,PlotDB提供的圖表樣版,種類相當多,使用上也相當容易,莫約四個步驟便能做出一個最基本的視覺化。PlotDB提供許多不同的圖表使用方式,下載成PNG/SVG或使用嵌入網頁碼並嵌入自己的文章中。PlotDB讓使用者透過他提供的介面自由的修改圖表,最棒的是這些圖表程式一旦製作完成,便可以直接重覆運用於未來的文章或簡報中,有興趣的人可去使用看看。
 13 Plotdb提供自行修改圖表操作介面


6.      Google Charts [11]
不論從一條簡單的線圖到很複雜的階層型樹狀圖都能在Google Charts網站上呈現,它使用HTML5/SVG技術呈現圖表,提供跨平台、跨瀏覽器的兼容性,使用方式主是在網頁上加入JavaScript,可適用於iPhoneiPadAndroid平台。首先要加入Google Charts圖表庫,列出要繪製的資料,再選擇自定義圖表的選項,會產生一個你選擇的ID的圖表。然後可用你定義id<div>程式碼放在網頁上顯示Google Chart
Google Charts的圖庫藝廊提供了大量可使用的圖表類型,對於專業視覺畫的圖表如地理圖、動態壓力圖等,另外包內建含動畫和使用者互動控制的功能,程式開發者可以玩玩看。


14 Google Charts圖像種類

經由本篇文章的說明,希望能讓各位對資料視覺化與資訊圖表的意義有多一層認識,並且往後需要製作資料視覺化圖表時能有所幫助。


參考資料
1.    陳君厚 矩陣資料視覺化與資訊探索,2005http://www3.stat.sinica.edu.tw/camp2005/introduction.htm
2.    Michael Friendly “Milestones in the history of thematic cartography, statistical graphics, and data visualization”. Retrieved 07 July 2008.
4.    Noah Iliinsky , Julie Steele ”Designing Data Visualizations: Representing Informational Relationships”, O'Reilly Media, 02 October 2011.
5.    學術調查研究資料庫(Survey Research Data Archive,SRDA),https://srda.sinica.edu.tw/
7.    RAW Graph, https://rawgraphs.io/
8.    Chartkick, https://chartkick.com/
9.    Ember Charts, https://opensource.addepar.com/
10. Plotdb, https://plotdb.com/







留言

  1. 小編你好,感謝你的分享,我也想推薦一款視覺化工具:FineReport.一個報表軟體,企業級的應用。用於系統的開發業務報表,資料分析報表。也可集成在OA,ERP,CRM等應用系統內,做資料報表模塊,也可以開發成財務分析系統,就看你如何駕馭資料了。
    兩大核心功能是填報和資料展示,但我覺得比較驚艷的一點是,它內置了大量的圖表和視覺化動效,視覺化很豐富,完全沒有印象中做報表那種古板的風格。多以它能做出格式各樣的dashboard、甚至是視覺化大屏,一點不虛。
    我之前工作有段時間拿finereport,感觸最深的是開發報表很省力,10張門店報表以往做10張excel的,在他裡面就是一個參數查詢,然後批量匯出,用一個範本。

    網站:http://www.finereport.com/tw/

    回覆刪除

張貼留言