前端必看的數(shù)據(jù)可視化入門指南

作者：螞蟻金服科技 2019-08-01 10:20:36

這是一篇給大家提供數(shù)據(jù)可視化開發(fā)的入門指南，介紹了可視化要解決的問(wèn)題和可以直接使用的工具，我將從下面幾個(gè)方面給大家介紹，同時(shí)以阿里/螞蟻的可視化團(tuán)隊(duì)和資源舉例說(shuō)明：

什么是數(shù)據(jù)可視化?
怎樣進(jìn)行數(shù)據(jù)可視化?
數(shù)據(jù)可視化的場(chǎng)景和工具
數(shù)據(jù)可視化過(guò)程中常見(jiàn)的問(wèn)題

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

數(shù)據(jù)可視化研究的是，如何將數(shù)據(jù)轉(zhuǎn)化成為交互的圖形或圖像等，以視覺(jué)可以感受的方式表達(dá)，增強(qiáng)人的認(rèn)知能力，達(dá)到發(fā)現(xiàn)、解釋、分析、探索、決策和學(xué)習(xí)的目的。

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

——《數(shù)據(jù)可視化之美》

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

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

——《數(shù)據(jù)可視化》

下面我們對(duì)科學(xué)可視化、信息可視化和可視分析學(xué)做簡(jiǎn)單的介紹：

科學(xué)可視化

科學(xué)可視化(Scientific Visualization)是可視化領(lǐng)域最早、最成熟的一個(gè)跨學(xué)科研究與應(yīng)用領(lǐng)域。面向的領(lǐng)域主要是自然科學(xué)，如物理、化學(xué)、氣象氣候、航空航天、醫(yī)學(xué)、生物學(xué)等各個(gè)學(xué)科，這些學(xué)科通常需要對(duì)數(shù)據(jù)和模型進(jìn)行解釋、操作與處理，旨在尋找其中的模式、特點(diǎn)、關(guān)系以及異常情況。

信息可視化

信息可視化(Information Visualization)處理的對(duì)象是抽象數(shù)據(jù)集合，起源于統(tǒng)計(jì)圖形學(xué)，又與信息圖形、視覺(jué)設(shè)計(jì)等現(xiàn)代技術(shù)相關(guān)。其表現(xiàn)形式通常在二維空間，因此關(guān)鍵問(wèn)題是在有限的展現(xiàn)空間中以直觀的方式傳達(dá)大量的抽象信息。與科學(xué)可視化相比，科學(xué)可視化處理的數(shù)據(jù)具有天然幾何結(jié)構(gòu)(如磁感線、流體分布等)，信息可視化更關(guān)注抽象、高維數(shù)據(jù)。柱狀圖、趨勢(shì)圖、流程圖、樹狀圖等，都屬于信息可視化最常用的可視表達(dá)，這些圖形的設(shè)計(jì)都將抽象的數(shù)據(jù)概念轉(zhuǎn)化成為可視化信息。

可視分析學(xué)

可視分析學(xué)(Visual Analytics)被定義為一門以可視交互為基礎(chǔ)的分析推理科學(xué)。它綜合了圖形學(xué)、數(shù)據(jù)挖掘和人機(jī)交互等技術(shù)，以可視交互界面為通道，將人感知和認(rèn)知能力以可視的方式融入數(shù)據(jù)處理過(guò)程，形成人腦智能和機(jī)器智能優(yōu)勢(shì)互補(bǔ)和相互提升，建立螺旋式信息交流與知識(shí)提煉途徑，完成有效的分析推理和決策。

科學(xué)可視化、信息可視化與可視分析學(xué)，這三者有一些重疊的目標(biāo)和技術(shù)，這些領(lǐng)域之間的邊界尚未有明確的共識(shí)。

數(shù)據(jù)可視化的目標(biāo)

