天天看點

知源 · 緻遠 - AntV 年度釋出

知源 · 緻遠 - AntV 年度釋出

導讀

AntV 目前覆寫了統計圖表、移動端圖表、圖可視化、地理可視化、2D 繪圖引擎和智能可視化多個領域,主要包含 G2、G6、F2、L7 以及一套完整的圖表使用和設計規範。得益于豐富的業務場景和使用者需求挑戰,AntV 經曆多年積累與不斷打磨,已支撐起阿裡集團内外 20000+ 業務系統,通過了日均千萬級 UV 産品的嚴苛考驗,是阿裡經濟體資料可視化最重要的基礎設施。

跟往年的品牌日一樣,今天依舊會有幾個底層基礎類庫的大量更新釋出,除此之外,非常高興的向大家介紹 AntV 産品矩陣新添的三個成員:

  • G2Plot,一個基于 G2,開箱即用、易于配置、具有良好視覺和互動體驗的通用圖表庫;
  • Graphin,一個基于 G6,專注關系可視分析領域的 React 元件庫,簡單,高效,開箱即用;
  • ChartCube,一個可以快速完成圖表制作的線上工具,隻需要三步就可以建立出高品質的圖表;

    他們都是 AntV 技術棧上的更高抽象的封裝或應用,詳見文稿詳情。

跟往年的品牌日不一樣,今年的品牌日主題為「知源 · 緻遠」,除了上述技術、設計的更新與釋出,我們真誠的向大家分享 AntV 團隊的由來與發展曆程,詳見文末 AntV 全員出鏡演繹的團隊紀錄片,匠心知源,同行緻遠。

匠心打磨,是時候給大家一個圖表庫了

G2Plot

G2Plot,一個基于 G2,開箱即用、易于配置、具有良好視覺和互動體驗的通用圖表庫。

G2 是一套基于可視化編碼的圖形文法,以資料驅動,具有高度的易用性和擴充性,使用者無需關注各種繁瑣的實作細節,一條語句即可建構出各種各樣的可互動的統計圖表。

每個人都能制作圖表,但并不是人人都能做出易讀,好用又好看的優秀圖表。如何從無聊的預設設定變成有洞見的資料圖表呢?我們融合了在商業智能(BI)中的可視分析與設計實踐經驗,基于 G2 的靈活、強大的可視表達能力,抽象常用圖表類型封裝出全新的可視化圖表庫 G2Plot。結合真實資料,制作圖表,擷取專業的可視化。

我們曾經說過 G2 是一個可以生産圖表庫的圖表庫,如今自證預言的推出 G2Plot 除了具備 G2 無限可能的可視表達能力外,G2Plot 最主要的特性還有:

  • 開箱即用:預設好用開箱即用的高品質統計圖表
  • 響應式:針對各種分辨率的響應、文本覆寫、文本超出限制做了精心的設計
  • 會講故事的圖表:提供了多圖組合、疊加、關聯,共同講述一個資料故事的可能性
    知源 · 緻遠 - AntV 年度釋出
知源 · 緻遠 - AntV 年度釋出

提前預告的還有 G2 4.0,在 G2 1.0 - 2.0 階段我們專注于圖形文法,解決了資料到圖形的映射問題,使用者可以通過自由組合圖形文法快速搭建各種圖表。G2 3.0 随着業務對圖表體驗需求不斷更新,我們對圖表元件以及互動進行了改造,提供了更加靈活的配置以及自定義功能。而此次 G2 4.0 對我們來說是一個很重要的新起點,我們對底層架構做了大量的重構工作,目前 G2 4.0 Alpha 版本已放出,穩定版預計将在兩個月後正式釋出,她将是一個專業的、給使用者帶來更多可能性的可視化底層引擎,在保證圖表優雅體驗的同時,4.0 将會更加關注于:

  • 圖形文法,資料到圖形的映射;
  • 互動文法,互動同資料、圖形的連接配接機制;
  • 元件體系,面向互動、體驗優雅;

更多關于 G2Plot、G2 的最新進展見文末連結。

點線析源遠,洞察關系資料

Graphin

Graphin,取名自 Graph Insight,圖的分析洞察,一個基于 G6,專注關系可視分析領域的 React 元件庫,簡單,高效,開箱即用。

G6 AntV 旗下的圖分析及圖可視化引擎,G 來自于 Graphic、Graph ,意味着我們要基于圖分析技術做圖可視化;6 來自于《六度分隔理論》,表達了我們對關系資料、關系網絡的敬畏和着迷。

