阅读 3058

「蚂蚁金服」Hello World 图可视化

引言 —— 图可视化是信息可视化的子领域,它通过展示元素、关系,帮助用户获取数据的洞悉能力。它已被广泛地应用在流程图、社交网络、英特网、蛋白质网络等关系数据的呈现。本文参考[1][2]两篇图可视化学术论文,简要介绍图可视化的历史、背景、机遇与挑战。


G6 —— 专业的图可视化引擎。让关系数据变得简单透明,让用户获得 Insight。
G6官网:antv.alipay.com/zh-cn/g6/3.…。欢迎关注。
GitHub:github.com/antvis/g6。欢迎 Star。


什么是“图”?

中文字“图”在大家的传统认知里指的是图画、图像,而图论与可视化中的“图”—— Graph 则有着更精确的定位:主体(objects)与关系(relationships)的组成。它甚至不局限于视觉,主体与关系的数据也可以称为图。而呈现到视觉上,即图可视化,一般有以下几种表达方式:

图 1 (左)Arc Diagram 弧线图。(中)Adjacency Matrix 邻接矩阵。(右)Node-Link Diagram 点线图。


而以上三种图在不同的场景中由于主体样式、布局方式的不同,又有着各自的变种。例如弧线图的变种 Chord Diagram 弦图(图 2 左),点线图的变种 Radial Tree 辐射树图(图 2 右)。

图 2 (左)Chord Diagram 弦图。(右)Radial Tree 辐射树图。


如今,图已经被深入应用到各个领域中,而它的起源带着一丝神秘的色彩……

图之起源

