從人類誕生之日起，便有了信息的呈現(xiàn)形式，并伴隨著人類發(fā)展足跡不斷變遷。如今出現(xiàn)的任何信息可視化類型，并非一夜之前突現(xiàn)的新物種，幾乎都是從過(guò)去經(jīng)典的表達(dá)式中發(fā)展而來(lái)。
17000 年前
如果你問(wèn)最早的信息圖表設(shè)計(jì)師是誰(shuí)，很多學(xué)者認(rèn)為是遠(yuǎn)古時(shí)代的洞穴人，他們是最早用圖像描繪成日常生活比如戰(zhàn)斗，野生動(dòng)物、死亡和慶?；顒?dòng)等等。
法國(guó)發(fā)現(xiàn)的洞穴繪畫遺址-拉斯科壁畫，距今約17000年
公元前 3000 年
古埃及象形文字，作為那時(shí)的正式書寫系統(tǒng)，開始使用符號(hào)來(lái)代表字母和概念，可追溯到公元前3000年。
公元前 550 年
希臘哲學(xué)家阿那克西曼德創(chuàng)造了第一個(gè)出版的世界地圖，這可以說(shuō)是最早的可視化地圖了。
公元 950 年
歐洲人畫出了基于時(shí)間變化的折線圖，用于展示太陽(yáng)，月亮等行星的位置變化趨勢(shì)，開始出現(xiàn)如今的數(shù)據(jù)圖表的雛形。
17 世紀(jì)
統(tǒng)計(jì)圖形之父威廉·普萊費(fèi)爾，發(fā)明了我們今天經(jīng)常使用的折線圖和條形圖，也被認(rèn)為創(chuàng)建了面積和餅圖。普萊費(fèi)爾是蘇格蘭工程師和政治經(jīng)濟(jì)學(xué)家，并在1786年出版了商業(yè)和政治地圖集。
智能時(shí)代
隨著時(shí)代的發(fā)展，智能時(shí)代AR、VR 技術(shù)的興起，我們開始看多更多新穎的的數(shù)據(jù)可視化形式。
1992-2010年內(nèi)世界小型武器和彈藥的進(jìn)出口貿(mào)易數(shù)據(jù)展示
“里約+20”地球峰會(huì)期間的Twitter話題匯集成一顆顆大樹
二. 認(rèn)識(shí)主流可視化圖表
如今隨著科學(xué)技術(shù)的發(fā)展，已經(jīng)沉淀出豐富且經(jīng)典耐用的信息可視化表達(dá)。無(wú)論在傳統(tǒng)的紙質(zhì)媒體，還是如今手機(jī)、電腦，電視等各類終端的電子媒體都得以大放異彩。目前，各大可視化工具中有非常詳盡的圖表類型介紹，比如 Excel2010 的版本里面，提供了 10 類共 53 個(gè)圖表。AntV 平臺(tái)則提供了 15 類近 200 個(gè)數(shù)據(jù)圖表，現(xiàn)在我們就來(lái)普及一下基本知識(shí)。
常用可視化圖表分類
目前主流的可視化平臺(tái)把常用圖表分成九大類（來(lái)自 AntV ），分別是：比較、分布、關(guān)聯(lián)、占比、區(qū)間、流程、趨勢(shì)、時(shí)間、地圖。
1. 比較
顯示值與值之間的不同和相似之處。使用圖形的長(zhǎng)度、寬度、位置、面積、角度和顏色來(lái)比較數(shù)值的大小，通常用于展示不同分類間的數(shù)值對(duì)比，不同時(shí)間點(diǎn)的數(shù)據(jù)對(duì)比。
典型圖表：柱狀圖、條形圖、直方圖、K 線圖、矩形樹圖等
2. 分布
顯示頻率，數(shù)據(jù)分散在一個(gè)區(qū)間或分組。使用圖形的位置、大小、顏色的漸變程度來(lái)表現(xiàn)數(shù)據(jù)的分布，通常用于展示連續(xù)數(shù)據(jù)上數(shù)值的分布情況。
典型圖表：散點(diǎn)圖、氣泡圖、熱力圖、箱型圖
3. 占比
顯示同一維度上占比關(guān)系
典型圖表：餅圖、環(huán)形圖、堆疊面積圖、堆疊柱狀圖
4. 關(guān)聯(lián)
顯示數(shù)據(jù)之間相互關(guān)系。 使用圖形的嵌套和位置表示數(shù)據(jù)之間的關(guān)系，通常用于表示數(shù)據(jù)之間的前后順序、父子關(guān)系以及相關(guān)性。
典型圖表：和弦圖、?；鶊D（我有點(diǎn)讀不懂）
5. 區(qū)間
顯示同一維度上值的上限和下限之間的差異。 使用圖形的大小和位置表示數(shù)值的上限和下限，通常用于表示數(shù)據(jù)在某一個(gè)分類（時(shí)間點(diǎn)）上的最大值和最小值。
典型圖表：儀表盤、堆疊圖
6. 流程
顯示流程流轉(zhuǎn)和流程流量。一般流程都會(huì)呈現(xiàn)出多個(gè)環(huán)節(jié)，每個(gè)環(huán)節(jié)之間會(huì)有相應(yīng)的流量關(guān)系，這類圖形可以很好的表示這些關(guān)系。
典型圖表：漏斗圖、桑基圖
7. 趨勢(shì)
分析數(shù)據(jù)的變化趨勢(shì)。使用圖形的位置表現(xiàn)出數(shù)據(jù)在連續(xù)區(qū)域上的分布，通常展示數(shù)據(jù)在連續(xù)區(qū)域上的大小變化的規(guī)律。
典型圖表：折線圖、K 線圖、堆疊面積圖
8. 時(shí)間（個(gè)人認(rèn)為時(shí)間可以放在各大類型中作為一個(gè)維度）
顯示以時(shí)間為特定維度的數(shù)據(jù)。使用圖形的位置表現(xiàn)出數(shù)據(jù)在時(shí)間上的分布，通常用于表現(xiàn)數(shù)據(jù)在時(shí)間維度上的趨勢(shì)和變化。
9. 地圖
顯示地理區(qū)域上的數(shù)據(jù)。使用地圖作為背景，通過(guò)圖形的位置來(lái)表現(xiàn)數(shù)據(jù)的地理位置，通常來(lái)展示數(shù)據(jù)在不同地理區(qū)域上的分布情況。
典型圖表：地圖
常用可視化圖表舉例分析
1) 柱狀圖
條形圖
展示多個(gè)分類的數(shù)據(jù)變化和同類別各變量之間的比較情況。使用垂直或水平的柱子顯示類別之間的數(shù)值比較。其中一個(gè)軸表示需要對(duì)比的分類維度，另一個(gè)軸代表相應(yīng)的數(shù)值。
優(yōu)點(diǎn)：對(duì)比分類數(shù)據(jù)。
缺點(diǎn)：分類過(guò)多則無(wú)法展示數(shù)據(jù)特點(diǎn)。
# 相似圖表
堆積柱狀圖：比較同類別各變量和不同類別變量總和差異。
百分比堆積柱狀圖：適合展示同類別的每個(gè)變量的比例。
2) 條形圖（也可歸到柱狀圖大類中）
類似柱狀圖，只不過(guò)兩根軸對(duì)調(diào)了一下。
優(yōu)點(diǎn)：類別名稱過(guò)長(zhǎng)，將有大量空白位置標(biāo)示每個(gè)類別的名稱。
缺點(diǎn)：分類過(guò)多則無(wú)法展示數(shù)據(jù)特點(diǎn) 。
#相似圖表
堆積條形圖：比較同類別各變量和不同類別變量總和差異。
百分比堆積條形圖：適合展示同類別的每個(gè)變量的比例。
雙向柱狀圖：比較同類別的正反向數(shù)值差異。
3) 折線圖
折線圖
堆積面積圖
展示數(shù)據(jù)隨時(shí)間或有序類別的波動(dòng)情況的趨勢(shì)變化。
優(yōu)點(diǎn)：有序的類別，比如時(shí)間。
缺點(diǎn)：無(wú)序的類別無(wú)法展示數(shù)據(jù)特點(diǎn)。
# 相似圖表
面積圖：用面積展示數(shù)值大小，展示數(shù)量隨時(shí)間變化的趨勢(shì)。
堆積面積圖：同類別各變量和不同類別變量總和差異。
百分比堆積面積圖：比較同類別的各個(gè)變量的比例差異。
4) 散點(diǎn)圖（以及氣泡圖）
散點(diǎn)圖
氣泡圖
用于發(fā)現(xiàn)各變量之間的關(guān)系。
優(yōu)點(diǎn)：存在大量數(shù)據(jù)點(diǎn)，結(jié)果更精準(zhǔn)，比如回歸分析。
缺點(diǎn)：數(shù)據(jù)量小的時(shí)候會(huì)比較混亂。
# 相似圖表
氣泡圖：用氣泡代替散點(diǎn)圖的數(shù)值點(diǎn)，面積大小代表數(shù)值大小。
5) 餅圖
餅圖
玫瑰圖
餅圖可以很好地幫助用戶快速了解數(shù)據(jù)的占比分配。
優(yōu)點(diǎn)：了解數(shù)據(jù)的分布情況。
缺點(diǎn)：分類過(guò)多，則扇形越小，無(wú)法展現(xiàn)圖表。
# 相似圖表
環(huán)形圖：挖空的餅圖，中間區(qū)域可以展現(xiàn)數(shù)據(jù)或者文本信息。
玫瑰餅圖：對(duì)比不同類別的數(shù)值大小。
旭日?qǐng)D：展示父子層級(jí)的不同類別數(shù)據(jù)的占比。
6) 詞云
詞云
7) 箱型圖
箱型圖
以上只是部分常用圖表樣式，更多詳細(xì)的圖標(biāo)樣式及其介紹，可前往阿里數(shù)據(jù)可視化平臺(tái) AntV 學(xué)習(xí)。
數(shù)據(jù)圖表使用指南
數(shù)據(jù)圖表如此繁雜多樣，到底該如何靈活運(yùn)用呢？
數(shù)據(jù)圖表專家 Andrew abela 設(shè)計(jì)了一張匯總圖，從全局出發(fā)，幫助我們快速確定圖表樣式
Andrew abela 繪制的圖表選擇指南被廣泛運(yùn)用
這其實(shí)為我們提供了一種快速選擇數(shù)據(jù)圖表類型的思考流程，四步走：
1.分析數(shù)據(jù)源
2.確定展示的類型
3.選擇的變量類型及數(shù)量
4.選擇對(duì)應(yīng)的數(shù)據(jù)圖表
三. 實(shí)用的學(xué)習(xí)通道
介紹這些基本知識(shí)是遠(yuǎn)遠(yuǎn)不夠的，網(wǎng)絡(luò)上有非常多的平臺(tái)、工具和團(tuán)隊(duì)可以供我們深入學(xué)習(xí)和研究數(shù)據(jù)可視化設(shè)計(jì)，以下列舉了我平時(shí)經(jīng)常光顧的學(xué)習(xí)資源。
1. 了解數(shù)據(jù)可視化設(shè)計(jì)的歷史淵源（完整版）：
數(shù)據(jù)可視化圖表發(fā)展史：http://www.datavis.ca/milestones/index.php?group=Pre-1600&mid=ms9
2. 各類可視化圖表的概念及用法（超詳細(xì)）：
螞蟻金服可視化解決方案 AntV：https://antv.alipay.com/zh-cn/index.html
圖表示例：https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
圖表用法：https://antv.alipay.com/zh-cn/vis/chart/index.html
3. 前端可視化圖表庫(kù)（前端可直接調(diào)用）：
ECharts：http://echarts.baidu.com/index.html
AntV：https://antv.alipay.com/index.html
Google Chat：https://google-developers.appspot.com/chart/
4.數(shù)據(jù)分析工具：
Google Analytics: https://analytics.google.com
百度統(tǒng)計(jì)：https://#baidu.com/
5.運(yùn)用可視化工具搭建自己的可視化圖表（可以建立自己的可視化圖表）：
BDP個(gè)人版：https://me.bdp.cn/home.html
平時(shí)還可以使用 Excel 或 Numbers 整理和輸出可視化圖表
寫在最后
除了學(xué)習(xí)鞏固數(shù)據(jù)相關(guān)的基礎(chǔ)知識(shí)以外，更需要在日常工作學(xué)習(xí)中培養(yǎng)習(xí)慣，養(yǎng)成數(shù)據(jù)化的思維方式。
- 1.保持對(duì)數(shù)據(jù)的敏感度
- 2.嘗試?yán)每梢暬ぞ邉?chuàng)建圖表，鍛煉分析整理的能力
- 3.密切關(guān)注自家產(chǎn)品線的用戶行為數(shù)據(jù)，解讀各類數(shù)據(jù)指標(biāo)，培養(yǎng)分析的習(xí)慣
- 4.關(guān)注前沿技術(shù)和可視化新形式，保持開放包容的心態(tài)
好了，文章就介紹到這里，大家一起學(xué)來(lái)吧。
預(yù)告：下一篇系列文章著重介紹可視化設(shè)計(jì)的具體方法，譬如從色彩、布局、交互等方面如何設(shè)計(jì)數(shù)據(jù)圖表，歡迎持續(xù)關(guān)注。
作者：又彬
轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化設(shè)計(jì)淺析與研究（一）
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司