這是我看過最走心的數據可視化文章了，看完血賺！

注：本文轉載自 https://antv.alipay.com/zh-cn/vis/blog/vis-introduce.html

一、什麼是數據可視化

科學可視化（Scientific Visualization）、 信息可視化（Information Visualization）和可視分析學（Visual Analytics）三個學科方向通常被看成可視化的三個主要分支。而將這三個分支整合在一起形成的新學科 “數據可視化”，這是可視化研究領域的新起點。
——《數據可視化》

廣義的數據可視化涉及信息技術、自然科學、統計分析、圖形學、交互、地理信息等多種學科。

科學可視化

科學可視化（Scientific Visualization）是科學之中的一個跨學科研究與應用領域，主要關注三維現象的可視化，如建築學、氣象學、醫學或生物學方面的各種系統，重點在於對體、面以及光源等等的逼真渲染。科學可視化是計算機圖形學的一個子集，是計算機科學的一個分支。科學可視化的目的是以圖形方式說明科學數據，使科學家能夠從數據中瞭解、說明和收集規律。

信息可視化

信息可視化（Information Visualization）是研究抽象數據的交互式視覺表示以加強人類認知。抽象數據包括數字和非數字數據，如地理信息與文本。信息可視化與科學可視化有所不同：科學可視化處理的數據具有天然幾何結構（如磁感線、流體分佈等），信息可視化處理的數據具有抽象數據結構。柱狀圖、趨勢圖、流程圖、樹狀圖等，都屬於信息可視化，這些圖形的設計都將抽象的概念轉化成爲可視化信息。

可視分析學

可視分析學（Visual Analytics）是隨着科學可視化和信息可視化發展而形成的新領域，重點是通過交互式視覺界面進行分析推理。

科學可視化、信息可視化與可視分析學三者有一些重疊的目標和技術，這些領域之間的邊界尚未有明確共識，初略來說有以下區分：

• 科學可視化處理具有自然幾何結構（磁場、MRI 數據、洋流）的數據。

• 信息可視化處理抽象數據結構，如樹或圖形。

• 可視分析學將交互式視覺表示與基礎分析過程（統計過程、數據挖掘技術）結合，能有效執行高級別、複雜的活動（推理、決策）。

二、爲什麼需要數據可視化

人類利用視覺獲取的信息量，遠遠超出其他器官

人類的眼睛是一對高帶寬巨量視覺信號輸入的並行處理器，擁有超強模式識別能力，配合超過 50% 功能用於視覺感知相關處理的大腦，使得人類通過視覺獲取數據比任何其他形式的獲取方式更好，大量視覺信息在潛意識階段就被處理完成，人類對圖像的處理速度比文本快 6 萬倍。

數據可視化正是利用人類天生技能來增強數據處理和組織效率。

可視化可以幫助我們處理更加複雜的信息並增強記憶

大多數人對統計數據瞭解甚少，基本統計方法（平均值、中位數、範圍等）並不符合人類的認知天性。最著名的一個例子是 Anscombe 的四重奏，根據統計方法看數據很難看出規律，但一可視化出來，規律就非常清楚。

三、如何實現數據可視化

可視化實現流程

在技術上，數據可視化最簡單的理解，就是數據空間到圖形空間的映射。

一個經典的可視化實現流程，是先對數據進行加工過濾，轉變成視覺可表達的形式（Visual Form），然後再渲染成用戶可見的視圖（View）。

可視化技術棧

具備專業素養的數據可視化工程師一般來說需要掌握以下技術棧：

• 基礎數學：三角函數、線性代數、幾何算法

• 圖形相關：canvas、svg、webgl、計算圖形學、圖論

• 工程算法：基礎算法、統計算法、常用的佈局算法

• 數據分析：數據清洗、統計學、數據建模

• 設計美學：設計原則、美學評判、顏色、交互、認知

• 可視化基礎：可視化編碼、可視分析、圖形交互

• 可視化解決方案：圖表的正確使用、常見的業務的可視化場景

常用的數據可視化工具

