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