阅读 241

今天聊:如何深度探索图可视化与分析能力

前端早早聊大会,与掘金联合举办。加 codingdreamer 进大会技术群,赢在新的起跑线。


第二十九届|前端数据可视化专场,高强度一次性洞察可视化的前端玩法,7-17 全天直播,9 位讲师 9 个小时的知识轰炸(阿里云/蚂蚁/奇安信/小米等),报名上车👉 ):

大会海报  (3).png 所有往期都有全程录播,上手年票一次性解锁全部


正文如下

本文是第十二届 - 前端早早聊可视化专场,也是早早聊第 80 场,来自 蚂蚁金服 - 十吾山果 的分享的讲稿剪辑,跟进录播和加可视化群加微信 zaoeva。

十吾山果.001.jpeg

一、目录

十吾山果.002.jpeg

大家好我是十吾,我今天和山果同学一起和大家探索图分析与图可视化这个领域的一些知识和业务,我会从前 3 个部分对为大家进行分享,后 3 个部分是山果同学和大家分享。

十吾山果.003.jpeg

我是来自体验技术部的前端工程师,我也是 AntV G6 的核心开发者,G6 是我们部分研发的一个开源图可视化与分析引擎,是一个前端的开源类库。首先,我们会先一起了解一下图可视化的简史,然后重点介绍一下在学术上面常见的一些图可视化的技术,最后大家再一起概览 AntV G6 的一些技术和愿景。

二、图可视化简史

十吾山果.004.jpeg

我们从这个字面意思来看,可能会认为中文的图会代表图像、图画,但是事实上我们在这个领域来看,它不是指这样的一种图像或图画,也不是指我们视觉上所看到的这种节的这种表达形式。

事实上它是指一种数据结构,代表的是实体和关系的集合。实体就是我们常说的节点,关系就是我们常说的边。关系就是指实体之间的关系,在我们离散数学中可能会学习到的一个概念。

什么是图可视化

十吾山果.005.jpeg

图可视化就是把图数据结构或者可以说是关系数据,直观地展示给终端用户的一种手段,它能够辅助用户去分析复杂的关系数据。

图可视化它大致可以分为 3 大类:弧线图邻接矩阵、和们最为常见的点线图。可能邻接矩阵不是非常直观,邻接矩阵的每一行每一列都会代表一个节点,也就是实体。如果这两个实体或者说这两个节点之间有关系,则相应的格子上就会被标记,而格子颜色或者是标记颜色的深浅,代表了这两个实体之间关系的权重或者是类别。

除了这基础的 3 种分类以外,现在已经有了非常多的扩展。比如说我们常见的这种图(上图左下角),其实它就是弧线图,把它的坐标系变成了极坐标系,就可以成为这种环形的弧线图。点线图(上图右下角)也有很多的扩展,有些技术会把它绘制成这种辐射状的结构。

图之源起

十吾山果.006.jpeg

图在公元前 1400~1366 年就已经被使用在一种叫 morris 的游戏当中,但是直到 3000 年后,我们熟知的欧拉才在他的哥尼斯堡七桥问题中使用了图的思想来解决路径追溯的问题。这个问题大致是,有一条河把大陆分割成了两岸和两个小岛,且河上有 7 座桥。如何才能不重复地、一次性地走完这 7 座桥,回到原出发地。

在这个问题中,欧拉实际上并没有把这个图绘制成我们现在的图可视化的形式,但是他使用了图的思想来解决问题,直到 100 多年后,数学家 Ball 在他的数学书中,才把欧拉的灵魂画手画出的这种图抽象表达成了比较接近我们现在的点线图这种表达形式。

三、重点技术概览

十吾山果.007.jpeg

用户任务驱动

十吾山果.008.jpeg

用户驱动是指以终端用户的探索交互感知任务为导向来进行可视化的设计和实现。为什么要这样做?因为可视化是面向和服务终端用户的,辅助用户来理解数据。一个好的可视化应该能够让用户便捷的获取他们想要的信息,因此我们必须是以用户在探索时所持的任务来指导我们最终的设计。