在學術界與工程界，數據可視化工具都非常之多，可參考一位知乎大拿整理的文章：值得推薦的 37 款數據可視化工具，學術界用得比較多的是 R 語言, ggplot2, Python 可視化庫等，普通用戶喜聞樂見的是 Excel，商業上的產品是 Tableau, DOMO, PowerBI 等等，是個精彩紛呈的世界。

這裏有常用的 25 個數據可視化工具對比，沒有完美的可視化工具，每個工具都有各自的優缺點。下面是一張工具選擇推薦圖，根據目的分類，左上是簡單快捷，左下是故事導向，右上是爲了分享分析，右側是創新型圖表，右下是分析型工具。

四、我們常常聽說的數據可視化

數據可視化（Data Visualization）和 信息可視化（Information Visualization）是兩個相近的專業領域名詞。狹義上的數據可視化指的是將數據用統計圖表方式呈現，而信息可視化則是將非數字的信息進行可視化。前者用於傳遞信息，後者用於表現抽象或複雜的概念、技術和信息。而廣義上的數據可視化則是數據可視化、信息可視化以及科學可視化等等多個領域的統稱。
——《數據可視化之美》

我們常常聽說的數據可視化大多指狹義的數據可視化以及部分信息可視化。根據數據類型和性質的差異，經常分爲以下幾種類型：

統計數據可視化：用於對統計數據進行展示、分析。統計數據一般都是以數據庫表的形式提供，常見的統計可視化類庫有 HighCharts、ECharts、G2、Chart.js 等等，都是用於展示、分析統計數據。

關係數據可視化：主要表現爲節點和邊的關係，比如流程圖、網絡圖、UML 圖、力導圖等。常見的關係可視化類庫有 mxGraph、JointJS、GoJS、G6 等。

地理空間數據可視化：地理空間通常特指真實的人類生活空間，地理空間數據描述了一個對象在空間中的位置。在移動互聯網時代，移動設備和傳感器的廣泛使用使得每時每刻都產生着海量的地理空間數據。常見類庫如 Leaflet、Turf、Polymaps 等等，最近 Uber 開源的 deck.gl 也屬於此類。

還有時間序列數據可視化（如 timeline）、文本數據可視化（如 worldcloud）等等。

五、基於 Web 的可視化技術

在講各種流行類庫框架前，我們先了解下 Web 圖形的底層技術規範。

底層技術規範

• SVG：可縮放矢量圖形（Scalable Vector Graphics），是基於可擴展標記語言（標準通用標記語言的子集）用於描述二維矢量圖形的一種圖形格式。

• Canvas 2D：Canvas 通過 JavaScript 來繪製 2D 圖形，通過逐像素來進行渲染。

• Canvas 3D WebGL：WebGL（Web Graphic Library）是一個 JavaScript API，用於在任何兼容的 Web 瀏覽器中渲染 3D 圖形。WebGL 程序由用 JavaScript 編寫的控制代碼和用 OpenGL 着色語言（GLSL）編寫的着色器代碼構成，這種語言類似於 C 或 C++，可在 GPU 上執行。

比較流行的基礎繪圖庫，基於 SVG 的有 snap.svg、rapheal.js 等，基於 Canvas 2D 的有 zrender、g 等，基於 WebGL 的有 three.js、SceneJS、PhiloGL 等，這些基礎繪圖庫可以讓上層封裝更簡單容易。

我們重點回到基於 Web 技術的數據可視化類庫。

D3

D3.js 是一個基於數據操作文檔的 JavaScript 庫。D3 可以將強大的可視化組件和數據驅動的 DOM 操作方法完美結合。

D3 的優劣：

• 強大的 SVG 操作能力，可以非常容易的將數據映射爲 SVG 屬性

• 集成了大量數據處理、佈局算法和計算圖形的工具方法

• 強大的社區和豐富的 demo

• API 太底層，複用性低，學習與使用成本高

D3 沒有提供封裝好的組件，在複用性、易用性方面不佳，社區裏有很多基於 D3 的可視化組件庫：

• nvd3.js: 基於 D3 封裝了常見的折線圖、散點圖、餅圖，功能比較簡單

• dc.js: 除了提供了常見的圖表外還提供了一些數據處理能力