图是一种传统且强大的工具,它在帮助人类交流、理解世界、解决科学问题上有着悠久的历史。图概念的出现最早可追溯到古埃及((Rameses I 👇1400-1366 B.C)[3],图被用在了一种名为“Morris”的游戏中。

                                                                        

看来这位法老在其在位仅有的一年零四个月中,子民游戏人生很幸福。


图 3 Morris 游戏。来自13世纪的 “Book of Games”。


在那古老的年代,人们大概只觉得图“有趣”,它强大的科学用途一直没被发现。直到1736年,伟大的数学家和物理学家——莱昂哈德·欧拉👇:

                                                                    

出版了著名的关于柯尼斯堡七桥问题的论文。在该论文中,欧拉使用图的思想解决了路径追溯问题,即七桥问题。这标识着早期图到现代图绘制的转换。

然而,欧拉的图更像是一个“(灵魂画手的)图画”,而并非现代常见的“图”(见图 4 左)。150 年后的 1892 年,Ball 👇:

                                                                    
这位数学家同时也是一位律师,文理果然不分家!

在他关于数学的书中,将欧拉的“图画”首次被抽象地展示[4],使用点线图的形式表达(见图 4 右)。

图 4 七桥问题的图绘制:(左)欧拉在其论文中的绘制。(右)1892 年 Ball 的抽象版本。


典型应用场景

图可视化已被应用在诸多领域中。常见的计算机系统中的文件层可以被表示成一棵树图,而树图是图的一种特殊形式。用户在寻找指定文件而探索文件层次时,图的优势得以体现 —— 可以通过在树图中 “ 顺藤(边)摸瓜(点)”。

在生物和化学领域,图被应用到发展树、进化树、原子图、基因图、生化途径图、蛋白质功能等。(震惊:物种的进化、基因的奥秘都在伟大的图可视化中了!)


图 5 (左)生物进化树。摘自:生物 八年级下册 第七单元 生物圈中生命的延续和发展。(右)DNA 分子结构模式图。摘自:高中生物2 遗传与进化 人教版。国际鸡基因组测序协会(真是个神秘组织)发现人类与鸡的基因有 60% 的相似度。


其他应用领域包括面向数据结构、实时系统、数据流图、子程序调用图、整体关系图(如 UML 和数据库结构)、语义网络和知识图谱、电路原理图等。需要注意的是,信息并不总是有层次结构的,图的技术应该能够处理更一般化的图,而不仅仅是树。

图 6 (左)简单的流程图。(中)UML 图。(右)电路图。


图能够成为强大的可视化工具,主要有以下几个原因:

  • 图是一种可以被应用到多领域的、非常简单的模型。任何含有内部关系的数据都可以被建模成为图。如:万维网(World-Wide Web)—— 节点代表了网页,边代表了网页之间的超级链接。另外还有很多关于人际关系、物种树、计算机文件系统等例子。
  • 图是一种有特定定义的抽象概念。经过几百年的发展,图论有了非常坚实的基础,和一套强大的领域独立算法,可以有效地处理图形。
  • 人类拥有强大的视觉处理能力。作为可视化工具,图可以通过提供额外的记忆帮助,改变一个任务的本质。信息可以直接被感知和使用,而无需明确解释和制定。
  • 对于图和其他常用的视觉设计原则,例如预估、相似性、闭合型、连续性、对称性、相对大小等,Palmer 与 Rock[7] 认为使用边连接不同的图形元素能够更清晰地表达元素之间的关系。从这一点出发,当用户试图通过视觉来探索带有内部关系的数据时,他们会发现图比其他视觉表达更好。


图的主要问题和挑战

作为信息可视化的一个子领域,图可视化常涉及到节点、连接的表达,以及探索视觉上的表达,帮助用户理解整体或局部的原始数据结构。这是一个复杂的领域,涉及到计算机科学、物理、符号学、图形学设计、分类学、艺术。同时,它也使得分析带关系的数据变得充满挑战。

1. 图的规模

在图可视化中,一个主要的挑战是图的规模。大数据时代带来的大规模图可能会导致以下难点:

  • 算法复杂性:图的规模在某些场景中是算法的致命问题。由于大多数图算法是 NP 复杂度,或是 NP 难的。因此,一些布局算法在大规模图上完全无法运行。即便是算法的时间复杂度可以忍受,冗长的处理时间同样使得图可视化难以提供实时交互的性能。
  • 显示混乱:当数据的规模增长时,对应的图在视觉上将会越来越混乱,令人困惑,用户在分析节点和边时会更加困难。在一些极端的例子中,数据量可能大到超出显示像素。
图 7 数据量巨大,视觉严重混乱。称为 Hair Ball。
  • 可读性:即使图的大小在屏幕视窗空间中还能够被忍受,如何向用户高效地传递信息仍然充满挑战,这是由于人类的感知能力常常只能在小规模图上发挥作用。Ghoniem[5] 等人证明了进行“定位节点或寻找两点之间的边”这样简单的任务时,即使图的规模只有 50 个节点,点线图的表现依然很差。如下图:
图 8 含有 50 个节点,400 条边的图可视化。[5]
  • 导航探索:人们对于真实世界中的详细信息和全局上下文的具有习惯性的感知。但是,在视觉上导航探索一个巨大的信息空间时,将会遇到无法将大规模空间数据展示在一个小屏幕上的问题。如何在不丢失任何信息的情况下导航一个大规模图也是一个挑战。


2. 数据结构复杂度

除了图的规模,数据结构的复杂度是另一个挑战。许多数据元素可能包含三个以上的属性。例如,Facebook 的社交网络中,节点带边了人,边代表了人际关系连接。节点上带有的信息可能有年龄、性别、身份。边同样有许多不同的类别,例如同事关系、同学关系、家庭关系等。此时,挑战就在于如何自然地同时表达所有的信息。最常见的解决方案是使用视觉线索(Visual Cues)。例如颜色👇、形状👇、透明度👇等映射不同的属性。

                   .   . 


图 9 使用视觉线索标识元素的不同属性。

然而,视觉映射可能会导致另一个挑战:哪一种才是映射不同属性的最好方式?由于人类感知系统的限制,一些视觉通道可能有着更强大的表达能力。例如,大小和长度更适合高效地展示量化的数据,但对于离散型、枚举型数据则不适用。使用颜色相对而言更能分辨此类数据。如何优化视觉通道,从而高效地给用户传递信息,目前仍然是不清晰的。

图可视化的最终目标是帮助用户理解和分析数据,不同的布局将会给用户带来不同的感觉,例如下图中展示的同一幅图的两种画法。两图中唯一的区别是边的曲率,但它们强调了不同的路径。从这个视角而言,图可视化的高效性对于研究者来说是一个巨大的挑战。

图 10 相同图的不同绘制方式强调了不同的路径。[6]


结束语

图可视化 —— 一个可炫酷、可严谨、可内涵、可小众、可普惠的关系数据探索工具,它所面临的问题是挑战,更是机遇。作为跨学科领域,图可视化需要来自更多行业的输入和共建。(建设图可视化,关系你我他它。)

想要看到更多图可视化小知识,持续关注《Graph Visualization ·知多少》哦!


G6 —— 专业的图可视化引擎。让关系数据变得简单透明,让用户获得 Insight。
G6官网:antv.alipay.com/zh-cn/g6/3.…。欢迎关注。
GitHub:github.com/antvis/g6。欢迎 Star。


参考文献

[1] Herman, Ivan, Guy Melançon, and M. Scott Marshall. "Graph visualization and navigation in information visualization: A survey." IEEE Transactions on visualization and computer graphics 6.1 (2000): 24-43.
[2] Weiwei Cui. "A Survey on Graph Visualization"
[3] Parker, Henry. "An Account of the Aborigines and of Part of the Early Civilization." London: Luzac and Co (1909).
[4] Ball, Walter William Rouse. Mathematical recreations and essays. Macmillan, 1914.
[5] Ghoniem, Mohammad, Jean-Daniel Fekete, and Philippe Castagliola. "On the readability of graphs using node-link and matrix-based representations: a controlled experiment and statistical analysis." Information Visualization 4.2 (2005): 114-135.
[6] Ware, Colin. "The visual representation of information structures." International Symposium on Graph Drawing. Springer, Berlin, Heidelberg, 2000.
[7] Palmer, Stephen, and Irvin Rock. "Rethinking perceptual organization: The role of uniform connectedness." Psychonomic bulletin & review 1.1 (1994): 29-55.


关注下面的标签,发现更多相似文章
评论