一般来说我们可以把用户在图上的任务分为基础图任务和高级别图任务。基础任务比如说基于拓扑结构的任务,举些例子,找到一个节点的邻居节点,也就是说找到一个人,若这个图代表是一个社交网络,可能会找到一个人的直接朋友;找到某个节点到某个节点最短路径小于 n 的节点;或是找到一些节点的共同邻居;找到两个节点之间的最短路径…… 这些都是用户从图结构上可能会探索的一些任务,也可以套到我们业务中的某些任务当中去,后面我会简单介绍一下我们在业务中出现的一些任务。

还有一些基于属性的任务就非常的好理解了,比如找到具有某些属性的节点或边浏览任务可能是指用户希望跟随从 a 节点到 b 节点的一条路径,然后再深度探索这条路径上的其他信息,回溯撤销就是在交互过程中希望回撤到上一步的结果,进行往复的这种探索。

高级别的任务,比如说让用户去对比多个图来找到它们之间的异同点,假如图数据中有错误的信息,那么如何才能让用户快速的定位和发现这些数据中的冗余、错误、重复的节点,还有让用户观察图是如何随着时间改变的,这种任务在时序图的可视化中非常常见。

减少视觉混乱

十吾山果.009.jpeg

第二个重点的技术是如何减少视觉混乱,视觉混乱在图可视化中是一个非常大的问题。在目前我们业务数据逐渐庞大的今天,视觉混乱也成为了一个让人非常头疼的问题。它是指在过量的元素或者它们不合理的表达方式或组织方式,导致用户在看这个图时,在视觉上感到非常混乱,且在此图上执行某些探索任务时效率低下。

这个问题在大规模图上特别严重,甚至某些数据有可能会出现节点数都超过屏幕像素点的情况。一个好的可视化应该有尽量少的视觉混乱。在学界有一些理论和技术来尽量减少视觉混乱。我们可以在可视化设计的时候考虑这些点来进行一些优化。

十吾山果.010.jpeg

首先我们从节点上来看,在超大规模的图上,建议要进行节点的过滤和下采样,提取出一个具有代表性的网络,这样用户才能更清晰地看清整个图。在大规模图非常混乱的情况下,信息传递的效率是非常低下的,我们不如用一个信息量比较少,但能够快速直观传递信息的这种手段来展示。

另外一个非常重要的技术就是合理的图布局。假如说我们在一个比较大甚至不用太大的图上,我们使用一种随机的布局来分布这些节点位置的话,可能会出现一些非常长的边或者边之间出现非常多的交错,节点之间出现非常多的重叠,这种是强烈的干扰了用户的观察,使用一些合理的布局算法,能够把一些关系比较近或根据节点中的某些信息来排布节点在屏幕中的位置,用户能更清晰地看清节点的分布情况以及节点之间的关系。

还有一些其他的技术,比如把区域分组或者是在布局时考虑一些聚类信息,让聚类的分布更清晰,层次提取可以根据节点它的某些特性来对节点进行划分归类,把这一类的节点使用一个超级节点来代替。用户在初次探索大规模图时,可以先给出一个抽取过层次的、节点较少的图,然后再让用户进行下钻式的探索。

十吾山果.011.jpeg

在边的处理上面最重要的其实是减少边与边之间的交错以及边与节点之间的重叠。那么在节点固位置固定的时候,我们可以使用一些现有的策略和算法去绕过这些节点,让边能够有一些弯折,还有一些技术使用这种平滑的曲线表达边,作为一种流状边来聚合,达到这种更加清晰的效果。

边绑定技术就是指把边根据趋势或者是边数据上的特性进行聚类,把它们“绑“在一块,就像扎头发一样,我们把一个比较混乱的头发给扎成一绺一绺的,这样能更清晰地看清这个图的整体趋势和骨架。

还有一些技术可能会在一个边非常密集的图上放置一个小的这样一个圆形窗口,然后这个窗口就可以根据用户探索的任务去设置一些过滤的方式。比如,过滤穿越这个小视窗的边,只保留那些有一个端点或者两个端点都在小视窗内的边来减少小窗口内的视觉混乱。

