蚂蚁金服数据可视化解决方案 AntV 3.0 全新发布

image

AntV 是蚂蚁金服全新一代数据可视化解决方案,主要包含「数据驱动的高交互可视化图形语法」G2、专注解决流程与关系分析的图表库 G6、适用于对性能、体积、扩展性要求严苛场景下使用的移动端图表库 F2 以及一套完整的图表使用指引和可视化设计规范,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。

AntV 是阿里数据可视化领域的技术基础设施,为集团内外 2000+ 个业务系统提供数据可视化能力。

今天,蚂蚁金服带来了 AntV 3.0。我们不妨看看有什么值得关注的变化。

先看看 G2 3.0 有什么改变

2017 年 11 月 22 日,数据驱动的高交互图形语法 G2 3.0 发布了,从这个版本起,G2 将以 MIT 协议正式对外开源。

3.0 最大的变化,无疑是数据处理外置。旧版本中,Frame 和 Stat 是和 G2 强耦合的,统计处理甚至会入侵到图形语法中。这会带来几方面的问题:不少功能受限于耦合比较难升级;数据处理是非常大的领域,内置的话扩展起来难免畏首畏尾,担心因此影响 G2 的体量;耦合的情况下,给数据处理和图形语法两方面都带来了新的理解成本。

基于这些考虑,开发团队认真梳理了底层架构,决定从 G2 中把数据处理部分抽离出来,封装成了一个专门的数据处理模块 DataSet。从此 G2 内部不再有数据处理、布局和统计方面的代码包袱,继续专注强化“高交互图形语法”方面的特长;而独立的 DataSet 模块则通过简单、强包容性的架构,以及状态量等策略扫除了升级扩展的障碍,得以从开源社区大量借力,不断丰富“数据驱动”这一特性的内涵。

G2 3.0不强依赖DataSet,在不需要复杂数据处理时可以不引入

独立出来的 DataSet 主要提供三个方面的能力:

  1. 数据连接(connector):用于接入不同类型的数据,支持不限于CSV/GeoJSON/Hierarchy等;

  2. 数据处理(transform):进行数据变形、数据转换等,是 DataSet 的核心功能,负责和扩展了 G2 在统计、布局、数据补全等等方面的数据处理需求;

  3. 状态量管理(state):支持不同数据视图之间、数据视图和图表之间的通信;

抽象出这三个方面的特性后,DataSet 模块就得以简单而广泛地从社区接力。譬如采用 d3-dsv 接入 CSV 类型的数据只需要下面寥寥两行代码:

import csvParse from 'd3-dsv';
DataSet.registerConnector('csv', str => csvParse(str));

引入社区上各种布局算法、统计函数也类似,非常简单就可以完成,马上就能扩展 G2 的绘图能力。譬如通过引入 d3-hierarchyd3-voronoi 就可以轻松画出比老版本更成熟的 Treemap 和 Voronoi 图:

image

Treemap

image

Voronoi diagram

致敬 d3,但不止步于“d3”,事实上,结合 DataSet 和 G2 的图形语法能力,能画的图可能比 d3 还要多一些,比如 Voronoi 在极坐标上的变体,直方图、六边形分箱的 offset 支持,矩形分箱的实现等等。

image

Voronoi 在极坐标上的变体

image

直方图、六边形分箱的 offset 支持

image

矩形分箱

接下来看一下关系数据可视化框架 G6 1.2 有哪些变化

1.2.0 中,一方面,将布局机制抽象到了 Graph 层次,有了完备、统一的布局机制,这使得大家更容易的拓展 G6 的布局。另一方面,将常见的功能需求和社区内优秀的算法进行总结、封装,沉淀出一部分实用的插件以供大家使用,以求最大限度的降低大家的使用成本。

统一分层布局

得益于 graphviz 的研究成果以及 cpettitt 的工程实现,经过简单的封装产出的统一分层布局插件。有了该插件以后大家把手头毫无顺序的网状数据丢进 G6 ,就能绘制出符合人基本美学和阅读习惯的分层关系图。该插件着重展示关系数据的流向,非常适用于流程类关系数据。

image

plugin.layout.dagre – 统一分层布局

分析模板

G6 官方自研的、用于解决带权简单图的分析模版。适用于页面流量分析、系统调用分析、大中规模知识图谱等等业务场景。

image

plugin.template.analysis.maxSpanningForest – 最大生成森林图分析模版

最后看看移动端图表库 F2 1.0 的改进

F2 1.0 变得更轻、更快了。F2 是一套高性能、高扩展的移动端图表库,主要用于对性能、大小、扩展性高度敏感的场景。在提供了几十种图表的基础上,压缩后代码不足 70k,全部大小 100k。此外,可以非常容易地实现个性化的图表。

1024 条数据的情况下折线图的性能对比

image

真实场景

image

数据可视化解决方案 AntV 主要包含的三个项目

有关 AntV 3.0 的详细更新内容请点此查看

Taken from:

蚂蚁金服数据可视化解决方案 AntV 3.0 全新发布