编辑 | 邵一帆,陆家靖,赵远景,徐豪
数据分为具体的科学数据和抽象的、非结构化的数据,而数据可视化,是关于数据视觉表现形式的科学研究,是要对数据进行可视化处理,以使得能够明确地、有效地传递信息的一种技术。人大脑的1/3是用来处理视觉信息,因此借助数据可视化的应用,可以帮助人们更快速、便捷地获取数据并理解隐藏在数字背后的信息。数据可视化[1]目前主要分为三个分支:科学可视化,信息可视化,可视化分析。
科学可视化是科学之中的一个跨学科研究与应用领域,主要关注的是三维现象(建筑学、气象学、医学或生物学方面)的可视化,本文便不做赘述,下面为大家介绍的是部门在信息可视化和可视化分析方面的探索与实践。
信息可视化处理的对象是抽象、非结构化的数据。比如我们常见的图表、流程图等。信息可视化广泛运用于此类业务场景,存在于各种系统中。对于数据组织和管理,我们可以根据数据的不同类型,选择不同的数据库:
信息可视化的开源库常用的有:Echarts[2], RAWGraphs[3], AntV/G2[4], D3js[5] 等。其中,AntV/G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。使用时,可以无需关注图表各种繁琐的实现细节,相比较之下,AntV/G2更便于我们团队进行二次开发。目前,我们团队通过借助AntV/G2,开发出了内部TimeChart库, 配合时序数据结构专门处理时序相关图表。
Hera监控平台:可以收集监控数据,做规则计算,统一分析,还可以发出告警,融入项目管理。该平台主要使用的是时序数据,即带有时间戳的数据。同一指标名称、标签集合以及时间戳的数据流,以指标(Metric)的形式存在时序数据库中。统计图表则使用了折线图、柱状图、条形图、面积图和双轴图等。使用这些图表可以清晰地观测到各种统计信息,包含变化趋势、分布统计、联合对比等。
观察变化趋势,不同分位数值,如图:
环比,同比,联合对比,如图:
图与表的结合,分布统计,如图:
前端监控平台:主要收集重要页面信息、性能指标、设备信息、运行时错误等。通过统计各项指标信息,当发现异常之后可进行下钻分析,得到更细致的观察数据。具体而言,我们可以借助图表中的时间线,迅速定位到资源所在的时间段。如图所示,当发现性能指标超出预值时,我们可以通过页面资源加载时间分析得出:
审批中心系统:主要应用于审批流程、规则制定、业务流程等具有复杂逻辑的业务中。即使是借助文档、注释、例子也不能很好地帮助人们快速理解逻辑规则,更难以实时配置。针对以上痛点,我们借助数据可视化技术,自研流程引擎。将杂乱无章、冗余的数据整合、分析、经过视觉化映射处理,转化为用户一眼可得、并可快速理解感知到的简单美观的审批流程。我们采用树形数据结构,配置审批流程,如图所示:
当然还有很多例子,我们就不一一列举了,可视化可为我们带来不仅仅是视觉的感受,更是对抽象的描述,对数据的洞察,与人的交互。
Antv/G2是一套主要面向统计图表,以数据驱动的高交互可视化图形语法,具有高度的易用性和扩展性。我们的图表均基于G2技术进行二次开发。
图形语法是一套用来描述所有统计图表深层特性的语法规则,该语法回答了『什么是统计图表』这一问题,以自底向上的方式组织最基本的元素形成更高级的元素。
G2 所构建出的图表是由一系列独立的图形语法元素组合而成的:
当数据变成海量、高维、多源、人脑无法直接处理与分析时,那就需要数据的挖掘和分析。然后结合数据可视化辅助用户从这复杂的数据中快速理解数据含义,分析出重要指标,更好的回答业务问题,以便做出更明智的决策。当数据量较大、数据关系复杂的情况下,我们推荐使用图数据库的方法,即使用图结构进行存储和查询的数据库,相较下,分析者借助图数据库能从多个角度观察数据库中的数据,从而深入了解包含在数据中的信息。
可视化分析方向相较于科学可视化,信息可视化发展较晚,应用还不够普及,体系还不完善。关系型数据库有SQL,时序数据库也有PromQL,而图数据库的查询语言还没有形成统一的标准。可视化分析大多存在的是专业软件,开源库较少,主要有:AntV/G6[6], sigmajs[7], joint[8] 等。相比其他开源库,AntV/G6在当前图分析领域里所提供的布局和交互能力可以覆盖常见的业务需求,其功能更完备,扩展性较强。
Mesh服务治理平台。在对服务进行路由管理,负载均衡,限流熔断等的同时,还可以对服务关系,调用路径等进行分析。关系分析分为:
AntV/G6是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。基于G6,进行开发的有图分析模块。
G6的整体运行流程,如图:
G6目前支持SVG, Canvas,即将支持WebGL。
G6在API层抹平了渲染器之间的差异,用户可以根据实际需求,选择不同的渲染器。
主要有节点,边和Combo。
图布局[9]就是G6的灵魂。它会计算好每个节点的位置,设置节点的x和y的值,最后交给渲染器绘制。G6有大量的内置布局,还可以自定义和组合不同布局。这里举两个实际使用的布局。
同心圆布局将节点从内向外计算,将普通节点,一层一层的放在换上环线上,而将关键节点放到中心。如何确定关键节点呢?通过sortBy字段,我们可以根据节点的入度或者出度来确定,也可以根据权重,比如调用次数等。
在我们单个服务分析中,中心点基本确定的情况下非常适用。单服务多版本的情况下,将选中的多个版本节点指定权重,可以将版本节点指向中心,其他关联节点向外辐射,完美地实现了单服务多版本的分析需求。
力导向布局就是建立了一个物理仿真系统。每个节点就是有个带有能量的粒子,粒子与粒子之间存在斥力,而边对所连接的粒子存在牵引力。就这样系统中的粒子在斥力和引力的不断作用下,不断的发生着位移,逐渐趋于平衡,同时系统能量也不断消耗,最终不再发生位移,达到最终的平衡。
在我们集群服务分析中,中心点具有不确定性。在不确定、多中心的情况下,使用力导向布局较为合适。在不同的力和速度的影响下,力导向布局的模拟设计计算耗时。因此需要使用者按需设置最小移动长度(minMovement)和最大迭代次数(maxIteration)。同时,也可以通过LayoutPipes去设置前置的初始布局做进一步的优化,如此可以加快收敛效率,更快地达到稳定效果。
交互由三部分组成,事件(Event)、行为(Behavior)和模式(Mode)。三者关系如图所示:
对于可视化分析,更多的结合大数据分析。这一块我们公司有着专门的大数据团队,很多业务方向都有应用,可视化技术也是其中发挥了重要的作用。开源社区中最近新开放使用的GraphInsight[10]也非常值得关注。
近几年大家进入精耕细作,降本增效的时代。人们对数据的需求已从数据的组织与管理提升到了对其进行分析与挖掘。在信息可视化方向,传统的图表已经很难对多样复杂的数据进行直观地展示,人们需要更通用的,更丰富的信息可视化技术。在可视化分析领域,巨量的多维度的数据也给可视化分析技术带来了挑战。蚂蚁金服AntV团队在可视化方向,勇往直前,砥砺前行。我们团队也是立足应用与实践,积极参与开源社区,反馈问题,提出建议,积极共建。我们团队不仅在公司业务上多方应用,用于应用监控,前端监控,审批中心,服务治理等系统,也在社区拿到了年度AntV Outstanding Contributor。期望未来能更多地参与社区,更好地应用可视化技术落地业务场景,帮助人们化繁为简,洞察数据。
陈华嗣,来自技术平台部
数据可视化: https://item.jd.com/12567310.html
[2]ECHARTS: https://echarts.apache.org/en/index.html
[3]RAWGraphs: https://www.rawgraphs.io
[4]G2: https://g2.antv.vision/zh
[5]D3: https://d3js.org/
[6]G6: https://g6.antv.vision/
[7]sigmajs: https://www.sigmajs.org
[8]jointJS: https://www.jointjs.com/
[9]图布局: https://g6.antv.vision/zh/docs/manual/middle/layout/graph-layout#concentric
[10]GraphInsight: https://graphinsight.antgroup.com