EdgeLens 是指一种允许用户在比较混乱的局部把边进行一定的形变,然后查看边下面的,被遮挡的部分。

十吾山果.012.jpeg

现在来看一下我们一些业务中的例子,也是我们常常会遇到的一些典型的例子。在这个业务中每个节点代表了一个人,然后他探索的链路是:先找到一个人,然后以这个人为出发点去查看这个人的一度关系和二度关系。如果使用一个随机的布局,或者是我们常见的这种力导向布局,可能很难满足用户去探索一度关系二度关系这样的一个任务,因为边太过复杂,它的节点就会被排布的比较混乱,这样不仅不能满足用户的探索任务,更是造成了非常严重的视觉混乱。

这种情况下,我们根据他的这样一个探索任务去使用合理的布局,比如这样的一个 radial 布局,它把蓝色的出发点放在同心圆的中心,然后它的一度关系放在第一圈,二度关系放在第二圈,这样能够更方便用户区分哪些是它的一度关系节点,哪些是它的二度关系节点。用户还可以在这个图上再进行子图的扩展,这就是根据用户的探索任务去设计一个使用一个合理的布局,也能够大大减少视觉的混乱。

在视觉混乱方面,最为常见的就是这种 label 非常密集、相互遮挡的情况,这种情况下,我们是建议在初始的时候可以不显示文本或者是进行筛选或采样显示少量的文本。在用户交互过程中,比如说 hover 节点或边时,再显示文本。如果用户要求第一次浏览时,必须要把所有的 label 都展示出来,我们就建议在这个 label 后面放置一个等大的白色背景框,这样就能大大减少 label 之间相互重叠导致看不清的情况,还有另一种减少视觉混乱的策略,让用户控制筛选,让他们能够有更多的探索的空间。

布局

十吾山果.013.jpeg

布局实际上是图可视化中一个非常基础、重要的部分。一个好的可视化,必须是在节点有合理的布局的情况下,才能高效的传递信息。布局就是指根据数据的一些特性,节点之间的关系,边或者是聚类信息等来计算节点在画图上的位置的这些算法。

我们最为常见的可能就是这种力导向的布局算法,但实际上现在已经有非常多其他的布局的方式,比如说通过优化目标方程的形式,或者是根据某些策略来一步一步的生成图,还有一些是要求必须要以规整的形状展示图(画成一个环形或者这种放射形)。

那么如何选择一个合适的布局呢,前面有说到我们在选择布局的时候,可能要考虑到用户的任务或者是这个数据的特点,一般来说我们会从 4 个方面进行考虑。

十吾山果.014.jpeg

第一个是数据结构。有一种图比较特殊,它就是树。树图一般是指一个节点有很多的孩子节点,且每个孩子节点必须只有这一个父亲节点,也就是说不存在回溯边,我们称这样的图结构为树结构,其他的图结构就是一般的图结构。

数据量上我们可以分为大规模小规模数据。

分析目的与我们前面提到的和探索任务、图任务比较相近的一种考虑维度。比如说想看聚类、看想看概览信息、想看一个关注点及其邻居。

视觉上可能也会有些要求,比如说是希望节点规则的分布还是比较紧凑的分布,还是我希望节点之间不要出现重叠。 假如是树结构的话,我们就推荐使用这种比如说脑图或者是紧凑树的布局,能够把图的层次信息更加清晰的展示出来。离散的一般图是指在图上节点数量相对比较多,但是他们之间的边数比较少,就是他们的关联比较少的情况,一般会使用更规整的形式来展示,就可以把它绘制成一个环形或者是格子形。密集的数据就可以使用其他的方式,就是边比较多的情况,使用这种规整的 grid 或者 circular 的形式会导致非常多穿越节点之间的边。

小规模图上,非常建议用力导布局,因为力导向布局模拟了物理系统,节点之间存在引力和斥力,在迭代过程中,终端用户比较容易理解这个图是如何生成的。但力导布局在大规模图上非常不合适,因为它的效率是比较低。此时,我们推荐用一些有一定预计算的方法,如 MDS 是一种高纬数据降维方法,在布局之前,它需要一个预计算:计算图的最短路径矩阵,布局阶段的速度比较快。

