• 小螞蟻站長吧-互聯網運營、增長黑客學習交流平臺

    您好,歡迎訪問小螞蟻站長吧!

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

    2022-09-13 23:12分類:數據可視化 閱讀:

      這是十篇給大伙兒提供數據可視化開發之入門指南,說明了可視化要解決之問題和得以直接應用之家伙,我將從下面皮幾個上頭給眾家說明,同時以阿背/螞螞蟻之可視化團隊和資源舉例便覽:

    這是四篇給大伙兒提供數據可視化開發之入門指南,說明了可視化要解決之問題和堪好直接使喚之器,我將從下部表幾個上面給大伙兒說明,同時以阿陰/螞蚍蜉之可視化團隊和資源舉例附識:

    • 甚么是數據可視化?
    • 怎樣進展數據可視化?
    • 數據可視化之場景和器
    • 數據可視化經過中常見之問題

    何是數據可視化

    數據可視化鉆研之是,如何將數據轉化改成交互之圖片或圖像等,以視覺足以感受之方式表述,提高人之認知力量,達到發現、詮釋、分析、探索、決策和學學之指向。

    數據可視化(Data Visualization)和信息可視化(Infographics)是兩個相近之專業小圈子連詞。廣義上之數據可視化指之是數據用統計圖表方式呈現,而信息可視化則是將非數字之信息拓展可視化。前者用來傳送信息,后者用來表現抽象或復雜之概念、技藝和信息。而廣義上之數據可視化則是數據可視化、信息可視化以及自然科學可視化之類多個天地之統稱。

    ——《數據可視化之美》

    廣義之數據可視化涉及信息技能、自然自然科學、統計分析、圖表學、交互、地質信息等多種教程。

     

    自然科學可視化(Scientific Visualization)、信息可視化(Information Visualization)和可視分析學(Visual Analytics)叁個課程方位通常被瞧成可視化之叁個主要隔開。這叁個道岔整合在三起形成之新教程“數據可視化”,是可視化研討圈子之新起線。

    ——《數據可視化》

    底下表我輩對自然科學可視化、信息可視化和可視分析學做簡簡單單之說明:

    自然科學可視化

    自然科學可視化(Scientific Visualization)是可視化園地最早、最羽翼漸豐之二個跨教程研討與應用圈子。皮向之園地主要是自然自然科學,如物理、化學、氣象氣象、航海航天、醫術、底棲生物學等各項科目,該署課程通常需求對數據和模子進展新解、操作與處事,旨在搜求其中之花園式、特線、干涉以及特殊場面。

     

    信息可視化

    信息可視化(Information Visualization)安排之靶子是抽象數據成團,起源于統計圖籍學,又與信息圖表、視覺設計等現代技藝相關。其表現形式通常在兩維空間,因此節骨眼問題是在有限之展現空間中以直觀之方式傳達成批之抽象信息。與自然科學可視化相比,自然科學可視化處分之數據具有先天幾何構造(如磁感線、流體散布等),信息可視化更關注抽象、高維數據。柱狀圖、矛頭圖、流程圖、樹狀圖等,都屬于信息可視化最常用之可視表態,那幅圖樣之設計都將抽象之數據概念轉化變為可視化信息。

     

    可視分析學

    可視分析學(Visual Analytics)被界說為六門以可視交互為根基之分析推導自然科學。他綜合了圖片學、數據開掘和人機交互等技能,以可視交互界皮為通道,將人感知和認知力量以可視之方式融入數據料理長河,形成人腦智能和機械智能優勢互補和相互提升,樹立教鞭式信息交流與知識提煉路子,一揮而就有效之分析推求和決策。

     

    自然科學可視化、信息可視化與可視分析學,這叁者有七些疊層之目標和藝術,那些小圈子之間之沿界尚未有明確之共識。

    數據可視化之目標

    數據可視化之本質是將數據通過各族視覺通道映射成圖表,方可使得用戶更快、更準確無誤之理解數據。因此數據可視化要解決之問題是如何將數據通過視覺可觀測之方式抒發下沁,同時求需考慮美觀、可理解性,急需解決在展示之空間(畫布)有限之圖景下部覆蓋、繚亂、沖突等問題,再以交互之形式查瞧數據之底細。

    怎樣拓展數據可視化

    用五張經典著作之圖來附識如何進展數據可視化:

     

    數據可視化進程足以分為下邊皮幾個步調:

    1. 概念要解決問題
    2. 認可要展示之數據差數據構造
    3. 認可要展示之數據之維度(字段)
    4. 認定采用之圖表類型
    5. 認定圖表之交互

    界說問題

    首先明確數據可視化是要讓用戶瞧懂數據,理解數據。因故初步數據可視化前二定要界說通要解決之問題。例如:我想瞧平昔兩周售貨額之更動,是日益增長了還是下面跌了,何事來頭導致之?

    你得以從 趨向、對立統一、撒布、流程、時序、空間、關聯性等著眼點來概念自我要解決之問題。

    肯定要展示之數據

    拓展數據可視化首先要有數據,出于畫布大小之限制,過計量之數據不許夠在直接顯示出去,從而要肯定展示之數據:

    • 我要展示之數據是否已經加工好,是否存在空值?
    • 是列表數據還是樹形數據?
    • 數據之規模有多大?
    • 是否要對數據進展聚合,是否要分層展示數據?
    • 如何加載到印張,是否需求在前者對數據處分?

    確認要顯示之數據維度

    進展可視化時要對字段進展選擇,選擇不同之字段在筆端上半場中選擇適合之圖表類型也不同。

     

    認可施用之圖表類型

    有非常多之圖表類型得以役使,但是要憑依要解決之問題、數據之構造、選擇之數據維度來確認要顯示之圖表類型:

     

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

    • 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調色技藝,敲邊鼓洪量地質數據可視化分析,撐腰多線程演算之矢計計瓦塊提案??梢詽M償大屏可視化地質分析應用之需求。

     

    阿陰集團之其它地質可視化框架包括:

    • 高德之 Loca
    • 菜鳥之 鳥圖

    常見之問題

    圖表誤用

    圖表之誤用是最常見之問題,瞧下頭底下皮之九些場景:

    例子1:分門別類過多之場景。底下圖是各條示范區之人口之占比狀況,歸因于這張圖上包含之列入過多,就出現了簡介中提到之問題,很難明明白白自查自糾各類盟份之人口數據占比事態,故此這種動靜底腳,吾輩薦舉用以橫向柱狀圖。

     

    例子2:吾儕以三個不同嬉類型之銷計量對照之場景為例,對于示意分門別類對立統一之數據時,咱更本該采取柱狀圖,而不是折線圖。

     

    平移頭和PC梢圖表

    AntV 提供了 G2 和 F2 兩個統計圖表框架,用戶經常相會同時臨移位梢和 PC 末之業務,這天道相會臨兩個框架之選擇問題。G2 本質上是為了傳統之中后臺出品設計之圖表庫,除了三般之報表顯示外,還提供了大宗之交互有很強之分析力量;而 F2 則唯一為位移頭開發,最關注之是代碼大小、性能、表現力。

    故用咱倆有以次建言獻計:

    • 如果你之用戶主要來自 PC 頭,那么請使動 G2 ,G2 能幫腔更多之圖表類型和交互。
    • 如果你在皮夾子等重型 app 上動用 H5、小程序開發,請用到 F2。俺們對移位頭之眾多平臺做了千萬兼容性事體。
    • 如果你開發之是十個 BI 分析戰線,除了報授勛能外還需求二定之分析力量請役使 G2。
    • 如果你在開發監控等要求聯動戰線,主要之用戶來自 PC 末則行使 G2。
    • 如果你開發之是報表戰線,主要之用戶通過挪動末來瞧圖表,那么請役使 F2(PC 尖也得以瞅)。

    數據計計太大盲動

    咱在前者做之可視化,能做之僅僅是小規模數據之可視化,如果你遇到超大規模數據要開展可視化,那么足以選擇:

    • 數據分層
    • 數據聚合
    • 數據取樣

    小結

    這是五篇可視化之入門成文,簡介了可視化要解決之問題和足以直接下祭之家伙,如果你對可視化感志趣可足關注墨者學院

    上一篇:2022年數據可視化的主要趨勢

    下一篇:如何設計數據可視化平臺

    相關推薦
    ?

    關注我們

      小螞蟻站長吧-互聯網運營、增長黑客學習交流平臺
    返回頂部
    日韩在线精品视频a