前端必看的數據可視化入門指南

作者：董曉慶螞蟻金服體驗技術部這是一篇給大家提供數據可視化開發(fā)的入門指南，介紹了可視化要解決的問題和可以直接使用的工具，我將從下面幾個方面給大家介紹，同時以阿里/螞蟻的可視化團隊和資源舉例說明：什么是數據可視化？怎樣進行數據可視化？數據可視化的場景和工具數據可視化過程中常見的問題什么是數據可視化數據可視化研究的是，如何將數據轉化成為交互的圖形或圖像等，以視覺可以感受的方式表達，增強人的認知能力，達到發(fā)現、解釋、分析、探索、決策和學習的目的。數據可視化(DataVisualization)和信息可視化(Infographics)是兩個相近的專業(yè)領域名詞。狹義上的數據可視化指的是數據用統(tǒng)計圖表方式呈現，而信息可視化則是將非數字的信息進行可視化。前者用于傳遞信息，后者用于表現抽象或復雜的概念、技術和信息。而廣義上的數據可視化則是數據可視化、信息可視化以及科學可視化等等多個領域的統(tǒng)稱?！稊祿梢暬馈窂V義的數據可視化涉及信息技術、自然科學、統(tǒng)計分析、圖形學、交互、地理信息等多種學科。地理信息自然科學地理信息自然科學信息技術 統(tǒng)計分析科學可視化(ScientificVisualization)、信息可視化(InformationVisualization)和可視分析學(VisualAnalytics)三個學科方向通常被看成可視化的三個主要分支。這三個分支整合在一起形成的新學科“數據可視化“，是可視化研究領域的新起點?！稊祿梢暬废旅嫖覀儗茖W可視化、信息可視化和可視分析學做簡單的介紹：科學可視化科學可視化(ScientificVisualization)是可視化領域最早、最成熟的一個跨學科研究與應用領域。面向的領域主要是自然科學，如物理、化學、氣象氣候、航空航天、醫(yī)學、生物學等各個學科，這些學科通常需要對數據和模型進行解釋、操作與處理，旨在尋找其中的模式、特點、關系以及異常情況。信息可視化信息可視化(InformationVisualization)處理的對象是抽象數據集合，起源于統(tǒng)計圖形學，又與信息圖形、視覺設計等現代技術相關。其表現形式通常在二維空間，因此關鍵問題是在有限的展現空間中以直觀的方式傳達大量的抽象信息。與科學可視化相比，科學可視化處理的數據具有天然幾何結構(如磁感線、流體分布等)，信息可視化更關注抽象、高維數據。柱狀圖、趨勢圖、流程圖、樹狀圖等，都屬于信息可視化最常用的可視表達，這些圖形的設計都將抽象的數據概念轉化成為可視化信息?？梢暦治鰧W可視分析學(VisualAnalytics)被定義為一門以可視交互為基礎的分析推理科學。它綜合了圖形學、數據挖掘和人機交互等技術，以可視交互界面為通道，將人感知和認知能力以可視的方式融入數據處理過程，形成人腦智能和機器智能優(yōu)勢互補和相互提升，建立螺旋式信息交流與知識提煉途徑，完成有效的分析推理和決策。

科學可視化、信息可視化與可視分析學，這三者有一些重疊的目標和技術，這些領域之間的邊界尚未有明確的共識。數據可視化的目標數據可視化的本質是將數據通過各種視覺通道映射成圖形，可以使得用戶更快、更準確的理解數據。因此數據可視化要解決的問題是如何將數據通過視覺可觀測的方式表達出來，同時需要考慮美觀、可理解性，需要解決在展示的空間（畫布）有限的情況下覆蓋、雜亂、沖突等問題，再以交互的形式查看數據的細節(jié)。怎樣進行數據可視化用一張經典的圖來說明如何進行數據可視化:數據可視化過程可以分為下面幾個步驟:.定義要解決問題.確定要展示的數據和數據結構.確定要展示的數據的維度（字段）.確定使用的圖表類型.確定圖表的交互定義問題首先明確數據可視化是要讓用戶看懂數據，理解數據。所以開始數據可視化前一定要定義通要解決的問題。例如：我想看過去兩周銷售額的變化，是增長了還是下跌了，什么原因導致的？你可以從趨勢、對比、分布、流程、時序、空間、關聯(lián)性等角度來定義自己要解決的問題。確定要展示的數據進行數據可視化首先要有數據，由于畫布大小的限制，過量的數據不能夠在直接顯示出來，所以要確定展不的數據：我要展示的數據是否已經加工好，是否存在空值？是列表數據還是樹形數據？數據的規(guī)模有多大？是否要對數據進行聚合，是否要分層展示數據？如何加載到頁面，是否需要在前端對數據處理？確定要顯示的數據維度

進行可視化時要對字段進行選擇，選擇不同的字段在后面環(huán)節(jié)中選擇適合的圖表類型也不同。名詞官然的面昉式數據分類名詞官然的面昉式數據分類確定使用的圖表類型有非常多的圖表類型可以使用，但是要根據要解決的問題、數據的結構、選擇的數據維度來確定要顯示的圖表類型：