分析目的方面,如果想看聚类,可以用这种名为 fruchterman 或者其他的类似算法,在布局时这些算法能够考虑聚类的信息。如果想看关注点,刚刚提到的 radial 的布局非常合适,它以一个关注点为中心,按照其他节点到这个节点的维度数,也就是最短路径的长度来排布它们在同心圆上的位置。

我们在做图可视化设计时,必须要根据各种因素选择一个合适的布局算法,才能更好的传递图的信息。

交互

十吾山果.015.jpeg

最后,交互技术上,不管怎样设计交互,最终目的都脱离不了这几种:选择、探索、重配置、映射(指节点颜色或者节点的某些视觉属性映射到它的某些数据上)、概览、过滤、连接。比如下面这几个图,左图在做一些映射,中间图是在做重新布局,它能够快速的切换布局,让用户从不同的视角来观察图。右图从一个节点开始进行更多下钻式的探索,展开或高亮关注节点。

十吾山果.016.jpeg

实现这些交互的手段其实不外乎这几种,第一个是平移和缩放,这是最常见的探索方式,但它存在一个问题:在缩放过程中,上下文可能会超出视口。这时,可以使用带有一个 minimap,也就是缩略图作为一个导览,来辅助进行上下文的观察或者是直接在一个全图上面放置一个像放大镜一样的效果视窗。

有些人希望在放缩过程中不失去上下文,关注中心和上下文之间关系,于是,有人提出了这种鱼眼的效果,把关注中心放大,上下文被压缩,在观察整个图的过程中,不会丢失上下文和关注中心的连接关系。

过滤就是前面有提到的一些滤镜,能够把一些复杂的部分进行视觉混乱的降低。

在交互过程中配以一些动画,就能更好的保证可视化的整个设计会更加流畅,特别是在动态图或者是时序图上面使用动画能够非常大地减少视觉混乱和空间占用。

四、AntV G6

十吾山果.017.jpeg

前面我们提到了很多图可视化的技术,在有这么多学术输入的前提下,我们还有很多工业上业务的输入,造就了开源的图可视化与分析引擎 G6,它专注于关系数据的展示和分析。可以说熟悉了 G6 后,它可以帮助用户去为所欲为地展示和分析图。这里展示的图都是通过 G6 实现的,我们来大致看一下 G6 现在有哪些功能。

完善的可视化机制

十吾山果.018.jpeg

最基础的绘制上,G6 有非常丰富的内置的元素,包括节点、边、箭头,各种各样内置的元素,能够满足用户初步展示需求的内容。还有节点分组机制,允许用户去做一些节点的归类和操作。这些所有的内置元素都是支持自由的扩展的,比如把一个节点绘制成一个统计图表的形式,或者是一个卡片的形式,这就是 G6 自由的机制。

丰富的分析功能力

十吾山果.019.jpeg

在分析功能上面,现在已经有非常丰富的布局算法,树图布局有 5 种以及非常多的扩展,而一般图有 10+ 种,也有很多的扩展,并且 G6 的布局机制也非常完善,包括布局间切换、子图布局、数据切换等。

算法上面,我们逐步完善了各种常用的图算法,帮助用户更好地分析图数据。交互上面我们内置了很多常用常见的,我们业务中遇到复杂的交互,也提供内置的基础工具栏,减少业务上面对类似图分析产品的重复开发。

插件上面有分析插件来辅助用户分析。比如上文提到的缩略图、节点上的提示气泡、节点菜单。前文涉及的边绑定算法也内置在了 G6 当中,大大减少边的视觉混乱。当然,这些东西我们还是允许用户自由地扩展,支持自定义布局、自定义交互,从而实现一些目前内置还不能满足他们一些复杂的需求。

在性能上面我们也有非常多的尝试和努力。渲染性能上,现在已经支持局部渲染,能够在大规模较大规模的图上快速局部渲染和局部交互。算法性能上,我们现在已经支持了布局的 Web Worker,保证在整个应用当中图的计算不会阻塞页面。另外,马上就要发布支持 GPU 计算的图布局,使用并行的算法能够大大提升大规模图布局的效率。

