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

G6 —— 专业的图可视化引擎。让关系数据变得简单透明，让用户获得 Insight。
G6官网：https://antv.alipay.com/zh-cn/g6/3.x/demo/index.html。欢迎关注。
GitHub：https://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官网：https://antv.alipay.com/zh-cn/g6/3.x/demo/index.html。欢迎关注。
GitHub：https://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.