https://antvis.github.io/vis/doc/chart/classify/compare.html圖表使用指弓I：/mo-college/chart-usage數據可視化的場景和工具目前互聯(lián)網公司通常有這么幾大類的可視化需求:通用報表移動端圖表大屏可視化圖編輯&圖分析地理可視化通用報表需求開發(fā)過程中面臨的85%以上的需求都是通用報表的需求，可以使用一般的圖表庫來滿足日常的開發(fā)需求，行業(yè)內比較常用的圖表庫有：Highcharts.Echarts、amCharts等，AntV開源了基于圖形語法的圖表庫：G2G2具備以下特性：千變萬化、自由組合。從數據出發(fā)，僅需幾行代碼就可以輕松獲得想要的圖表展示效果生動、易實現。大量產品實踐之上，提供繪圖引擎、完備圖形語法、專業(yè)設計規(guī)范豐富的交互能力。在圖形語法的基礎上提供了自定義交互的能力目前阿里集團內部已經有大量基于G2封裝的圖表庫，針對特定的框架和業(yè)務場景進行了封裝，其中部分已開源：bizcharts阿里巴巴國際UED團隊出品，G2的react封裝，主打電商業(yè)務圖表可視化，沉淀電商業(yè)務線的可視化規(guī)范。在React項目中實現常見圖表和自定義圖表。viser阿里數據平臺技術部出品，支持vue,react,angularjs三個框架。移動端可視化如果你面臨的場景需要PC端和移動端都兼容那么使用G2然后適配移動端的屏幕即可，但是如果你在移動APP上使用H5或者小程序開發(fā)，那么就選擇F2F2是一個專注于移動，開箱即用的可視化解決方案，完美支持H5環(huán)境同時兼容多種環(huán)境（node,小程序，weex）。完備的圖形語法理論，滿足你的各種可視化需求。專業(yè)的移動設計指引為你帶來最佳的移動端圖表體驗。

廟件機制，圖形、動畫.交互

靈活擴展，創(chuàng)意無限組件完備專注移動

體蛇優(yōu)雅擴展靈活創(chuàng)意無限基金理財.健康運動廟件機制，圖形、動畫.交互

靈活擴展，創(chuàng)意無限組件完備專注移動

體蛇優(yōu)雅擴展靈活創(chuàng)意無限基金理財.健康運動F2對多個平臺提供支持，阿里集團的其他團隊也做了一些封裝，比如my-f2,這是針對小程序封裝的版本，目前已開源：/antvis/my-f2大屏可視化大屏可視化聚焦于會議展覽、業(yè)務監(jiān)控、風險預警、地理信息分析等多種業(yè)務的展示，在圖形渲染、可視化設計方面都有很高的要求，目前阿里集團內部的大屏可視化團隊包括：螞蟻金服的圖形與藝術實驗室阿里云的DataV團隊阿里數據技術及產品部-數據之美大屏目前幾乎已成為toB項目的標配，應用場景越來越廣泛。圖編輯&圖分析圖可視化主要有兩個大的領域:圖編輯：用于圖建模（ER圖、UML圖）、流程圖、腦圖等，需要用戶深入參與關系的創(chuàng)建、編輯和刪除的場景圖分析：用于風控、安全、營銷場景中的關系發(fā)現，對圖的一些基本概念進行業(yè)務上解讀，環(huán)、關鍵鏈路、連通量等。目前主流的開源框架有：jointjs聚焦于圖編輯，包含了常見的流程圖和BPMN圖的功能，上手容易，開箱即用但是二次開發(fā)非常困難。d3.js非常底層的可視化庫，有大量圖分析場景的案例，上手成本高，demo同業(yè)務的距離比較大。目前AntV在圖可視化方向開源了圖基礎框架G6主要完成以下功能：節(jié)點和邊的渲染，包括自定義節(jié)點和邊事件交互機制，內嵌了大量常見的交互常見的布局，包括樹布局和力導布局I,或, M*/" 尺寸：80■色,分火，■》在G6的上層我們還針對圖編輯和圖分析提供了G6-Analyzer和G6-Editor.地理可視化地理數據可視化主要是對空間數據域的可視化，主要有三大領域：信息圖：主要用于展示位置相關的報表，信息圖，路徑變化等等。大屏應用：大屏展示一般以地理數據為載體，如建筑，道路，軌跡等數據可視化。地理分析應用:這類應用往往是海量地理數據的交互分析，用戶基于位置的用戶推薦，拉新，促活等業(yè)務運營系統(tǒng)，或者選址，風險監(jiān)控等系統(tǒng)。AntVG2和L7都提供了地理數據可視化的方案，其中：G2提供通用地理數據圖表的支持L7是更加專業(yè)的地理數據可視化解決方案，采用WebGL渲染技術，支持海量地理數據可視化分析，支持多線程運算的矢量瓦片方案。能夠滿足大屏可視化地理分析應用的需求。阿里集團的其他地理可視化框架包括:?高德的Loca?菜鳥的鳥圖常見的問題圖表誤用圖表的誤用是最常見的問題，看下下面的一些場景：例子1:分類過多的場景。下圖是各個省的人口的占比情況，因為這張圖上包含的分類過多，就出現了簡介中提到的問題，很難清晰對比各個省份的人口數據占比情況，所以這種情況下，我們推薦使用橫向柱狀圖。河南■ 山東，例子2：我們以一個不同游戲類型的銷量對比的場景為例，對于表示分類對比的數據時，我們更應該使用柱狀圖，而不是折線圖。30k25k圖20k滿15k10k5kOk游戲類型SportsStrategyActionShooterOther移動端和PC端圖表AntV提供了G2和F2兩個統(tǒng)計圖表框架，用戶經常會面同時臨移動端和PC端的業(yè)務，這時候會面臨兩個框架的選擇問題。G2本質上是為了傳統(tǒng)的中后臺產品設計的圖表庫，除了一般的報表顯示外，還提供了大量的交互有很強的分析能力；而F2則專門為移動端開發(fā)，最關注的是代碼大小、性能、表現力。所以我們有以下建議：如果你的用戶主要來自PC端，那么請使用G2,G2能支持更多的圖表類型和交互。如果你在錢包等重型叩p上使用H5、小程序開發(fā)，請使用F2。我們對移動端的眾多平臺做了大量兼容性工作。如果你開發(fā)的是一個BI分析系統(tǒng)，除了報表