一文解读图可视化前生今世

前言

本文源于在公司实习时写的一篇分享

由于时间有限,分享内容相对比较泛泛,主要是用来大致了解图可视化中图布局的类型和发展历程。

什么是图

图由节点和连边组成,其中连边表示节点与节点之间的关联关系。

值得一提的是,树是一种特殊的图,即有向无环图。本文不讨论只针对树的布局。

图布局

图布局的视觉表达也有很多种,比如矩阵、节点链接图等。

本文主要介绍节点连接图的图布局。

图布局类型

对于节点连接图的布局,最简单理解,实际上就是赋予节点一个坐标(1d 2d 3d等),然后通过某种形式的连边连接起来。

针对不同的节点链接图类型会研究不同的布局算法,比如有同质/异质图,有向/无向图,动态图,超图,多层网络。

超图就是一条边对应两个及两个以上节点。

多层网络举个例子,一群人在qq会有一个社交关系网络,这群人在微信也会有一个社交关系网络,这群人之间还有亲属关系,我们可以把qq关系看成一个层,微信朋友关系看成一个层,层与层之间有亲属关系,这样的网络就是多层网络。

最最基础的就是同质图布局,也就是节点和连边类型相同并且一条边只与两个点相连。

基础图布局

比较广泛的一种分类就是把基础的图布局分为力导引和降维两类。力导引算法是利用节点之间力作用的物理模型来解决图布局的问题。

力导引布局实际上也存在几个问题:

  1. 布局速度问题: 由于力导引的斥力计算复杂度很高,后续有很多工作专注于加快布局速度,比如采样加快斥力计算、利用降维 算法加快布局、采用多层次布局加快布局,这里都每条分支都有很多工作,据我实验,速度和布局效果不能同时满足,通常降维布局和多层次布局都比较快,但是布局效果比较一般,细节呈现不太好,适用于一次性呈现十万级别以上的图

Wang, Wanyi, et al. "Polygonal Clustering Analysis Using Multilevel Graph‐Partition." Transactions in GIS 19.5 (2015): 716-736.

  1. 关系杂乱问题: 当网络的聚类系数很高,力导引布局会呈现毛球状,用户无法挖掘到感兴趣信息,此时,如何解开毛球是一个关键问题,通常来说有结构过滤图粗化两种思路,结构过滤方法比如采样、网络骨架提取等,图粗化比如节点粗化、连边粗化(粗化就是节点/边合并)。这里的每条分支下面也有很多研究工作。

Zhan, C., Zhang, D., Wang, Y., Lin, D., & Wang, H. (2019). IES-Backbone: An Interactive Edge Selection Based Backbone Method for Small World Network Visualization. IEEE Access, 7, 166415-166427.

Dunne, Cody and Ben Shneiderman. "Motif simplification: improving network visualization readability with fan, connector, and clique glyphs." Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (2013): n. pag.

  1. 呈现属性信息问题: 传统的力导引布局它倾向于满足等长连边的美学原则,当遇到想要突出某个紧密结构、突出某个骨架结构的时候会不太明显;另外,在实际应用中用户会关注节点属性、连边属性,传统的布局方式不利于突出一些用户感兴趣的语义属性,此时通用的做法就是利用聚合,把相同属性的节点聚合在一起。从这个问题出发又衍生了约束图布局、多属性图布局等方法

Nobre, C., Wootton, D., Harrison, L., & Lex, A. (2020). Evaluating Multivariate Network Visualization Techniques Using a Validated Design and Crowdsourcing Approach. Proceedings of the 2020 CHI Conference on Human Factors in Computing Systems.

有一个研究分支专门讨论什么样的布局能突出什么样的属性信息 ,换句话说,讨论什么样的布局能帮助用户感知哪些属性信息,一般会更多的讨论结构属性,比如节点中心性、图相似性、聚类系数等,少量文献会讨论语义属性,比如图的故事。这个工作最大的用处之一就是指导我们去以用户感兴趣的信息为导向设计布局

Blythe, J., McGrath, C., & Krackhardt, D. (1995). The Effect of Graph Layout on Inference from Social Network Data. International Symposium Graph Drawing and Network Visualization.

Raj, M., & Whitaker, R.T. (2017). Anisotropic Radial Layout for Visualizing Centrality and Structure in Graphs. International Symposium Graph Drawing and Network Visualization.

小小总结

图布局这个主题已经研究很久了,现在实际生产最主要使用的布局还是经过斥力计算优化的力导引布局(SE-Barnes-Hut算法),之后的布局要么是速度慢、要么是效果差、要么有些许提升但太复杂,要么适用场景有限,整体来说进展比较缓慢。所以专注于这一块去做一些新的适用于大部分场景且效果好且速度快的布局其实是很难的

相关推荐
大橙子额42 分钟前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
爱喝白开水a2 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
董世昌412 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
吃杠碰小鸡3 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone3 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word
xjt_09014 小时前
基于 Vue 3 构建企业级 Web Components 组件库
前端·javascript·vue.js
我是伪码农4 小时前
Vue 2.3
前端·javascript·vue.js
夜郎king4 小时前
HTML5 SVG 实现日出日落动画与实时天气可视化
前端·html5·svg 日出日落
夏幻灵5 小时前
HTML5里最常用的十大标签
前端·html·html5
Mr Xu_6 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js