導讀
資料時代一個顯著特征是資料可視化的崛起，被譽為大資料分析應用領域裡的最後一公裡，資料可視化将資料分析、工程技術與設計藝術結合，借助圖形化的手段，用比文字快十倍甚至萬倍的速度清晰有效地傳達資訊，讓人們可以利用人類經曆漫長進化得來的強大視覺化思考本能去對所呈現資料進行挖掘、整合，得以輔助分析和決策。
早在 300 年前折線圖、柱形圖、餅圖被發明，時至今日有了紛繁多樣的資料可視化表現形态，而生産方式也從原始手繪到今天可以通過代碼、工具自動生成，資料可視化領域跟過去相比已經有了翻天覆地的變化，特别是最近10年，随着 D3（D3: Data-Driven Documents IEEE InfoVis 2011） 以及大量統計圖表類庫和工具出現，讓資料可視化設計和生産門檻大幅降低。
伴随資料可視化的價值越來越被人們認可以及生産工具的普惠，越來越多設計師、工程師、産品經理開始接觸這個領域，甚至可以說在現代化的 Web 系統中已經很少有不含任何資料可視化成分。作為這個專業領域的研發人員，我們一直在思考如何讓這個研發成本更低，在如今可視化類庫已經工程成熟、理論完備的當下，也許可以往智能化方向去尋求突破。
于是有了接下來想跟大家分享的一個智能可視化體系，AVA。可以讀作「 阿瓦 」，字母 VA 是 Visual Analytics 的縮寫，表示可視分析，而第一個 A 是一個向量，有很多涵義，可以是 Alibaba 表示阿裡巴巴集團多個專業可視化團隊聯合共建，可以是 AI、Automated 又或者 Augmented，表示人工智能、自動化和增強分析。
我們希望提供一個智能、自動化的可視化分析黑盒子，隻需要提供資料本身和分析意圖，合适的圖表或可視表達就能夠自動被推薦和生成出來了，所有中間的環節，AVA 都能幫大家處理掉。
要做到這個理想模式還需要大量的工作，而聚焦當下面對可視化研發階段的痛點，我們有了一些階段性成果可以跟大家做個分享，希望能聽到大家的建議和意見。
我們在思考，今天的資料可視化設計、研發方式就足夠的好了嗎？這過程我們還會遇到什麼麻煩？
昨天那些似曾相識的情景今後不再有了
萬事俱備，就差我看完文檔了
作為一個前端，最幸福的項目研發狀态莫過于「人員齊備、接口到位、需求定好、設計定稿」，萬事俱備我們撸起袖子就可以開幹了。但别急，如果涉及到資料可視化，特别是很幸（bu）運（xing）的發現設計稿裡的圖表蘊含設計師不甘平庸的個性化定制，不好意思，你得看完并搞懂那數十個 API 以及數百個可以無窮組合的配置項，試出你想要的效果。
更别說萬一涉及到那些初次見面或者當年畢業就已經還給老師的東東~
可視化輔助可視化研發
在 Low Code / No Code 可視化 UI 輔助前端研發盛行的今天，可視化研發居然還沒有一個可視化 UI 去輔助研發？抱歉，我們來晚了。
通過 AVA 的可視化智能研發能力，我們希望工程師隻需要寫一個 API 調用，剩下的一切調整都能通過可視化 UI 去完成，就像你不需要去看蘋果産品的産品使用說明一樣，在你啟用的那刻就學會了如何使用。
你可以通過下面這行代碼，傳入資料，指定圖表類型，即可在頁面上喚起 AVA 研發态的可視化 UI 配置面闆：
AVA.autoChart(container, data, { config: { type: 'line' }});
不用再去看圖表類庫的文檔，AVA 語義化的 UI 面闆現已支援 100+ 圖表選項修改并且還将持續增強，自由調整，即時生效。調整完成，拷貝配置到代碼，開發就完成了。
點選檢視視訊
如果你的設計沒問題，那一定是我用的圖表庫有問題
遭遇高端細節需求的時候，設計師同學經常會遇到各種靈魂拷問，「 這樣的設計符合可視化設計規範嗎？」、「 畫得出來就一定能開發出來嗎？」，于是就是反複的設計合理性、技術可行性溝通、反複的改稿、上線後還要去做設計還原對比？
設計到研發鍊路打通，設計還原零失真
通過代碼在研發時喚起 AVA 的可視化 UI 配置面闆去還原設計稿，這是給前端工程師的專屬武器，但如果設計師、産品經理也是用 AVA 的能力去做設計搞，工程師又何必動武呢？
沒錯，聰慧的你已經逐漸看清 AntV 産品矩陣上的棋盤了，不久前我們已經釋出上線的 ChartCube 正是為此準備，這是給設計師、産品經理準備的專屬武器，從 ChartCube 到 AVA，設計到研發鍊路打通，設計合理性、技術可行性無需反複溝通，中間産物可以被無縫連接配接，設計還原零失真。
哪有萬事俱備，通常我隻知道畫個什麼圖
做過業務研發的前端同學都深谙其道，雖然我知道要畫一個什麼圖表也懂得怎麼去開發這個圖表，但不到聯調哪一天資料接口都不會 Ready 的，我需要腦補一份這個圖表背後的資料應該長成什麼樣，然後跟後端同學溝通資料接口，接着自己去建構一份 Mock 資料。
這有多難？對有資料經驗的你說難，不難，但沒資料經驗的同學可能平表（Tabular）和交叉表（Crosstab）不分，自定義的 Mock 資料并不規範，真正聯調時才發現需要增加大量資料處理工作。
交叉表（Crosstab）與平表（Tabular）的差別（圖檔來自 excel-university.com）
從圖表類型選擇到研發态資料準備，一切就緒
AVA 智能研發可以開啟智能向導模式，從一行萬能代碼開始
AVA.autoChart(container, []);
你無需任何額外的參數輸入，會看到 AVA 的研發向導，選擇「從圖表類型開始」，選擇需要的圖表類型，接下來的事情你在上面已經看過了，拷貝資料和配置回到代碼裡，你圖表部分的開發工作在寫完這一行代碼和兩次複制粘貼的動作後就已經結束了，把資料格式告訴後端，等着他接口 Ready 聯調就好。
還萬事具備？我接的還有一句話需求
資料沒有準備好是常态，有設計就不錯了，我知道很多時候我們甚至連設計都沒有，我們的同學就接過一整頁資料監控報表的需求說明裡隻有一句話，“管控平台三期需要新增一個 Tab，給使用者提供系統運作情況的資料分析，目前系統能采集到的中繼資料見清單”，然後就留下在風中淩亂的你~
從資料特征到智能圖表推薦，萬事俱備
先說說資料，根據 data schema 去構造 Mock 資料有多疼？
說不疼也不疼，7、8個資料不就是 ctr+c、ctr+v 嗎？說疼也很疼，你是沒遇到過要建構近5年全年分日銷售資料？或者要分類交叉枚舉全國34個省級行政區域資料？更别說如果還要求這組資料帶有某些如均值、方差、偏态分布的統計特征？
圖檔來自網絡
不管是 Mock 還是真實資料，有資料又怎麼樣？圖表選擇困難症，什麼樣資料該用什麼樣的圖表展現？君不見 WTF Visualizations 上無數腦殘的表現方式出現在我們的産品設計中。
WTF Visualizations 上的可視化錯誤示例
不同的資料，不同的分析意圖選擇用什麼樣的圖表來表達本身就是一門學問，這領域的專家、學者已經總結出很多經驗工具，比如這張很有經典的決策樹。
沒有一種圖表類型是萬能的，每一種圖表類型都有他适用的場景，甚至有些時候明明是正确的圖表選型，在資料發生變化後突然變成不對了也是常有發生，簡單舉個例子，比如大家熟悉的餅圖，下面這是兩組資料，用了兩個餅圖去顯示，不管是兩組資料自身的構成比例還是兩組間的對比都特征顯明：
而突然有一天你發現資料變化後，變成這樣了：
餅圖在這個時候就完全沒 point 了，而如果變成柱形圖，你就會有不一樣的發現：
這就是圖表選擇的門檻與藝術，希望 AVA 能解決這個問題，還是從那一行萬能代碼開啟 AVA 智能研發向導：
**AVA.autoChart(container, []);
**
你會看到 AVA 的研發向導，選擇「從資料特征開始」，僅需資料特征即可自動生成 Mock 資料，為可視化研發提供研發态資料準備。應用到目前圖表中，智能圖表推薦将出現，選擇需要的圖表類型，接着就又回到那熟悉的流程。
智能圖表推薦
「對的資料」要配「對的圖表」，智能圖表推薦能力建立在可視化領域學者的諸多學術研究成果之上，結合了大量專家經驗以及 AntV 多年來的圖表使用規則的最佳實踐，關于 AVA 智能圖表推薦原理涉及到的知識庫、推薦規則與推薦器實作，我們會在後續文章中詳細介紹，期待你的關注。
明天會是什麼樣？
目前的可視化智能研發是 AVA 版圖中很重要的組成部分，但還處于很初級的階段，隻能滿足基本的研發訴求和業務場景。明天會是怎麼樣？在我們的規劃裡還有長長的功能清單等待我們去實作，很多讓人興奮的能力讓我們充滿期待，希望他能指引我們進入到下一個資料可視化時代。
研發态：全智能圖表推薦，代碼極簡
目前智能圖表推薦會産出配置項代碼，需要我們拷貝至代碼中以穩定圖表展示方式，雖然相比以前已經大幅提高了研發效率，但依舊繁瑣。而之是以需要拷貝回代碼中，源于我們目前推薦算法還不完善，而我們相信，随着算法代碼的不斷優化，在不久的将來，我們很多場景都可以僅需一行極簡的代碼，完全依賴智能圖表推薦輸出就能滿足我們的業務研發需求。
閱讀态：互動分析元件智能增強
前面描述的都還是研發态的智能輔助，而 AVA 的目标還會延伸到閱讀态，最典型的就是互動分析元件的智能增強。簡單點的比如說 Slidebar 的動态出現，我們可以根據目前圖表類型以及顯示空間的大小，計算可視化的有效顯示負荷，并随着圖表需要渲染的資料量的變化動态決定是否出現 Slidebar 去做互動分析的增強。更複雜的我們可以自動做關聯圖表的關聯，在适合的場景下自動開啟關聯刷選、下鑽、動态圖表類型等能力。
分析态：運作時的可視分析智能輔助
更進一步，不管是靜态展現還是動态互動，目的都是為了分析，AVA 延伸到閱讀态的最終目标是幫助人們更好的獲得資料洞察，是以 AVA 未來會做運作時的可視分析智能輔助，比如自動識别出趨勢、回歸、奇異點等統計特征，實作自動示範模式的 Storytelling 能力透出去更高效的幫助人們解讀資料。
結語
AVA 由螞蟻金服 AntV & DeepInsight、新零售技術事業群 FBI、盒馬 Kanaries 等阿裡巴巴集團内多個核心資料可視化技術和産品團隊聯合共建，包含前後端工程、算法與模型，随着能力完善将逐漸對外公開并以開源方式運作，期待大家的關注與參與，歡迎任何的建議或意見。
今天分享的可視化智能研發能力是 AVA 大版圖上重要的組成部分，同時也承載着 AntV 産品矩陣通往未來智能可視化方向的重要使命，懷揣「讓人們在資料世界裡獲得視覺化思考能力」的夢想前行，更多了解 AntV，歡迎關注我們的 GitHub 項目，點亮 star 了解我們的實時動态，期待 pr：
- AntV 官網： https://antv.vision
- G2： https://github.com/antvis/g2 G2 是一套基于可視化編碼的圖形文法，以資料驅動，具有高度的易用性和擴充性，使用者無需關注各種繁瑣的實作細節，一條語句即可建構出各種各樣的可互動的統計圖表。
- g2plot： https://github.com/antvis/g2plot g2plot的定位是開箱即用、易于配置、具有良好視覺和互動體驗的通用圖表庫。
- F2： https://github.com/antvis/f2 F2 是一個專注于移動，開箱即用的可視化解決方案，完美支援 H5 環境同時相容多種環境（node, 小程式，weex）。完備的圖形文法理論，滿足各種可視化需求。專業的移動設計指引為你帶來最佳的移動端圖表體驗。
- G6： https://github.com/antvis/g6 G6 是 AntV 旗下的圖可視化與圖分析引擎，G 來自于 Graphic、Graph ，意味着我們要基于圖分析技術做圖可視化；6 來自于《六度分隔理論》，表達了我們對關系資料、關系網絡的敬畏和着迷。
- Graphin： https://github.com/antvis/graphin Graphin 是一個基于 G6 封裝的關系可視分析工具，簡單，高效，開箱即用，取自 Graph Insight，圖的分析洞察。
- L7： https://github.com/antvis/l7 L7 是一個基于 WebGL 的開源大規模地理空間資料可視分析開發架構。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能為全球位置資料提供可視分析的能力。
- G： https://github.com/antvis/g G 是 AntV 幾個産品共同的底層 2D 渲染引擎，高效易用，專注于圖形的渲染、拾取、事件以及動畫機制，給上層 G2、F2、G6 提供統一的渲染機制。
- ChartCube： https://chartcube.alipay.com ChartCube 是一個可以快速完成圖表制作的線上工具，隻需要三步就可以建立出高品質的圖表。
- AVA： AVA 是一個智能可視分析架構，包含研發時的智能研發向導，閱讀時的智能互動增強，可視分析時的智能輔助。
關注「Alibaba F2E」
把握阿裡巴巴前端新動向