十吾山果.020.jpeg

现在我们已经在业务中有了很多的落地和应用。蚂蚁的图业务呈爆发的阶段,我们现在有非常多的业务输入,当然也欢迎小伙伴们有更多给我们的输入,让我们能更好的成长。左图展示了一个关系图的应用,上图是一个流量分析的应用,还有很多如右图的业务会对节点进行深入的定制,从而展示更丰富的信息,在这种有时间轴的情况下,对时序数据进行可视化。

五、深入探索 图分析与图可视化

十吾山果.021.jpeg

大家好,我是蚂蚁大数据部的山果,刚才十吾同学给大家介绍了,大家应该可以很清楚的看到有非常强的学术背景,以及讲我们怎么样去做 AntV 这样一个图分析的引擎,我会承接它上面讲的三个内容,接着去讲后面三个。

先讲一下我们现在整个图分析与图可视化整个的一个行业现状,基本上你可以看到它是挑战与机遇并存。在第 5 部分我会去讲一下我们整个图技术它所落地一个业务土壤,也就是它的应用领域是哪些。最后我会着重去讲一下 AntV 推出了一款基于图分析与图可视化的一个解决方案 Graphin,我本人也是 Graphin 的一个开发者。

行业现状

十吾山果.022.jpeg

我们现在看到这张图是 2019 年 Gartner 的一个技术新兴曲线的趋势图,在这个图里面我们发现有两个 Graph,第一个 Graph 是知识图谱(Knowledge Graphs),第二个 Graph,它是一个图分析(Graph Analytics),而第二个Graph 就是图分析刚好非常吻合我们这次的一个主题,但是你可以看到它在象限里面,它是处于预期膨胀,然后另外一个交界处它属于一个理想破灭,也就是说图分析他现在正处于一个预期膨胀和理想破灭的一个阶段,为什么会出现这种情况呢?

十吾山果.023.jpeg

这个问题得从我们回顾整个互联网发展的 60 年可以看到,在互联网整个发展 60 年中,每隔 10 年都会有一个比较代表性的技术:

  1. 从比如说 60 年到 70 年,我们互联网有一些基础技术,技术的一个开始兴起;
  2. 到 70~80 年我们会发现像 TCP/IP 这样基础协议出来;
  3. 80~90 年,我们的一些技术应用像电子邮件;
  4. 90~00 年基本上都属于 Web1.0 阶段,我们常见的像一些门户,搜索门户,包括像一些简单的 BBS,校园内 BBS 都已经出来了;
  5. 01 年到 10 年,这 10 年实际上是 Web2.0 的一个高速发展阶段,这里面代表的技术就是在 05 年出现的 Ajax 技术,它实现服务端和客户端双向的通信,所以说这个时候像一些大型的网站,像淘宝这些网站都已经兴起了。

到 10 年之后,这 10 年你会发现是移动互联网高速发展的十年,其实它已经把我们生活的衣食住行都给囊括进来了。这条曲线能看出什么一个东西呢?我们会发现在曲线的右边实际上是我们的网络社会,我们的网络社会在不断的扩大,同样它也在挤占着我们现实的社会,因为每一次技术的发展都是对我们现实社会的一个深度的刻画。

比如说我这里面比如说 Web2.0 阶段:

  1. 社交需求会被通过 QQ、淘宝这些给取代掉,包括移动互联网我们是最有体感的;
  2. 衣食住行,现实生活中的衣食住行都已经被滴滴、美团,包括像淘宝这样的一些应用,已经慢慢在现实生活中和网络社会中都可以完成这样的一些需求。

所以这样一张图我们再推测一下,那 20 年之后其实会迎来一个智能物联时代,它会对我们的现实社会进行进一步的刻画,而我们的现实社会本身就是一个充满关系的社会,无时无刻不在产生着关于关系数据,我们是希望通过现实社会中产生数据去构建网络社会,网络社会中我们通过一些数据的分析能够产生一些关系的洞见,从而去治理我们的社会。