• c3.js: 一個輕量級的基於狀態管理的圖表庫

D3 有着 Stanford 的血脈淵源，在學術界享有很高聲譽，靈活強大使得它成爲目前領域內使用最廣泛的可視化類庫，但偏底層的 API 和數據驅動模式，使得上手 D3 存在一定門檻，基於 D3 的工程實現上需要自己考慮和處理更多內容，如動畫、交互、統一樣式等，研發成本較高。

HighCharts

HighCharts 是一個用純 JavaScript 編寫的圖表庫， 能夠簡單便捷的在 Web 應用上添加交互性圖表。這是在 Web 上使用最廣泛的圖表，企業使用需要購買商業授權。

HighCharts 的優劣：

• 使用門檻極低，兼容性好

• 使用廣泛，非常成熟

• 樣式比較陳舊、圖表難以擴展

• 商業上使用需要購買版權

這是圖表界的 jQuery，在世界範圍內是使用最多最廣的一個可視化類庫，但整體圖表設計比較陳舊難以擴展，同時商業公司使用需要按照使用人數購買版權，比較昂貴，阿里有購買過，目前已不推薦使用。

ECharts

ECharts 縮寫自 Enterprise Charts，企業級圖表，開源來自百度數據可視化團隊，是一個純 Javascript 的圖表庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器，底層依賴另一個也是該團隊自主研發的輕量級的 Canvas 類庫 ZRender，提供直觀，生動，可交互，可高度個性化定製的數據可視化圖表。ECharts 是目前國內唯一一個入選 GitHub 全球可視化榜單的開源項目，2w+ star 全球排名第三，社區活躍，覆蓋主流前端框架和 8 種編程語言的擴展，目前國內市場佔有率處於絕對領先地位。

ECharts 的優劣：

• 豐富的圖表類型，覆蓋主流常規的統計圖表

• 配置項驅動，三級個性化圖表樣式管理

• 移動端優化，交互和佈局適配，按需打包

• 深度的交互式數據探索

• 地理特效（百度遷徙，百度人氣，公交軌跡等效果）

• 靈活性上不如 Vega 等基於圖形語法的類庫

• 複雜關係型圖表比較難定製

ECharts 能很好滿足傳統圖表需求，但在高度靈活多樣化的可視需求面前，需要另尋出路。

Leaflet

Leaflet 是面向移動設備的交互式地圖的 JavaScript 庫。測量的 JS 只有大約 38 KB，它具有大多數開發人員需要的所有映射功能。

Leaflet 的優劣：

• 專門針對地圖應用

• mobile 兼容性良好

• API 簡潔、支持插件機制

• 功能比較簡單，需要具備二次開發能力

地圖專用，其他領域使用不上。目前 Google 地圖、高德地圖、百度地圖都擁有自研的 JS 庫。

Vega

Vega 是華盛頓大學計算機學院數據交互實驗室（IDL）開發的一套交互圖形語法，定義了數據到圖形的映射規則、常見的交互語法和常見的圖形元素，用戶可以自由使用 Vega 語法進行組合構建出各種各樣的圖表。

Vega 的優劣：

• 完全基於 JSON 語法，提供從數據到圖形的映射規則

• 支持常見的交互語法

• 複雜的語法設計，使用和學習成本很高

Vega 在學術上有着比較完美的語法設計，但在工程易用性上比較欠缺。

deck.gl

deck.gl 是 Uber 可視化團隊基於 WebGL 開發的面向大數據分析的可視化類庫。

deck.gl 的優劣：

• 主要以 3D 地圖可視化爲主，內置了地理信息可視化常見的場景

• 支持大規模數據的可視化

• 需要具備 WebGL 的知識，層的擴展比較複雜

deck.gl 在 3D 地圖領域效果很贊，在其他領域不適用。

基於 Web 的可視化工具還有很多，上面是幾個一直以來使用比較多的類庫工具，以及最近湧現的一些新秀。各個類庫工具特性不同，定位不同，關鍵要看應用場景的適用性。

六、大阿里的數據可視化

