作者：董曉慶 螞蟻金服體驗技術部
這是一篇給大家提供資料視覺化開發的入門指南，介紹了視覺化要解決的問題和可以直接使用的工具，我將從下面幾個方面給大家介紹，同時以阿里/螞蟻的視覺化團隊和資源舉例說明：
- 什麼是資料視覺化？
- 怎樣進行資料視覺化？
- 資料視覺化的場景和工具
- 資料視覺化過程中常見的問題
什麼是資料視覺化
資料視覺化研究的是，如何將資料轉化成為互動的圖形或影象等，以視覺可以感受的方式表達，增強人的認知能力，達到發現、解釋、分析、探索、決策和學習的目的。
資料視覺化（Data Visualization）和資訊視覺化（Infographics）是兩個相近的專業領域名詞。狹義上的資料視覺化指的是資料用統計圖表方式呈現，而資訊視覺化則是將非數字的資訊進行視覺化。前者用於傳遞資訊，後者用於表現抽象或複雜的概念、技術和資訊。而廣義上的資料視覺化則是資料視覺化、資訊視覺化以及科學視覺化等等多個領域的統稱。
——《資料視覺化之美》
廣義的資料視覺化涉及資訊科技、自然科學、統計分析、圖形學、互動、地理資訊等多種學科。
科學視覺化（Scientific Visualization）、資訊視覺化（Information Visualization）和可視分析學（Visual Analytics）三個學科方向通常被看成視覺化的三個主要分支。這三個分支整合在一起形成的新學科“資料視覺化”，是視覺化研究領域的新起點。
——《資料視覺化》
下面我們對科學視覺化、資訊視覺化和可視分析學做簡單的介紹：
科學視覺化
科學視覺化（Scientific Visualization）是視覺化領域最早、最成熟的一個跨學科研究與應用領域。面向的領域主要是自然科學，如物理、化學、氣象氣候、航空航天、醫學、生物學等各個學科，這些學科通常需要對資料和模型進行解釋、操作與處理，旨在尋找其中的模式、特點、關係以及異常情況。
資訊視覺化
資訊視覺化（Information Visualization）處理的物件是抽象資料集合，起源於統計圖形學，又與資訊圖形、視覺設計等現代技術相關。其表現形式通常在二維空間，因此關鍵問題是在有限的展現空間中以直觀的方式傳達大量的抽象資訊。與科學視覺化相比，科學視覺化處理的資料具有天然幾何結構（如磁感線、流體分佈等），資訊視覺化更關注抽象、高維資料。柱狀圖、趨勢圖、流程圖、樹狀圖等，都屬於資訊視覺化最常用的可視表達，這些圖形的設計都將抽象的資料概念轉化成為視覺化資訊。
可視分析學
可視分析學（Visual Analytics）被定義為一門以可視互動為基礎的分析推理科學。它綜合了圖形學、資料探勘和人機互動等技術，以可視互動介面為通道，將人感知和認知能力以可視的方式融入資料處理過程，形成人腦智慧和機器智慧優勢互補和相互提升，建立螺旋式資訊交流與知識提煉途徑，完成有效的分析推理和決策。
科學視覺化、資訊視覺化與可視分析學，這三者有一些重疊的目標和技術，這些領域之間的邊界尚未有明確的共識。
資料視覺化的目標
資料視覺化的本質是將資料通過各種視覺通道對映成圖形，可以使得使用者更快、更準確的理解資料。因此資料視覺化要解決的問題是如何將資料通過視覺可觀測的方式表達出來，同時需要考慮美觀、可理解性，需要解決在展示的空間（畫布）有限的情況下覆蓋、雜亂、衝突等問題，再以互動的形式檢視資料的細節。
怎樣進行資料視覺化
用一張經典的圖來說明如何進行資料視覺化：
資料視覺化過程可以分為下面幾個步驟：
- 定義要解決問題
- 確定要展示的資料和資料結構
- 確定要展示的資料的維度（欄位）
- 確定使用的圖表型別
- 確定圖表的互動
定義問題
首先明確資料視覺化是要讓使用者看懂資料，理解資料。所以開始資料視覺化前一定要定義通要解決的問題。例如：我想看過去兩週銷售額的變化，是增長了還是下跌了，什麼原因導致的？
你可以從 趨勢、對比、分佈、流程、時序、空間、關聯性等角度來定義自己要解決的問題。
確定要展示的資料
進行資料視覺化首先要有資料，由於畫布大小的限制，過量的資料不能夠在直接顯示出來，所以要確定展示的資料：
- 我要展示的資料是否已經加工好，是否存在空值？
- 是列表資料還是樹形資料？
- 資料的規模有多大？
- 是否要對資料進行聚合，是否要分層展示資料？
- 如何載入到頁面，是否需要在前端對資料處理？
確定要顯示的資料維度
進行視覺化時要對欄位進行選擇，選擇不同的欄位在後面環節中選擇適合的圖表型別也不同。
確定使用的圖表型別
有非常多的圖表型別可以使用，但是要根據要解決的問題、資料的結構、選擇的資料維度來確定要顯示的圖表型別：
如何選擇圖表型別可以參考：
- AntV 圖表用法 ：https://antvis.github.io/vis/doc/chart/classify/compare.html
- 圖表使用指引：https://www.yuque.com/mo-college/chart-usage
資料視覺化的場景和工具
目前網際網路公司通常有這麼幾大類的視覺化需求：
- 通用報表
- 移動端圖表
- 大屏視覺化
- 圖編輯&圖分析
- 地理視覺化
通用報表需求
開發過程中面臨的 85% 以上的需求都是通用報表的需求，可以使用一般的圖表庫來滿足日常的開發需求，行業內比較常用的圖表庫有：Highcharts、Echarts、amCharts 等，AntV 開源了基於圖形語法的圖表庫：G2
G2 具備以下特性：
- 千變萬化、自由組合。從資料出發，僅需幾行程式碼就可以輕鬆獲得想要的圖表展示效果
- 生動、易實現。大量產品實踐之上，提供繪圖引擎、完備圖形語法、專業設計規範
- 豐富的互動能力。在圖形語法的基礎上提供了自定義互動的能力
目前阿里集團內部已經有大量基於 G2 封裝的圖表庫，針對特定的框架和業務場景進行了封裝，其中部分已開源：
- bizcharts 阿里巴巴國際 UED 團隊出品，G2 的 react 封裝，主打電商業務圖表視覺化，沉澱電商業務線的視覺化規範。在 React 專案中實現常見圖表和自定義圖表。
- viser 阿里資料平臺技術部出品，支援 vue, react，angularjs 三個框架。
移動端視覺化
如果你面臨的場景需要 PC 端和移動端都相容那麼使用 G2 然後適配移動端的螢幕即可，但是如果你在移動 APP 上使用 H5 或者小程式開發，那麼就選擇 F2
F2是一個專注於移動，開箱即用的視覺化解決方案，完美支援 H5 環境同時相容多種環境（node, 小程式，weex）。完備的圖形語法理論，滿足你的各種視覺化需求。專業的移動設計指引為你帶來最佳的移動端圖表體驗。
F2 對多個平臺提供支援，阿里集團的其他團隊也做了一些封裝，比如my-f2，這是針對小程式封裝的版本，目前已開源：
https://github.com/antvis/my-f2
大屏視覺化
大屏視覺化聚焦於會議展覽、業務監控、風險預警、地理資訊分析等多種業務的展示，在圖形渲染、視覺化設計方面都有很高的要求，目前阿里集團內部的大屏視覺化團隊包括：
- 螞蟻金服的圖形與藝術實驗室
- 阿里雲的 DataV 團隊
- 阿里資料技術及產品部-資料之美
大屏目前幾乎已成為to B專案的標配，應用場景越來越廣泛。
圖編輯 & 圖分析
圖視覺化主要有兩個大的領域：
- 圖編輯：用於圖建模（ER圖、UML圖）、流程圖、腦圖等，需要使用者深入參與關係的建立、編輯和刪除的場景
- 圖分析：用於風控、安全、營銷場景中的關係發現，對圖的一些基本概念進行業務上解讀，環、關鍵鏈路、連通量等。
目前主流的開源框架有：
- jointjs 聚焦於圖編輯，包含了常見的流程圖和BPMN 圖的功能，上手容易，開箱即用但是二次開發非常困難。
- d3.js 非常底層的視覺化庫，有大量圖分析場景的案例，上手成本高，demo 同業務的距離比較大。
目前 AntV 在圖視覺化方向開源了 圖基礎框架 G6
主要完成以下功能：
- 節點和邊的渲染，包括自定義節點和邊
- 事件互動機制，內嵌了大量常見的互動
- 常見的佈局，包括樹佈局和力導佈局
在 G6 的上層我們還針對圖編輯和圖分析提供了 G6-Analyzer 和 G6-Editor.
地理視覺化
地理資料視覺化主要是對空間資料域的視覺化，主要有三大領域：
- 資訊圖：主要用於展示位置相關的報表，資訊圖，路徑變化等等。
- 大屏應用：大屏展示一般以地理資料為載體，如建築，道路，軌跡等資料視覺化。
- 地理分析應用:這類應用往往是海量地理資料的互動分析，使用者基於位置的使用者推薦，拉新，促活等業務運營系統，或者選址，風險監控等系統。
AntV G2 和 L7 都提供了地理資料視覺化的方案，其中：
- G2 提供通用地理資料圖表的支援。
- L7 是更加專業的地理資料視覺化解決方案，採用WebGL渲染技術，支援海量地理資料視覺化分析，支援多執行緒運算的向量瓦片方案。能夠滿足大屏視覺化地理分析應用的需求。
阿里集團的其他地理視覺化框架包括：
- 高德的 Loca
- 菜鳥的 鳥圖
常見的問題
圖表誤用
圖表的誤用是最常見的問題，看下下面的一些場景：
例子1：分類過多的場景。下圖是各個省的人口的佔比情況，因為這張圖上包含的分類過多，就出現了簡介中提到的問題，很難清晰對比各個省份的人口資料佔比情況，所以這種情況下，我們推薦使用橫向柱狀圖。
例子2：我們以一個不同遊戲型別的銷量對比的場景為例，對於表示分類對比的資料時，我們更應該使用柱狀圖，而不是折線圖。
移動端和PC端圖表
AntV 提供了 G2 和 F2 兩個統計圖表框架，使用者經常會面同時臨移動端和 PC 端的業務，這時候會面臨兩個框架的選擇問題。G2 本質上是為了傳統的中後臺產品設計的圖表庫，除了一般的報表顯示外，還提供了大量的互動有很強的分析能力；而 F2 則專門為移動端開發，最關注的是程式碼大小、效能、表現力。
所以我們有以下建議：
- 如果你的使用者主要來自 PC 端，那麼請使用 G2 ，G2 能支援更多的圖表型別和互動。
- 如果你在錢包等重型 app 上使用 H5、小程式開發，請使用 F2。我們對移動端的眾多平臺做了大量相容性工作。
- 如果你開發的是一個 BI 分析系統，除了報表功能外還需要一定的分析能力請使用 G2。
- 如果你在開發監控等需要聯動系統，主要的使用者來自 PC 端則使用 G2。
- 如果你開發的是報表系統，主要的使用者通過移動端來看圖表，那麼請使用 F2（PC 端也可以看）。
資料量太大怎麼辦
我們在前端做的視覺化，能做的僅僅是小規模資料的視覺化，如果你遇到超大規模資料要進行視覺化，那麼可以選擇：
- 資料分層
- 資料聚合
- 資料抽樣
總結
這是一篇視覺化的入門文章，介紹了視覺化要解決的問題和可以直接使用的工具，如果你對視覺化感興趣可以關注墨者學院