目前圖分析已經被廣泛應用在金融反欺詐,公共安全,基礎設施監控,智慧醫療等領域。在這個過程中,我們需要一個強大的圖計算引擎,解決資料合規,挖掘問題。也需要相應的圖算法去解決圖的建構,分析問題。最後在前端,我們需要一個圖可視化引擎,為我們提供可視化分析能力,發現潛在的價值。

Graphin 就是在這樣的背景下誕生的,基于 G6 的底層能力一方面屏蔽掉一些領域專業的概念,同時又封裝進去很多常用的圖分析功能,進一步降低圖可視化領域的專業門檻,将這些關系資料進行可視化分析與探索。Graphin 具有如下産品特性:

  • 資料驅動:充分利用 React 架構特性,支援資料到圖的映射與變化;
  • 自動布局:内置豐富的布局,支援布局切換,滿足不同場景下的布局需求;
  • 分析元件:内置 Toolbar,ContextMenu,MiniMap,Filter 等元件,元件化開發,支援自定義;
  • 自定義樣式:内置節點與邊的樣式,支援使用者通過 JSON Schema 自定義;
  • 基礎分析:支援節點擴散,尋找邊關系等基礎分析方法;
  • 進階分析:開源後計劃新增時序分析(timebar),地理位置分析(map mode)等進階分析方法。
    知源 · 緻遠 - AntV 年度釋出

值得一提的是,G6 從 18 年開源到現在已經第 2 個版本,從基礎關系圖繪制到圖分析與圖編輯底座,而在 3.1.版本後的 G6 已重新聚焦在圖分析方向,我們将會給出另外一個産品去承載圖編輯方向的需求。有了這個改變,今天我們帶來的 G6 3.2 版本能夠更聚焦的提供:

  • 更豐富的元素:内置豐富的節點與邊元素,自由配置,支援自定義;
  • 更可控的互動:内置 10+ 互動行為,支援自定義互動;
  • 更強大的布局:内置了 10+ 常用的圖布局,支援自定義布局;
  • 更便捷的元件:優化内置元件功能及性能;
  • 更友好的體驗:根據使用者需求分層梳理文檔,支援 TypeScript 類型推斷。

除了上述預設好用、配置自由的内置功能,元素、互動、布局均具有高可擴充的自定義機制。

知源 · 緻遠 - AntV 年度釋出
知源 · 緻遠 - AntV 年度釋出

豐富的内置元素。🆕菱形、三角形、星型、卡片型節點。🆕arc 型、自動彎折的折線型邊。

知源 · 緻遠 - AntV 年度釋出

自定義元素及輔助展示及分析的元件——🆕邊綁定。

更多關于 Graphin、G6 的最新進展見文末連結。

圖表制作可以很簡單

ChartCube

ChartCube 是一個可以快速完成圖表制作的線上工具,隻需要三步就可以建立出高品質的圖表。

圖表制作——這個最常見卻也五花八門的需求,往往因為工具的領域閉塞性而變得麻煩。雖然設計師能畫出任何形式的圖表,但他們常常遇到要做資料的批量改動而手抖;雖然分析師可以使用辦公軟體熟練地制作圖表,但他們會因為靜态的圖檔不能互動而發愁;雖然程式員可以繪制高可用的互動式圖表,但他們常常為了學習代碼類庫而撓頭……讓你在制作一張簡單圖表時感受到挫敗的,通常是一個淺淺的門檻。這個門檻可能是“圖例怎麼對不齊”,也可能是“資料怎麼行列轉換”,還可能是“分析這個目标我該用什麼圖表”……困擾你的是哪一種?

為了讓 AntV 多年沉澱的專業技術可以一步服務于你,我們開發了一個線上工具:圖表魔方 ChartCube。

知源 · 緻遠 - AntV 年度釋出

你可以完全不懂如何處理資料,你可以沒聽說過任何圖表類庫,你也不需要寫一行代碼。通過最直覺的互動,你都能制作出你需要的圖表。

也許你想為你的營運文章制作一張插圖,也許你需要一份滿足格式要求的資料,甚至你需要一份直接插入網頁的代碼,ChartCube 都能支援。

利用 ChartCube 制作圖表,過程非常簡單。通常你隻需要三步:選擇圖表、配置圖表、導出圖表,歡迎試用。

更多關于 ChartCube 的最新進展見文末連結。

優雅的 AntV 設計來了

優雅的視覺、互動與制圖

過去一年我們在統計圖表、關系可視化、地理可視化、圖表制作以及可視化站點方面投入了大量的設計資源,今天已連同上述各個産品一起對外釋出。而今年 AntV 設計的關鍵詞為“優雅”,我們希望在視覺、互動與制圖三方面給大家帶來些優雅的設計。