这里面刚才讲的是机遇,那难点当然有了,其实就牵扯到你整个关系数据的采集、存储、计算,以前来讲是一个非常困难的,但是随着 20 年之后,你会发现我们在这个技术上有一个很大的发展,像采集的我们现在有刚才第一个其歌分享的是菜鸟仓储,你会发现他们的采集用上了 IOT 设备,未来随着 5G 的商业化,其实我们的传输可能就会用到 5G 的技术了,现在图计算和图存储能力都已经大大提升了,这其实为我们提供了便利。

治理方面你会发现,当我们把这些关于数据进行采集存储之后,我们怎么去应用,同样会碰到很多难点,第一个难点就是合规问题,我发现 a 和 b 之间,他们俩之间这个关系,我利用他们俩这个关系能不能去给他做一些搜索和推荐呢,事实上这样一种行为实际上会存在一些法律的合规风险,那怎么去让整个数据能够隐私安全得到保护?

其实这里面也有很多的行业正在研究,比如说像共享智能去解决数据合规问题,包括我们怎么去分析一个图,这里面核心的就是图分析技术,包括我们怎么样去把这些关系应用到我们生活的方方面面,所以这张图就反映了说我们整个行业现在是一个机遇与挑战并存的时候,其实反馈到我们的技术和市场上,你会发现技术与市场已经开始行动了。

十吾山果.024.jpeg

这张图是 2020 年一个图技术的大图,这个图上分了很多模块,会发现 Graph Database(图数据库),还有像图计算引擎,还有一些图可视化,这三个实际上是整个图技术的核心能力。图数据库在最底层提供存储计算而提供存储能力,图处理引擎,它实际上是在中间层会把海量的图关系数据能够给它进行图的裁剪加工等等,最后上层的 Graph Visual Analysis 这个东西它就是图的分析,它可以基于这些数据去做一些分析和洞察。

而下面这 4 个它刚好是图技术所代表应用领域,它每一个比如说像知识图谱领域,它其实有好多好多新的商业化的产品已经出来了,还有像反欺诈,社交网络分析,还有网络安全等等,这是 4 个在这张大图里面已经有了非常广泛的领域。

应用领域

十吾山果.025.jpeg

上图是落地的场景,除了你可以看到现在应用领域中前 4 个是刚才这个图中所有的,其实除了前 4 个之外,我们还有像监管合规,还有像个人安全守护,比如说 Health care 等等这些东西非常多,这里面你可以看到底下都是一些比较经典的代表图,实际上现在在很多行业,比如说像我们做了很多业务,包括行业内已经有很多公司有一些比较成熟的产品,因为合规问题我们就不放出来,我们放一些简图,大家可以感受到,比如上面的知识图谱,你可以看到它中间是一个巴黎这样一个塔,它通过一步之推理能够做一个什么事情,我们现在很多有 AI 问答,实际上背后都是一套知识图谱的能力。

基于这样一个应用领域,我们会发现它整个制作的时候,整个核心流程还是同样的,也是刚才提到的三种技术,第一种就是图数据库技术,它会把整个的数据存储起来,结构化装载,最后到一个存储。同样存储完之后,我们会对这些图的数据进行一个处理,处理这里面还会针对有些图的数据会进行个案的分析,最后会到达一个可视化展示和应用的阶段。在这个里面前端同学就会遇到很大的挑战,就是说你从一个图的 Case Study 怎么到可视化,这里面一共有三个痛点问题,第一个就是我拿到是一堆图的数据,而且这个图的数据往往是非常巨大,它跟统计图表数据还不太一样,它的规模往往会非常巨大,这么一串数据你怎么去看,怎么去把它很好的可视化出来。第二就是有了这些数据之后,你怎么去理解这些数据?理解完之后你能不能从这数据中发现一些分析洞察,所以说这是我总结了三个痛点可看可理解可分析

十吾山果.026.jpeg

我们把刚才我说的稍微形象化,假如这是一个 100 个节点图数据有那么多关系,你会发现传统你去看的时候非常麻烦,但是如果简单通过图可视化的技术,你会发现是非常容易的。它会通过节点和边的构建关系,让你很快的发现你想要的一些节点。