大阿里（阿里巴巴、螞蟻金服、菜鳥物流等集團統稱）有各種數據可視化產品和業務，如 QuickBI，信鴿地圖，阿里雲的 DataV 更是可視化大屏方面的人氣產品在領域內有着很高的讚譽。

而另一方，在數量更多的普通用戶產品，中後臺應用系統中也存在大量的數據可視化需求，在這些業務中沉澱出了很多優秀的可視化類庫與工具，如國際 UED 的 BizCharts、淘寶基礎平臺的 IceChart、集團數據技術和產品部的 Recharts 等等。在這大量的業務應用和類庫背後有一個共同的名字，AntV。

AntV 是什麼

AntV 是螞蟻金服全新一代數據可視化解決方案，主要面向從事數據可視化應用相關的工程師和設計師，目前包括：

• 底層繪圖引擎 G：目前基於 canvas 2d 提供基礎繪圖能力，基於 webgl 的版本正在規劃中；

• 可視化語法類庫 G2：一套數據驅動的高交互可視化圖形語法，提供了豐富的圖表、專業的數據處理能力、便利的擴展方式和強大交互能力；

• 關係可視化類庫 G6：專注解決流程與關係分析的圖表庫，集成了大量的交互，可以輕鬆的進行動態流程圖和關係網絡的開發；

• 移動端圖表類庫 F2：是一套精簡、高效易擴展的移動端圖表庫，適於對性能、體積、擴展性要求嚴苛的移動應用場景下使用；

• 可視化設計指引與使用規範：統計圖表以及常用場景下的可視化設計指引和使用規範；

G2

G2 (The Grammar Of Graphics) 是一個由純 JavaScript 編寫、強大的語義化圖表語法類庫，提供了一整套圖形語法，可以讓用戶通過簡單的語法搭建出無數種圖表，並集成了大量的統計工具，支持多種座標系繪製，可以讓用戶自由地定製各種圖表。

G2 的優劣：

• 簡單、易用

• 完備的可視化編碼

• 強大的擴展能力

• 語法需要一定學習成本

與 ECharts 等圖表庫相比，G2 最大的優勢是靈活的圖形語法能力，可以讓用戶自由定製出各種各樣的圖表。但同時優勢也是劣勢，圖形語法的使用方式，上手的學習成本會比基於配置的 ECharts 等圖表庫高。

G6

G6 是一個由純 JavaScript 編寫的關係數據可視化類庫，提供了基本的網圖和樹圖功能，並支持多種內置佈局。G6 提供了查看和編輯兩種視圖，開發者可基於 G6 對關係圖快速進行二次開發。

G6 的優劣：

• 簡單的語法，強大的交互能力

• 支持多種視圖，易於使用的編輯視圖

• 強大的邊和節點的擴展能力

• 現階段上層封裝比較少，使用成本比較高

G6 是特別爲關係型數據提供的可視化類庫，對於統計型數據，請使用 G2 等類庫。G6 現階段還是非常底層的關係型可視化基礎類庫，上層直接可用的組件還比較少，需要根據業務需求進行二次開發。

AntV 發展現狀

得益於豐富的業務場景和用戶需求挑戰，AntV 經歷多年積累與不斷打磨，G2 於 2016 年 3 月份對外開放，2017 年 11 月 22 日正式開源，目前已支撐起阿里集團內外 2000 + 業務系統，通過了千萬級 UV 產品的嚴苛考驗，同時基於 AntV 的組件、工具、產品等可視化生態逐漸繁榮。

AntV 的整體產品層次圖如下：

七、寫在最後

最後補充一個小點，數據可視化一點也不神祕。在人類歷史發展的過程中，有很多的現實的數據可視化就在栩栩如生的生活裏。比如靈隱寺裏，有一個活生生的熱力圖：

還有非常反映人性的數據可視化美女圖：

數據可視化是個龐大的領域，涉及的學科非常多。但正是因爲這種跨學科性，讓可視化領域充滿活力與機遇。這篇文章僅僅是對數據可視化非常粗淺的一個概要介紹，更多內容，推薦陳爲老師編著的《數據可視化》等經典著作。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/sxZsfqK8DRhCHSkh1b6xxg