中文字幕在线观看,亚洲а∨天堂久久精品9966,亚洲成a人片在线观看你懂的,亚洲av成人片无码网站,亚洲国产精品无码久久久五月天

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

2020-12-04    來源:raincent

容器云強勢上線!快速搭建集群,上萬Linux鏡像隨意使用

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

什么是數(shù)據(jù)可視化?
怎樣進行數(shù)據(jù)可視化?
數(shù)據(jù)可視化的場景和工具
數(shù)據(jù)可視化過程中常見的問題

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

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

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

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

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

 

 

“科學可視化(Scientific Visualization)、信息可視化(Information Visualization)和可視分析學(VisualAnalytics)三個學科方向通常被看成可視化的三個主要分支。這三個分支整合在一起形成的新學科“數(shù)據(jù)可視化”,是可視化研究領域的新起點。”

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

下面我們對科學可視化、信息可視化和可視分析學做簡單的介紹:

1. 科學可視化

科學可視化(Scientific Visualization)是可視化領域最早、最成熟的一個跨學科研究與應用領域 [石教英 1996]。面向的領域主要是自然科學,如物理、化學、氣象氣候、航空航天、醫(yī)學、生物學等各個學科,這些學科通常需要對數(shù)據(jù)和模型進行解釋、操作與處理,旨在尋找其中的模式、特點、關系以及異常情況 [Schroeder2004]。

 

 

2. 信息可視化

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

 

 

3. 可視分析學

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

 

 

科學可視化、信息可視化與可視分析學,這三者有一些重疊的目標和技術,這些領域之間的邊界尚未有明確的共識。

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

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

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

用一張經(jīng)典的圖來說明如何進行數(shù)據(jù)可視化:

 

 

數(shù)據(jù)可視化過程可以分為下面幾個步驟:

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

1. 定義問題

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

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

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

進行數(shù)據(jù)可視化首先要有數(shù)據(jù),由于畫布大小的限制,過量的數(shù)據(jù)不能夠在直接顯示出來,所以要確定展示的數(shù)據(jù):

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

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

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

 

 

4. 確定使用的圖表類型

有非常多的圖表類型可以使用,但是要根據(jù)要解決的問題、數(shù)據(jù)的結構、選擇的數(shù)據(jù)維度來確定要顯示的圖表類型:

 

 

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

AntV 圖表用法 :https://antvis.github.io/vis/doc/chart/classify/compare.html

圖表使用指引:https://www.yuque.com/mo-college/chart-usage

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

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

通用報表
移動端圖表
大屏可視化
圖編輯 & 圖分析
地理可視化

1. 通用報表需求

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

https://github.com/antvis/g2

 

 

G2 具備以下特性:

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

目前阿里集團內(nèi)部已經(jīng)有大量基于 G2 封裝的圖表庫,針對特定的框架和業(yè)務場景進行了封裝,其中部分已開源:

bizcharts

https://bizcharts.net/index

阿里巴巴國際 UED 團隊出品,G2 的 react 封裝,主打電商業(yè)務圖表可視化,沉淀電商業(yè)務線的可視化規(guī)范。在 React 項目中實現(xiàn)常見圖表和自定義圖表。

viser

https://viserjs.github.io/

阿里數(shù)據(jù)平臺技術部出品,支持 vue, react,angularjs 三個框架。

2. 移動端可視化

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

https://github.com/antvis/f2

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

 

 

F2 對多個平臺提供支持,阿里集團的其他團隊也做了一些封裝,比如my-f2,這是針對小程序封裝的版本,目前已開源:

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

3. 大屏可視化

大屏可視化聚焦于會議展覽、業(yè)務監(jiān)控、風險預警、地理信息分析等多種業(yè)務的展示,在圖形渲染、可視化設計方面都有很高的要求,目前阿里集團內(nèi)部的大屏可視化團隊包括:

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

 

 

(DataV 大屏示例)

大屏目前幾乎已成為 to B 項目的標配,應用場景越來越廣泛。

4. 圖編輯 & 圖分析

圖可視化主要有兩個大的領域:

圖編輯:用于圖建模(ER 圖、UML 圖)、流程圖、腦圖等,需要用戶深入?yún)⑴c關系的創(chuàng)建、編輯和刪除的場景

圖分析:用于風控、安全、營銷場景中的關系發(fā)現(xiàn),對圖的一些基本概念進行業(yè)務上解讀,環(huán)、關鍵鏈路、連通量等。

目前部分主流的開源框架有:

jointjs 聚焦于圖編輯,包含了常見的流程圖和 BPMN 圖的功能,上手容易,開箱即用但是二次開發(fā)非常困難。

d3.js 非常底層的可視化庫,有大量圖分析場景的案例,上手成本高,demo 同業(yè)務的距離比較大。

目前 AntV 在圖可視化方向開源了圖基礎框架 G6:

https://github.com/antvis/g6

主要完成以下功能:

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

 

 

在 G6 的上層我們還針對圖編輯和圖分析提供了 G6-Analyzer 和 G6-Editor。

5. 地理可視化

地理數(shù)據(jù)可視化主要是對空間數(shù)據(jù)域的可視化,主要有三大領域:

信息圖:主要用于展示位置相關的報表,信息圖,路徑變化等等。

大屏應用:大屏展示一般以地理數(shù)據(jù)為載體,如建筑,道路,軌跡等數(shù)據(jù)可視化。

地理分析應用: 這類應用往往是海量地理數(shù)據(jù)的交互分析,用戶基于位置的用戶推薦,拉新,促活等業(yè)務運營系統(tǒng),或者選址,風險監(jiān)控等系統(tǒng)。

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

G2 提供通用地理數(shù)據(jù)圖表的支持。

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

 

 

阿里集團的其他地理可視化框架包括:

高德的 Loca
菜鳥的 鳥圖

常見的問題

1. 圖表誤用

圖表的誤用是最常見的問題,看下下面的一些場景:

例子 1:分類過多的場景。下圖是各個省的人口的占比情況,因為這張圖上包含的分類過多,就出現(xiàn)了簡介中提到的問題,很難清晰對比各個省份的人口數(shù)據(jù)占比情況,所以這種情況下,我們推薦使用橫向柱狀圖。

 

 

例子 2:我們以一個不同游戲類型的銷量對比的場景為例,對于表示分類對比的數(shù)據(jù)時,我們更應該使用柱狀圖,而不是折線圖。

 

 

2. 移動端和 PC 端圖表

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

所以我們有以下建議:

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

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

我們在前端做的可視化,能做的僅僅是小規(guī)模數(shù)據(jù)的可視化,如果你遇到超大規(guī)模數(shù)據(jù)要進行可視化,那么可以選擇:

數(shù)據(jù)分層
數(shù)據(jù)聚合
數(shù)據(jù)抽樣

總結

這是一篇可視化的入門文章,介紹了可視化要解決的問題和可以直接使用的工具,如果你對可視化感興趣可以關注 墨者學院:

https://antv.alipay.com/zh-cn/vis/index.html

本文來源:螞蟻金服科技

標簽: 數(shù)據(jù) 墑踴

版權申明:本站文章部分自網(wǎng)絡,如有侵權,請聯(lián)系:west999com@outlook.com
特別注意:本站所有轉載文章言論不代表本站觀點!
本站所提供的圖片等素材,版權歸原作者所有,如需使用,請與原作者聯(lián)系。

上一篇:10種免費的工具讓你快速的、高效的使用數(shù)據(jù)可視化

下一篇:成為卓越數(shù)據(jù)科學家必備的 13 項技能