十吾山果.027.jpeg

于是在业务应用场景中,我们理想是能够把这三层去完成,比如说可看可理解和可分析这三层,我们先从最底层可看开始,刚才十吾同学讲的 G6 对我们 AntV 推出了一个关于数据的渲染引擎和可视化引擎。你可以看到 E 呢是 edge 就是边,V 是 vertex 节点,它实际上就是把节点和边怎么样快速的去渲染出来,除了这种常规的关系数据之外,我们其实还有持续数据,还会有一些位置,比如说地图位置信息,包括还有海量的数据,其实都需要一整套的引擎去做,包括在视觉规范层,我们需要对节点进行规范,边境规范包括还有整个的设计样式进行规范。

可能大家不太理解的是第二层就是可理解,其实我们知道很多的图数据本身,关系数据本身它实际上是有一定的结构的,刚才十吾也讲到,比如说有些数据是有层次的,它可以构建成一个 tree 或者构建成一个树或者一个有效分层,反映到我们现实生活中,比如说一个资金的套现网络,它套来套去最终会回到原点,所以它天然就是环状的一个结构,如果我们的布局通过环形布局去布局它的话,就很快的能够让运营同学能快速理解。

比如说像一个资金分流网络,它一定是资金有多条链路,最终它通过一层层的分流汇聚,最后到达某一个节点,你这个时候你通过 diagram 布局就会非常的清楚,所以说布局其实解决的是一个数据可理解的问题

最后到上层的分析,刚才十吾同学也花了很长时间去讲了,在机构里面我们如何通过交互的手段辅助手段去做整个分析,这里面我想强调的是在 Graph 里面也就是在理想大图里面,我们还会提到一种叫高级分析,就是把业务特殊场景中的一些分析方法呈现进来,这是我们理想的一个可视化大图。

解决方案

十吾山果.028.jpeg

这两张大图里面我们就聊到第 6 个,就是我们基于这样一张大图,AntV 推出一款解决方案叫 Graphin,在回答Graphin 是什么之前我们先来看一下 Graphin 有哪些的特性。Graphin 官网上它有 6 个特性,分别是辅助分析高级分析技术分析自动布局数据驱动扩展机制

我们通过颜色映射出来,你会发现先看底层的紫色这个地方,它实际上数据驱动和扩展机制实际上代表了 Graphin 想做的一个产品目标,就是对开发者友好,我们选用的是 React 框架直接跟 React 框架集成,运用了数据驱动一种编程模型,并且能够基于 G6 提供一个非常强大的扩展机制。

第二个就像基础分析和自动布局,还有辅助分析,这些东西原先用任何一个类库,你都需要很多的方法去组合成,在 Graphin 里面我们会把它封装完全内置掉,你可以通过开关的方式去开启或者关闭,大大的降低了整个图分析的门槛以及开发的效率。

最后一个是我们重点要去打造的是高级分析,因为 Graphin 现在服务了很多业务方,实际上每个业务方都在不同的领域,他们领域中有一些特定的分析方法,我们希望最终能够沉淀下来,然后为整个行业内的同学提供一个服务。这里你可以看到这边左侧的最右侧,这是 Graphin 简单的一行代码,其实就已经可以完成一个非常复杂的图的分析。

十吾山果.029.jpeg

我们分别围绕 Graphin 这三个特性,这三个目标高级分析开箱即用开发友好分别去看,比如说我们第一个目的是希望能够做到开箱即用,那我们就必须把很多样式都已经内置掉了,我们内置有节点、边、颜色、色板,包括还会在接下来会发一个大的版本,会去把整个主题也会做进来,大家可以看到这个是很多类库做不到,因为我们最主要的还是会有一套设计规范在的。

十吾山果.030.jpeg

同样的我们也会把很多图的一些交互也内置掉了,像这里展示的右键菜单、显示和隐藏、高亮、收起展开、聚焦等等,为什么要做这些交互?

刚才十吾同学在 G6 那个篇章的时候已经跟大家讲了很多,其实目的就是为了看清节点看清边看清全局等等,然后减少一些视觉的干扰,能够帮助我们快速去分析和决策。

