數據圖表設計(一) 遇見大數據可視化系列文章之五

Nancy.Ong

By visualizing information, we turn it into a landscape that you can explore with your eyes, a sort of information map. And when you’re lost in information, an information map is kind of useful.通過可視化信息,我們可以繪製出一道眼睛可以看到的藍圖,一種信息地圖。當你迷失在信息中時,信息地圖就有作用了。

——大衛· 麥克坎德萊斯

https://www.ted.com/talks/david_mccandless_the_beauty_of_data_visualization

戴維·麥坎德利斯TED 演講中給我們講述了數據可視化的意義和美麗之處,大在數據迅速發展的時代,研究數據可視化的價值顯而易見本篇文章主要對數據可視化中的基本元素- 基礎圖表進行相關探索。

數據的視覺表達方式

人們感知信息中約83%是通過眼睛獲得,視覺化信息成為最重要的信息之一,也是最容易被處理並記住的數據可視化是關於數據的視覺表現形式的研究;其中,這種數據的視覺表現形式被定義為一種以某種概要形式抽提出來的信息,包括相應信息單位的各種屬性和變量[ 1 ]。簡言之,數據可視化的目的是讓數據說話,讓複雜抽象的數據以視覺的形式更準確快速的傳達。

1 】注釋:Michael Friendly2008 “主題製圖歷史上的里程碑,統計圖形和數據可視化”

例圖一

如上圖,可視化展示讓數據更清晰直觀的呈現出來。基礎圖表是數據可視化的一個基本,重要的視覺化表達方式。圖表之所以重要,在於它對數據信息的有效提煉,梳理,傳達的功能價值。圖表能對枯燥,複雜的數據,根據傳達目的,提煉成更簡潔,直觀的視覺信息。

圖表發展史

早在幾個世紀前就已出現數據可視化的表現方式,其中公元前550 年希臘哲學家阿那克西曼德創造了第一個出版的世界地圖在。

https://geekydementia.wordpress.com/2014/11/26/who-published-the-first-map/

第一個圖表則始於公元950 年的歐洲,被認為是最早的基於時間變化的折線圖,展示太陽,月亮等行星的位置變化趨勢。

http://www.fi.uu.nl/wiskrant/artikelen/hist_grafieken/begin/images/planeten.gif

公元1350 年法國人尼科爾· 奧雷斯米(妮科爾·奧斯梅)在出版物 形式的緯度”中發明了第一個柱狀圖,展示加速對象與時間速度的關係,使用圖表直觀的展示變量之間的關係。

 

https://en.wikipedia.org/wiki/Howard_G._Funkhouser#/media/File:Oresmes_diagrams.gif

威廉· 普萊菲爾(William Playfair )被稱為圖表設計之父,條形圖,餅圖,折線圖等都是他發明的,在1786 年出版的“商業與政治圖解”中的條形圖也被看成圖表中的里程碑,在許多數據可視化研究中都有用到這幅條形圖。

https://en.wikipedia.org/wiki/File:Playfair_Barchart.gif

隨着時間的流逝,圖表發展到現在,在“華爾街日報”,“紐約時報”,“商業周刊”等商業雜誌應用最為優秀。我們也對圖表類型有一定的認知度,像展示百分比的圓餅圖,體現趨勢變化的折線圖,對比數據的柱狀圖等。不管在商業中,還是日常工作彙報中,圖表都體現了它的價值。好的圖表能用簡單的視覺元素,清晰快速的傳達複雜的數據信息。

更多數據可視化發展史:http://www.datavis.ca/milestones/

圖表設計過程

圖表設計的目的是通過圖表的視覺表現形式,直觀,清晰,準確的展示已知多數據或單數據的聯繫。首先要獲得已知數據,對其進行整理分析篩選,找到想要了解的內容,確定該數據之間的關係,選擇視覺表現形式,最後輸出想要的圖表。

可以看到圖表設計過程可分為數據處理層面和視覺展示層面。數據處理:獲取數據,整理數據,清洗分析數據。數據源有Excel中中CSV 接取SQL 數據庫,Hadoop的的HDFS 星火API 等,數據處理層面騰訊雲都有大數據相關工具。視覺展示:。確定數據關係,選擇圖表形式,輸出圖表展示確定數據之間的關係,關係有對比,構成,分布,關聯,比如(例圖一)可知道三個產品的銷量變化是對比關係,最後選用折線圖的展示方式。

