什么是數(shù)據(jù)可視化

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

廣義的數(shù)據(jù)可視化涉及信息技術(shù)、自然科學(xué)、統(tǒng)計分析、圖形學(xué)、交互、地理信息等多種學(xué)科。

科學(xué)可視化

科學(xué)可視化（Scientific Visualization）是科學(xué)之中的一個跨學(xué)科研究與應(yīng)用領(lǐng)域，主要關(guān)注三維現(xiàn)象的可視化，如建筑學(xué)、氣象學(xué)、醫(yī)學(xué)或生物學(xué)方面的各種系統(tǒng)，重點在于對體、面以及光源等等的逼真渲染。科學(xué)可視化是計算機圖形學(xué)的一個子集，是計算機科學(xué)的一個分支。 科學(xué)可視化的目的是以圖形方式說明科學(xué)數(shù)據(jù)，使科學(xué)家能夠從數(shù)據(jù)中了解、說明和收集規(guī)律。

信息可視化

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

可視化分析

可視分析學(xué)（Visual Analytics）是隨著科學(xué)可視化和信息可視化發(fā)展而形成的新領(lǐng)域，重點是通過交互式視覺界面進行分析推理。

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

• 科學(xué)可視化處理具有自然幾何結(jié)構(gòu)（磁場、MRI 數(shù)據(jù)、洋流）的數(shù)據(jù)。
• 信息可視化處理抽象數(shù)據(jù)結(jié)構(gòu)，如樹或圖形。
• 可視分析學(xué)將交互式視覺表示與基礎(chǔ)分析過程（統(tǒng)計過程、數(shù)據(jù)挖掘技術(shù)）結(jié)合，能有效執(zhí)行高級別、復(fù)雜的活動（推理、決策）。

為什么需要數(shù)據(jù)可視化

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

人類的眼睛是一對高帶寬巨量視覺信號輸入的并行處理器，擁有超強模式識別能力，配合超過 50% 功能用于視覺感知相關(guān)處理的大腦，使得人類通過視覺獲取數(shù)據(jù)比任何其他形式的獲取方式更好，大量視覺信息在潛意識階段就被處理完成，人類對圖像的處理速度比文本快 6 萬倍。
數(shù)據(jù)可視化正是利用人類天生技能來增強數(shù)據(jù)處理和組織效率。

可視化可以幫助我們處理更加復(fù)雜的信息并增強記憶

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

可視化還可以有效增強人的記憶力，我們經(jīng)常說的一圖勝千言就是可視化對生活的影響。

如何實現(xiàn)數(shù)據(jù)可視化

可視化實現(xiàn)流程

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

一個經(jīng)典的可視化實現(xiàn)流程，是先對數(shù)據(jù)進行加工過濾，轉(zhuǎn)變成視覺可表達的形式（Visual Form），然后再渲染成用戶可見的視圖（View）。

可視化技術(shù)棧

具備專業(yè)素養(yǎng)的數(shù)據(jù)可視化工程師一般來說需要掌握以下技術(shù)棧：

• 基礎(chǔ)數(shù)學(xué)：三角函數(shù)、線性代數(shù)、幾何算法
• 圖形相關(guān)：canvas、svg、webgl、計算圖形學(xué)、圖論
• 工程算法：基礎(chǔ)算法、統(tǒng)計算法、常用的布局算法
• 數(shù)據(jù)分析：數(shù)據(jù)清洗、統(tǒng)計學(xué)、數(shù)據(jù)建模
• 設(shè)計美學(xué)：設(shè)計原則、美學(xué)評判、顏色、交互、認知
• 可視化基礎(chǔ)：可視化編碼、可視分析、圖形交互
• 可視化解決方案：圖表的正確使用、常見的業(yè)務(wù)的可視化場景

常用的數(shù)據(jù)可視化工具

在學(xué)術(shù)界與工程界，數(shù)據(jù)可視化工具都非常之多，學(xué)術(shù)界用得比較多的是 R 語言, ggplot2, Python 可視化庫等，普通用戶喜聞樂見的是 Excel，商業(yè)上的產(chǎn)品是 Tableau, DOMO, PowerBI 等等，是個精彩紛呈的世界。
這里有常用的 25 個數(shù)據(jù)可視化工具對比，沒有完美的可視化工具，每個工具都有各自的優(yōu)缺點。下面是一張工具選擇推薦圖，根據(jù)目的分類，左上是簡單快捷，左下是故事導(dǎo)向，右上是為了分享分析，右側(cè)是創(chuàng)新型圖表，右下是分析型工具。

我們常常聽說的數(shù)據(jù)可視化

數(shù)據(jù)可視化（Data Visualization）和 信息可視化（Information Visualization）是兩個相近的專業(yè)領(lǐng)域名詞。狹義上的數(shù)據(jù)可視化指的是將數(shù)據(jù)用統(tǒng)計圖表方式呈現(xiàn)，而信息可視化則是將非數(shù)字的信息進行可視化。前者用于傳遞信息，后者用于表現(xiàn)抽象或復(fù)雜的概念、技術(shù)和信息。而廣義上的數(shù)據(jù)可視化則是數(shù)據(jù)可視化、信息可視化以及科學(xué)可視化等等多個領(lǐng)域的統(tǒng)稱。
——《數(shù)據(jù)可視化之美》

我們常常聽說的數(shù)據(jù)可視化大多指狹義的數(shù)據(jù)可視化以及部分信息可視化。根據(jù)數(shù)據(jù)類型和性質(zhì)的差異，經(jīng)常分為以下幾種類型：

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