在優雅的視覺設計裡,我們最大的改進是對資訊過載的處理,如智能檢測,以資料标簽為例,資料标簽如果不知道它的背景色是深是淺,是疏是密,就會出現标簽過密、顔色看不清等系列問題。這次産品釋出中,标簽結合顔色檢測、碰撞檢測、圖形檢測、超區域檢測,我們已能解決這些問題。除此之外還有符合美學選擇和專注的全新視覺樣式,很多人期待的 Dark Mode 也會到來,将與 Ant Design 相關元件、頁面無縫融合,整體和諧優美。

知源 · 緻遠 - AntV 年度釋出

在優雅的互動設計裡,AntV 在建構響應式系統時結合 Responsive design 與 Adaptive design,遵循宏觀層面保證核心資訊優先展示,微觀層面保證所有尺寸下細節資訊都有能力擷取到互動兩條基本原則,使得小到 mini 圖表,大到大屏顯示,AntV 總能保證重點資訊不丢失的同時輕松勝任各種尺寸、多種裝置。同時,互動文法的增強使得 AntV 在叙事能力有了進一步提升。

知源 · 緻遠 - AntV 年度釋出

在優雅的制圖設計裡,AntV 一直緻力于提供研發套件,這回我們把關注點聚焦到設計師身上,讓設計者進入圖表制作的全面提效時代,Sketch 插件 Kitchen 以及上面介紹到的 ChartCube,隻需 10 秒,輕松做出優雅圖表。

知源 · 緻遠 - AntV 年度釋出

更多關于 AntV 設計的最新進展見文末連結。

知源 · 緻遠

這是 AntV 發展的第 5 個年頭,從 2014 年第一位工程師的白手起家,到 2017 年第一個項目 G2 開源,現如今我們已經有了 7 個産品,幾十個項目在 GitHub 上釋出,團隊的規模也從 3-5 個人發展成橫跨螞蟻多個前端、設計部門 30+ 人員的專業團隊。

精彩視訊回顧

5 年來的起伏跌宕雖然不能說波瀾壯闊,但卻是我們生命中永不磨滅的印迹,藉由這 4 分鐘的視訊與大家分享過去這5 年 AntV 團隊所經曆的歡喜與失落,專注、專業、堅持,希望對這份匠心的知源,能與大家并肩同行緻遠。

知源 · 緻遠 - AntV 年度釋出

更多詳情見「

知源 · 緻遠 - AntV 的那些人,那些事兒

結語

過去一年我們從底向上重構了繪圖引擎 G,重寫了所有的元件(Axis、Legend、Annotation等),對 G2、G6、L7進行了重構,解決了各種複雜的資料場景适配問題,向着可視化工具開箱即用的方向發展。

我們看到各個産品的界限在不斷模糊,傳統圖表和關系圖混用、地理場景上的關系分析、多端融合要求我們不斷的從渲染引擎、元件、資料處理層面進行重構,使使用者可以無縫的對各個産品進行整合,智能可視化對可視化研發、設計、産品的影響已經出現,颠覆性的産品可能很快就會脫穎而出。

我們已經做好準備了嗎?還沒有,但我們已經在行動,我們是 AntV,螞蟻金服資料可視化團隊,一群有愛有夢的人,懷揣「讓人們在資料世界裡獲得視覺化思考能力」的夢想前行。

AntV,知源 · 緻遠!

AntV 品牌日的釋出詳情

AntV 項目連結

歡迎關注我們的 GitHub 項目,點亮 star 了解我們的實時動态,期待 pr:

G2Plot 的定位是開箱即用、易于配置、具有良好視覺和互動體驗的通用圖表庫。

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

G6 是 AntV 旗下的圖可視化與圖分析引擎,G 來自于 Graphic、Graph ,意味着我們要基于圖分析技術做圖可視化;6 來自于《六度分隔理論》,表達了我們對關系資料、關系網絡的敬畏和着迷。

Graphin 是一個基于 G6 封裝的關系可視分析工具 ,簡單,高效,開箱即用,取自 Graph Insight,圖的分析洞察。

L7 是一個基于 WebGL 的開源大規模地理空間資料可視分析開發架構。L7 中的 L 代表 Location,7 代表世界七大洲,寓意能為全球位置資料提供可視分析的能力。

G 是 AntV 幾個産品共同的底層 2D 渲染引擎,高效易用,專注于圖形的渲染、拾取、事件以及動畫機制,給上層 G2、F2、G6 提供統一的渲染機制。

繼續閱讀