圖表分類和選擇

圖表的主要分類有柱狀圖,條形圖,折線圖,餅圖,圓環圖,面積圖,散點圖,氣泡圖,雷達圖,曲面圖等。下圖為數據可視化專家阿貝拉發布的圖表建議導圖圖表選擇方式通過數據關係的四個方面來區分:對比,構成,分布,關聯,再根據變量,類別,時間關係來選擇圖表。

http://extremepresentation.typepad.com/.a/6a00d8341bfd2e53ef01b7c736487a970b-pi

對比

對比型的圖表可以展示多個數據之間的相同和不同之處,也可以展示單個數據在時間上的變化趨勢,是基於時間或分類的維度來進行對比,通過圖形的顏色,長度,寬度,位置,角度,面積等視覺變量來對比數據。典型的對比類圖表有柱狀圖,條形圖,折線圖,雷達圖。

下圖為“華爾街日報” 15 年全球股市前十排行。各國間的股市市值是一種對比關係,選擇條形圖的方式讓數字信息展示的更為清晰直觀。

http://graphics.wsj.com/gallery/china-market-explainer

構成

構成顧名思義在同一維度的結構,組成,佔比關係,可以是靜態的,也可以是隨時間變化的。最典型的構成型圖表就是餅圖,環狀圖,還有百分比堆積柱狀圖,條形圖,面積圖。

下圖為2016年公司ComScore統計的流行電視設備銷量佔比。構成關係的數據通常會採用圓形圖,通過圓弧長度面積大小來區分數據之間的構成情況。

http://www.idownloadblog.com/2016/07/28/wsj-apple-media-tactics-alienates-cable-providers/

分布

分布型圖表通常用於展示連續數據的分布情況,通過圖形的顏色,大小,位置,長度的連續變化來展示數據的關係。散點圖,直方圖,正態分布圖,曲面圖表現方式都能體現數據的分布關係。

例圖是一個正態分布圖,被稱為“IQ Scale Bell-Curve”,它顯示IQ從小於60到大於140的範圍人數的分布情況。在智商規模從60到100的情況下,人數呈現遞增分布,最高人數達到100後,隨着IQ遞增人數開始下降,很小一部分達到了超過140的智商。可知世界目前的平均智商是100,標準偏差為15

https://commons.wikimedia.org/wiki/File:IQ_curve.svg

關聯

關聯型圖表用於展示數據之間存在的關係。散點圖,氣泡圖主要通過圖形的顏色,位置,大小的變化關係來展示數據的關聯性。

“紐約時報”的文章推廣與瀏覽量關係的可視化展示,採用氣泡圖的表現方式,直觀的展示了文章放在首頁與否的瀏覽情況。氣泡圖中數據以圓泡的形式展示在X軸, Ÿ軸構成的直角坐標繫上,使用氣泡的大小,密度來代表強度,顏色來區分分類,通過這些視覺方式清晰的呈現了數據間的影響程度。從而快速的找到最合適的推廣方式。

https://source.opennews.org/articles/promotion-pageviews/

圖表視覺元素

圖表基本構成元素如圖:標題(副標題),圖例,網格線,數據列,數據標籤,坐標軸(X Y ),X 軸標籤,Y 軸標籤,輔助信息。根據結構的不同會相對增加或減少一些元素,餅圖只需要標題,數據列,數據標籤就能把數據呈現的清楚。點,線,面是數據列基本視覺元素。

圖表層次:文字信息,圖表視覺圖形,坐標系網格。

小結

本文主要對數據可視化的基本元素圖表進行了基礎研究,主要闡述了圖表基礎介紹,圖表發展史,圖表設計過程,圖表的分類,圖表選擇方法以及圖表的視覺元素和層次。

那怎樣的視覺元素結合能產出好的圖表?好的圖表應該具備哪些條件?圖表的設計原則,設計誤區又是什麼?圖表設計(二)將進行詳細闡述。

Tags:

Nancy.Ong
Nancy.Ong
可視化系統搭建
上一遍
手機QQ里的註冊那些事兒
下一遍
4,115
QQ空間 新浪微博 Facebook Google+

相關推薦

留下你的想法吧