數(shù)據(jù)可視化的本質(zhì)是將數(shù)據(jù)通過(guò)各種視覺(jué)通道映射成圖形，可以使得用戶更快、更準(zhǔn)確的理解數(shù)據(jù)。因此數(shù)據(jù)可視化要解決的問(wèn)題是如何將數(shù)據(jù)通過(guò)視覺(jué)可觀測(cè)的方式表達(dá)出來(lái)，同時(shí)需要考慮美觀、可理解性，需要解決在展示的空間(畫布)有限的情況下覆蓋、雜亂、沖突等問(wèn)題，再以交互的形式查看數(shù)據(jù)的細(xì)節(jié)。

怎樣進(jìn)行數(shù)據(jù)可視化

用一張經(jīng)典的圖來(lái)說(shuō)明如何進(jìn)行數(shù)據(jù)可視化：

數(shù)據(jù)可視化過(guò)程可以分為下面幾個(gè)步驟：

定義要解決問(wèn)題
確定要展示的數(shù)據(jù)和數(shù)據(jù)結(jié)構(gòu)
確定要展示的數(shù)據(jù)的維度(字段)
確定使用的圖表類型
確定圖表的交互

定義問(wèn)題

首先明確數(shù)據(jù)可視化是要讓用戶看懂?dāng)?shù)據(jù)，理解數(shù)據(jù)。所以開始數(shù)據(jù)可視化前一定要定義通要解決的問(wèn)題。例如：我想看過(guò)去兩周銷售額的變化，是增長(zhǎng)了還是下跌了，什么原因?qū)е碌?

你可以從趨勢(shì)、對(duì)比、分布、流程、時(shí)序、空間、關(guān)聯(lián)性等角度來(lái)定義自己要解決的問(wèn)題。

確定要展示的數(shù)據(jù)

進(jìn)行數(shù)據(jù)可視化首先要有數(shù)據(jù)，由于畫布大小的限制，過(guò)量的數(shù)據(jù)不能夠在直接顯示出來(lái)，所以要確定展示的數(shù)據(jù)：

我要展示的數(shù)據(jù)是否已經(jīng)加工好，是否存在空值?
是列表數(shù)據(jù)還是樹形數(shù)據(jù)?
數(shù)據(jù)的規(guī)模有多大?
是否要對(duì)數(shù)據(jù)進(jìn)行聚合，是否要分層展示數(shù)據(jù)?
如何加載到頁(yè)面，是否需要在前端對(duì)數(shù)據(jù)處理?

確定要顯示的數(shù)據(jù)維度

進(jìn)行可視化時(shí)要對(duì)字段進(jìn)行選擇，選擇不同的字段在后面環(huán)節(jié)中選擇適合的圖表類型也不同。

確定使用的圖表類型

有非常多的圖表類型可以使用，但是要根據(jù)要解決的問(wèn)題、數(shù)據(jù)的結(jié)構(gòu)、選擇的數(shù)據(jù)維度來(lái)確定要顯示的圖表類型：

?[[272446]]?

如何選擇圖表類型可以參考：

AntV 圖表用法：??https://antvis.github.io/vis/doc/chart/classify/compare.html??
圖表使用指引：??https://www.yuque.com/mo-college/chart-usage??

數(shù)據(jù)可視化的場(chǎng)景和工具

目前互聯(lián)網(wǎng)公司通常有這么幾大類的可視化需求：

通用報(bào)表
移動(dòng)端圖表
大屏可視化
圖編輯&圖分析
地理可視化

通用報(bào)表需求

開發(fā)過(guò)程中面臨的 85% 以上的需求都是通用報(bào)表的需求，可以使用一般的圖表庫(kù)來(lái)滿足日常的開發(fā)需求，行業(yè)內(nèi)比較常用的圖表庫(kù)有：Highcharts、Echarts、amCharts 等，AntV 開源了基于圖形語(yǔ)法的圖表庫(kù)：G2

G2 具備以下特性：

千變?nèi)f化、自由組合。從數(shù)據(jù)出發(fā)，僅需幾行代碼就可以輕松獲得想要的圖表展示效果
生動(dòng)、易實(shí)現(xiàn)。大量產(chǎn)品實(shí)踐之上，提供繪圖引擎、完備圖形語(yǔ)法、專業(yè)設(shè)計(jì)規(guī)范
豐富的交互能力。在圖形語(yǔ)法的基礎(chǔ)上提供了自定義交互的能力