十吾山果.031.jpeg

在开箱即用里面还内置了很多布局,这个是 Graphin 内置应该有 7 种布局,最左侧的是通用布局的一个自由切换,当然右侧这边是我们会针对一些增量布局,比如增删改查它的布局也会做一些相应的改变。

十吾山果.032.jpeg

最后一个是 Graphin 的第二个特点,就是 Graphin 希望能够做到开发友好,你可以看到最左侧的这个地方是 Graphin 的组件代码,通过这个代码你可以看到我们对于 data 和 layout 是完全数据驱动的,在一个图的数据中,节点的状态、样式、位置,甚至说我做了一些操作,增删改查这些操作都可以通过操作 data,底下的图就会自动的渲染,跟你开发一个普通的 React 组件没有什么区别,非常方便。

当然布局也是一样,你给我什么样的布局,我会给你渲染什么样的布局。同样的我们右侧这个图是 Graphin 官网的一个截图,它其实突出了就是说我们会有很多的一些扩展方案,像节点类型,边的类型,图标类型,布局算法都是可以提供扩展的。

最后是 Graphin 想做的高级分析,我们希望沉淀一些领域方案,下面两个图你可以看到在金融风控领域。

十吾山果.033.jpeg

有的时候需要对个案进行探索分析,包括在知识图谱领域,我们也需要对知识进行推理,这两个有个共同的特点就是说我能够通过一个节点扩散出一批节点再通过一批节点中找到关键节点再进行扩散再预测,整个过程是需要所有的节点位置是可预测的。扩散的过程是非常稳定的,扩散结果也是可回溯的,比如这个图你可以看到就像福尔摩斯探案面板一样,能通过一个线索找到另一个线索不断的扩展,在图谱领域也一样,它能够快速的通过图谱推理能够把整个知识构建起来。

十吾山果.034.jpeg

这其实是两个领域它沉淀的一个共同方案,我们可以先直接看一下结果,这个结果里面 Graphin 会提供一种叫做渐进分析布局,最左侧是一个有动画的,最右侧的是一个无动画的,无论是哪一种其实都能够很快的帮助,以一种有需要这种关系探查,关系发现能够很轻松很快速就能做到。

十吾山果.035.jpeg

具体的技术方案,我放在附录里面,如果有兴趣的,我们到时候可以再交流,限于篇幅问题我就不展开去讲。当然高级分析里面不仅限于刚才讲的渐进分析,我们在未来还计划有地理空间分析,持续分析,分组分析和算法分析,分组分析,你可以看到上面这个图实际上是对于节点的分组,下面这个图实际上是对于边的分组,包括算法分析上面这个图,它实际上是通过一个图里面去发现共同的 Python,然后对 Python 进行一种合并。下面你可以发现通过直接调用 G6 的最短路径算法,就可以快速的找到它最短路径,这些都是一些高级分析方法,能够帮助业务快速的去做一些分析和探查。

这里 Scott 老师说推荐本书,这里我就推荐这本书,就是图分析与图可视化,它最关键是下面这句话,在关联数据中发现商业诉求

当然也非常欢迎对图感兴趣,对可视化感兴趣,可以加入我们的团队,我和十吾分别在两个团队,但我们也属于兄弟团队,我所在的团队是在大数据部体验技术部,我们有很多的 BI 产品,包括数据分析,感兴趣的同学对商业 BI 感兴趣的同学可以加我的微信,我们可以快速的进行内推,然后对体验技术部门,其实我们体验技术部也有很多的产品,像 AntV、AntD、语雀这些东西都非常出名的,然后大家有兴趣也可以直接欢迎加入。

七、附录

十吾山果.038.jpeg

十吾山果.039.jpeg

十吾山果.040.jpeg



别忘了第二十九届|前端数据可视化专场,高强度一次性洞察可视化的前端玩法,7-17 全天直播,9 位讲师(阿里云/蚂蚁/奇安信/小米等),报名上车👉 ):

大会海报  (3).png

所有往期都有全程录播,可以购买年票一次性解锁全部

👉更多活动


文章分类
前端
文章标签