關(guān)系數(shù)據(jù)可視化：主要表現(xiàn)為節(jié)點和邊的關(guān)系，比如流程圖、網(wǎng)絡(luò)圖、UML 圖、力導(dǎo)圖等。常見的關(guān)系可視化類庫有 mxGraph、JointJS、GoJS、G6 等。

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

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

基于Web的可視化技術(shù)

在講各種流行類庫框架前，我們先了解下 Web 圖形的底層技術(shù)規(guī)范。

底層技術(shù)規(guī)范

• SVG：可縮放矢量圖形（Scalable Vector Graphics），是基于可擴展標記語言（標準通用標記語言的子集）用于描述二維矢量圖形的一種圖形格式。
• Canvas 2D：Canvas 通過 JavaScript 來繪制 2D 圖形，通過逐像素來進行渲染。
• Canvas 3D WebGL：WebGL（Web Graphic Library）是一個 JavaScript API，用于在任何兼容的 Web 瀏覽器中渲染 3D 圖形。WebGL 程序由用 JavaScript 編寫的控制代碼和用 OpenGL 著色語言（GLSL）編寫的著色器代碼構(gòu)成，這種語言類似于 C 或 C++，可在 GPU 上執(zhí)行。

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

我們重點回到基于 Web 技術(shù)的數(shù)據(jù)可視化類庫。

D3

D3.js 是一個基于數(shù)據(jù)操作文檔的 JavaScript 庫。 D3 可以將強大的可視化組件和數(shù)據(jù)驅(qū)動的 DOM 操作方法完美結(jié)合。

D3的優(yōu)劣：

• 強大的 SVG 操作能力，可以非常容易的將數(shù)據(jù)映射為 SVG 屬性
• 集成了大量數(shù)據(jù)處理、布局算法和計算圖形的工具方法
• 強大的社區(qū)和豐富的 demo
• API 太底層，復(fù)用性低，學(xué)習(xí)與使用成本高

D3 沒有提供封裝好的組件，在復(fù)用性、易用性方面不佳，社區(qū)里有很多基于 D3 的可視化組件庫：

• nvd3.js: 基于 D3 封裝了常見的折線圖、散點圖、餅圖，功能比較簡單
• dc.js: 除了提供了常見的圖表外還提供了一些數(shù)據(jù)處理能力
• c3.js: 一個輕量級的基于狀態(tài)管理的圖表庫

D3 有著 Stanford 的血脈淵源，在學(xué)術(shù)界享有很高聲譽，靈活強大使得它成為目前領(lǐng)域內(nèi)使用最廣泛的可視化類庫，但偏底層的 API 和數(shù)據(jù)驅(qū)動模式，使得上手 D3 存在一定門檻，基于 D3 的工程實現(xiàn)上需要自己考慮和處理更多內(nèi)容，如動畫、交互、統(tǒng)一樣式等，研發(fā)成本較高。

HighCharts

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

HighCharts的優(yōu)劣：

• 使用門檻極低，兼容性好
• 使用廣泛，非常成熟
• 樣式比較陳舊、圖表難以擴展
• 商業(yè)上使用需要購買版權(quán)

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

ECharts

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

ECharts的優(yōu)劣：

• 豐富的圖表類型，覆蓋主流常規(guī)的統(tǒng)計圖表
• 配置項驅(qū)動，三級個性化圖表樣式管理
• 移動端優(yōu)化，交互和布局適配，按需打包
• 深度的交互式數(shù)據(jù)探索
• 地理特效（百度遷徙，百度人氣，公交軌跡等效果）
• 靈活性上不如 Vega 等基于圖形語法的類庫
• 復(fù)雜關(guān)系型圖表比較難定制

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

Leaflet

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

Leaflet的優(yōu)劣：

• 專門針對地圖應(yīng)用
• mobile 兼容性良好
• API 簡潔、支持插件機制
• 功能比較簡單，需要具備二次開發(fā)能力

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

deck.gl

deck.gl 是 Uber 可視化團隊基于 WebGL 開發(fā)的面向大數(shù)據(jù)分析的可視化類庫。

deck.gl的優(yōu)劣：

• 主要以 3D 地圖可視化為主，內(nèi)置了地理信息可視化常見的場景
• 支持大規(guī)模數(shù)據(jù)的可視化
• 需要具備 WebGL 的知識，層的擴展比較復(fù)雜

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

酷屏

展現(xiàn)數(shù)據(jù)魅力，彰顯數(shù)據(jù)價值，演繹視覺盛宴。

效果炫酷

酷屏不僅僅只是形態(tài)多變，而是真正做到給用戶帶來震撼的視覺沖擊，內(nèi)置近百種炫酷組件和3D特效，只有你想不到的，沒有酷屏做不到的。

開發(fā)周期短

酷屏剔除了繁瑣的更新步驟，提供豐富的二次開發(fā)接口，支持自行改進、增加組件，無需換包或打補丁，不重啟服務(wù)器的情況下即可完成組件的更新，為實施人員提供便利。

響應(yīng)快速

支持動態(tài)局部刷新，秒級響應(yīng)，各項操作流暢，即使數(shù)量巨大，用戶也不必擔心卡頓，支持拖拽式操作，簡便易上手。

展現(xiàn)數(shù)據(jù)魅力，彰顯數(shù)據(jù)價值，演繹視覺盛宴