目前阿里集團(tuán)內(nèi)部已經(jīng)有大量基于 G2 封裝的圖表庫(kù)，針對(duì)特定的框架和業(yè)務(wù)場(chǎng)景進(jìn)行了封裝，其中部分已開源：

bizcharts 阿里巴巴國(guó)際 UED 團(tuán)隊(duì)出品，G2 的 react 封裝，主打電商業(yè)務(wù)圖表可視化，沉淀電商業(yè)務(wù)線的可視化規(guī)范。在 React 項(xiàng)目中實(shí)現(xiàn)常見(jiàn)圖表和自定義圖表。
viser 阿里數(shù)據(jù)平臺(tái)技術(shù)部出品，支持 vue, react，angularjs 三個(gè)框架。

移動(dòng)端可視化

如果你面臨的場(chǎng)景需要 PC 端和移動(dòng)端都兼容那么使用 G2 然后適配移動(dòng)端的屏幕即可，但是如果你在移動(dòng) APP 上使用 H5 或者小程序開發(fā)，那么就選擇 F2

F2是一個(gè)專注于移動(dòng)，開箱即用的可視化解決方案，完美支持 H5 環(huán)境同時(shí)兼容多種環(huán)境(node, 小程序，weex)。完備的圖形語(yǔ)法理論，滿足你的各種可視化需求。專業(yè)的移動(dòng)設(shè)計(jì)指引為你帶來(lái)最佳的移動(dòng)端圖表體驗(yàn)。

F2 對(duì)多個(gè)平臺(tái)提供支持，阿里集團(tuán)的其他團(tuán)隊(duì)也做了一些封裝，比如my-f2，這是針對(duì)小程序封裝的版本，目前已開源：

??https://github.com/antvis/my-f2??

大屏可視化

大屏可視化聚焦于會(huì)議展覽、業(yè)務(wù)監(jiān)控、風(fēng)險(xiǎn)預(yù)警、地理信息分析等多種業(yè)務(wù)的展示，在圖形渲染、可視化設(shè)計(jì)方面都有很高的要求，目前阿里集團(tuán)內(nèi)部的大屏可視化團(tuán)隊(duì)包括：

螞蟻金服的圖形與藝術(shù)實(shí)驗(yàn)室
阿里云的 DataV 團(tuán)隊(duì)
阿里數(shù)據(jù)技術(shù)及產(chǎn)品部-數(shù)據(jù)之美

大屏目前幾乎已成為to B項(xiàng)目的標(biāo)配，應(yīng)用場(chǎng)景越來(lái)越廣泛。

圖編輯 & 圖分析

圖可視化主要有兩個(gè)大的領(lǐng)域：

圖編輯：用于圖建模(ER圖、UML圖)、流程圖、腦圖等，需要用戶深入?yún)⑴c關(guān)系的創(chuàng)建、編輯和刪除的場(chǎng)景
圖分析：用于風(fēng)控、安全、營(yíng)銷場(chǎng)景中的關(guān)系發(fā)現(xiàn)，對(duì)圖的一些基本概念進(jìn)行業(yè)務(wù)上解讀，環(huán)、關(guān)鍵鏈路、連通量等。

目前主流的開源框架有：

jointjs 聚焦于圖編輯，包含了常見(jiàn)的流程圖和BPMN 圖的功能，上手容易，開箱即用但是二次開發(fā)非常困難。
d3.js 非常底層的可視化庫(kù)，有大量圖分析場(chǎng)景的案例，上手成本高，demo 同業(yè)務(wù)的距離比較大。

目前 AntV 在圖可視化方向開源了圖基礎(chǔ)框架 G6

主要完成以下功能：

節(jié)點(diǎn)和邊的渲染，包括自定義節(jié)點(diǎn)和邊
事件交互機(jī)制，內(nèi)嵌了大量常見(jiàn)的交互
常見(jiàn)的布局，包括樹布局和力導(dǎo)布局

在 G6 的上層我們還針對(duì)圖編輯和圖分析提供了 G6-Analyzer 和 G6-Editor.

地理可視化

地理數(shù)據(jù)可視化主要是對(duì)空間數(shù)據(jù)域的可視化，主要有三大領(lǐng)域：

信息圖：主要用于展示位置相關(guān)的報(bào)表，信息圖，路徑變化等等。
大屏應(yīng)用：大屏展示一般以地理數(shù)據(jù)為載體，如建筑，道路，軌跡等數(shù)據(jù)可視化。
地理分析應(yīng)用:這類應(yīng)用往往是海量地理數(shù)據(jù)的交互分析，用戶基于位置的用戶推薦，拉新，促活等業(yè)務(wù)運(yùn)營(yíng)系統(tǒng)，或者選址，風(fēng)險(xiǎn)監(jiān)控等系統(tǒng)。

AntV G2 和 L7 都提供了地理數(shù)據(jù)可視化的方案，其中：

G2 提供通用地理數(shù)據(jù)圖表的支持。
L7 是更加專業(yè)的地理數(shù)據(jù)可視化解決方案，采用WebGL渲染技術(shù)，支持海量地理數(shù)據(jù)可視化分析，支持多線程運(yùn)算的矢量瓦片方案。能夠滿足大屏可視化地理分析應(yīng)用的需求。

阿里集團(tuán)的其他地理可視化框架包括：

高德的 Loca
菜鳥的鳥圖

常見(jiàn)的問(wèn)題

圖表誤用

圖表的誤用是最常見(jiàn)的問(wèn)題，看下下面的一些場(chǎng)景：

例子1：分類過(guò)多的場(chǎng)景。下圖是各個(gè)省的人口的占比情況，因?yàn)檫@張圖上包含的分類過(guò)多，就出現(xiàn)了簡(jiǎn)介中提到的問(wèn)題，很難清晰對(duì)比各個(gè)省份的人口數(shù)據(jù)占比情況，所以這種情況下，我們推薦使用橫向柱狀圖。

例子2：我們以一個(gè)不同游戲類型的銷量對(duì)比的場(chǎng)景為例，對(duì)于表示分類對(duì)比的數(shù)據(jù)時(shí)，我們更應(yīng)該使用柱狀圖，而不是折線圖。

移動(dòng)端和PC端圖表

AntV 提供了 G2 和 F2 兩個(gè)統(tǒng)計(jì)圖表框架，用戶經(jīng)常會(huì)面同時(shí)臨移動(dòng)端和 PC 端的業(yè)務(wù)，這時(shí)候會(huì)面臨兩個(gè)框架的選擇問(wèn)題。G2 本質(zhì)上是為了傳統(tǒng)的中后臺(tái)產(chǎn)品設(shè)計(jì)的圖表庫(kù)，除了一般的報(bào)表顯示外，還提供了大量的交互有很強(qiáng)的分析能力;而 F2 則專門為移動(dòng)端開發(fā)，最關(guān)注的是代碼大小、性能、表現(xiàn)力。

所以我們有以下建議：

如果你的用戶主要來(lái)自 PC 端，那么請(qǐng)使用 G2 ，G2 能支持更多的圖表類型和交互。
如果你在錢包等重型 app 上使用 H5、小程序開發(fā)，請(qǐng)使用 F2。我們對(duì)移動(dòng)端的眾多平臺(tái)做了大量兼容性工作。
如果你開發(fā)的是一個(gè) BI 分析系統(tǒng)，除了報(bào)表功能外還需要一定的分析能力請(qǐng)使用 G2。
如果你在開發(fā)監(jiān)控等需要聯(lián)動(dòng)系統(tǒng)，主要的用戶來(lái)自 PC 端則使用 G2。
如果你開發(fā)的是報(bào)表系統(tǒng)，主要的用戶通過(guò)移動(dòng)端來(lái)看圖表，那么請(qǐng)使用 F2(PC 端也可以看)。

數(shù)據(jù)量太大怎么辦

我們?cè)谇岸俗龅目梢暬?，能做的僅僅是小規(guī)模數(shù)據(jù)的可視化，如果你遇到超大規(guī)模數(shù)據(jù)要進(jìn)行可視化，那么可以選擇：