第五章-层次与网络数据可视化

层次数据的可视化
层次数据的展现方式
按数据的理解方式不同，层次数据的构建分： 自上而下和自下而上
层次数据可视化的核心：
1、如何表达层次关系的树形结构 2、如何表达树形结构中的父结点和子结点 3、如何表现父子结点、具有相同父结点的兄弟结 点之间的关系等
层次数据的展现方式 按布局策略，主流方法可分为：
– 避免边相交
– 相似的子树用相似（或镜像）进行表达
– 表达紧凑
• 基本方法：
尤其注重布局的对称性和紧凑性
– 自底向上递归计算
– 对于每个父节点，确保子树已完全绘制
– 尽可能紧致地包装子树
– 将父节点放在子树的中心位置
Reingold-Tilford树算法
• 自底向上递归计算：
– 对树进行后序遍历 • 这样对于父节点，在遍历到的时候可以确保其 左右子树都已经布局完毕。
– 根据树的深度将空间沿纵轴平均分成等高的区域。每个区域对 应树的一层。树中相同深度的节点属于同一层。 – 根据叶节点的数量,将对应的区域沿横轴平均分成等宽的区域。 – 将节点布置在每个区域的中心。 – 在节点和它的父节点之间连线。
Reingold-Tilford树算法
• 标准：
– 所有节点按照在树中的层次进行分层绘制
缺点 操控不是很容易，非线性映射使得 准确控制节点的空间位置变得困难
节点链图的问题
节点数随着深度增加呈几何级数增长 解决方案——交互
使用变形 对节点进行汇总、过滤
鱼眼变形
DOI树（节点过滤）
8.1.2 空间嵌套填充法
一种基于区域的可视化方法， 直接采用显示空间中的分块区域表示数据中的个体。 三个可计算的评价指标：可读性、距离相关性、稳定性
Flare软件包的目录结构
/jheer/files/zoo/
三维树(Cone-Tree)
George Robertson, Jock D. Mackinlay, Stuart Card. Cone Trees: Animated 3D Visualizations of Hierarchical Information. In Proceedings of the ACM CHI 91 Human Factors in Computing Systems Conference, pages 189-- 194, April 28 - June 5, 1991, New Orleans, Louisiana, June 1991. Association for Computing Machinery
J.-D. Fekete, A System for
J.
物种发展
数据来源：
这棵树清晰地呈现了不 同物种之间的遗传关系， 所有物种通过生物发展 史的基因链接关系相连。
层次数据可视化
提纲
层次数据 层次数据的可视化
节点链接法及其应用 空间填充法及其应用 混合型
层次数据 (Hierarchical Data)
层次数据（树结构）
层次数据着重表现个体之间的隶属关系
社会、自然界中的从属关系
机构的组织结构，物种关系
信息的组织形式
文件列表
逻辑承接关系
决策树 我们通过分类来理解事物，层次结构是我们认知行为的基础
相关的子系统(interrelated subsystems) 相对独立(semi-independent)
子系统之间的关系
影响往往是通过子系统之间的功能(输入、输出） 和一个子系统内部实现其功能的具体方式无关
可拆分(decomposability)或准可拆分(near decomposability
• 随后将父节点放在左右子树的中心位置 • 可以推广至多叉树
径向布局
• 更加合理地利用空间 根节点位于圆心，不同层次的节点被放置在半径不 同的同心圆上 • 节点到圆心的距离对应于它的深度 满足树结构节点数量随层次而增加的特点
Radial
径向布局
/demo
六大计算机公司的组织结构图，生动地反映了独特的企业文化：亚马逊有严格的等级制度；
谷歌也有清晰等级，但部门之间相互交错，由google的三驾马车CEO埃里克·施密特（Eric
Schmidt）、Google联合创始人拉里·佩奇（Larry Page）和塞吉·布林（Sergey Brin）共同领导；
Facebook像一张分布式网络；微软各自占山为王，且相互竞争，但其实应该更接近于Apple的情况，
本数据包含93891个物种， 占今天地球上的1亿物种 的极小部分。根节点"Life on Earth'' (红色字体)被置 于树的西南角，它的西南 方向链接了``Green plants''（绿色植物，绿色） 分支，东南方向链接了 ''Protista''（原生动物，淡 红色）分支，西北方向链 接的是''Fungi''（菌类，黄 色）分支。
思维导图
层次数据的表达: 图结构
图G由一个顶点（或节点）集合V和一个边集合E组成 G={V,E}
每条边exy=(x, y)连接图G的两个顶点x, y 例如：V={1,2,3,4}, E={(1,2),(1,3),(2,3),(3,4),(4,1)}
显然，这种表达对于非专业人士来说，还是 比较难懂的
图片来源：/~yifanhu/TOL/
主要的挑战
把节点和边信息展示出来 点和边的空间排布组织形式
允许用户对层次数据进行交互式分析探索 对层次数据的相关部分进行观察分析
展示：合理的利用显示空间 交互：和任务相关的功能工具
微观细节和宏观背景 对子系统进行汇总、比较不同的子系统等
根据节点与链接的布局策略， 可以细分为如下三种
正交布局（网格型布局）
缩进图(indent) 聚类树(dendrogram) 冰柱图(icicle)
径向布局（辐射型）
径向布局图 双曲树
三维布局
dendrogram 径向布局
正交布局
节点在放置的时候，都按照水平或垂直对齐 方向与坐标轴一致的，布局规则 与视觉识别习惯吻合，非常直观 缺点
三维树(Cone-Tree)
三维空间，结合二维投影 优点
三维空间来扩展可用显示空间 三维动画来降低认知成本
缺点
难以对付很大的树 三维交互还是一个挑战
双曲树排布
将节点在双曲空间分布（节点数仍然随深度曾几何 级数增长！）
双曲树排布
利用对二维空间的非线性映射来有效 地利用空间
优点 很酷 在局部细节和宏观结构的平衡
——Peter Morville
为什么要层次结构？
层次结构是复杂系统中有效的 管理组织形式，以及稳定、 可持续的发展机制
"The Architecture of Complexity: Hierarchic Systems"
社会系统 生物和物理系统 符号系统
层次结构中 个体元素的相对独立性
层级结构中的个体元素
节点链接法：结构清晰型表达(structure-clarity)
节点链接树 双曲树 三维树
空间填充法：空间利用率高(space-efficiency)
树图(Treemap) Voronoi树图
混合型：利用上述两种方法的互补性，弹性层次图为代表
Jürgensmann和Schulz对树结构可视化技术进行了总结和分类，并制作了海报。他们采用的分类 思路与上面介绍的基本一致：显性，隐性与混合三种。显性方法基本等同于节点链接法，而隐 性方法则对应空间填充法。在此基础上，根据空间维度（二维或三维）及布局方法（正交、径 向、自由布局）做了更进一步分类。这样的层层分类本身也是一个层次结构，可采用空间填充 方法进行可视化。 作品赢得了2010年IEEE InfoVis会议的最佳海报奖，其后又演化成在线互动版()
为了达到结点链接法实用性和美观性， 绘图算法设计往往需遵循一些原则：
1. 尽量避免边的交叉。边的教材可能会导致对图的错误理解。 2. 结点和边尽量均匀分布在整个布局界面上。 3. 边的长度统一 4. 可视化效果整体对称，保持一定的比例 5. 网络中相似的子结构的可视化效果相似
实际设计中，并不一定能完全满足所有的原则，设置 原则之间会产生矛盾，需要平衡和取舍，因此将产生对各 原则有不同侧重的布局
GeneaQuilts家谱树
家谱树
希腊神话中众神的家谱（局部），其中字母
F和表子示女一（个在由字父母母F（之在下字的母黑F色之圆上点的）黑组色成圆的点家）庭。ABExa. epB,leoBzr.ieWnrgiaaLntsoaosrng,.ePG.GDeenrneaeagaQilcouegivlitiescs:,
即以扎克伯格为核心；苹果是各小团队相互平等灵活作战，但乔布斯的作用非常明显；甲骨文法务
部门远大于工程部门
/2011/06/27/organizational-charts/
公 司 组 织 结 构 图
国内公司 结构图
1. 腾讯，产品与部门关系 千丝万缕阵结构变化； 4. 阿里巴巴，马云的影子 无时无处不在； 5. 360掐架大王，总要有 人在后面擦屁股
对于大型的层次结构，特别是广度比较大的层次结构，这样的布局 会导致不合理的长宽比、布局不均匀分布和较大空间浪费
电路图
• 正交且空间高效 • 对机器友好，对用户不友好
电磁炉的电路图
缩进图
快速并易于实现 可以使用纯文本（或HTML）
浏览大数据时需要很多滚动操作 容易失去上下文(context) Flare软件包的子目录结构
聚类图
/?p=951
美
国
铁
路
的
兼
并
印 欧 语 系
冰柱图
常用于聚类分析，展现层次聚类结果
https:///jheer/files/zoo/ex/hierarchies/icicle.p ng
正交树图的一般实现
• 简单的递归实现
Jürgensmann和Schulz对树结构可视化技术进行了总结和分类，并制作了海报以及在 线东台书可视化检索系统。
图8.2 层次数据可视化分类。
分类延续了结点链接、空间填充和混合型的思路，分界线的粗细表达了层次的深度。
8.1.1 节点链接法
节点链接法是图论中树形的扩展，可视化绘制的 核心是结点和边的位置编码和视觉符号编码。
图的结构表达
树形结构和网络结构是层次和网络数据可视化的基本型 边的方向和权重，是可视编码的重要组成部分 结点的度、平面性、连通性，是图结构的基本性质， 对树、网络的挖掘至关重要
但对于大的层级结构来说， 图形化的展示面临一些挑战
数据来源：/tree/
物 种 发 展
• 对于每个父节点，确保子树已完全绘制
– 通过这样的绘制顺序可以保证结构相同的子树拥有 相同的表示——因为每个子树的绘制过程都不会受 到子树外元素的影响。
Reingold-Tilford树算法
• 尽可能紧致地包装子树
– 对于每一个节点，计算其左子树的右轮廓与右子树 的左轮廓，并调整左右子树的位置直至两者刚好错 开一个预先设定的阈值r为止。
层次数据的图形化表达
G={V,E} V={1,2,3,4}, E={(1,2),(1,3),(2,3),(3,4),(4,1)}
图的结构表达
(a) 无向图; (b) 加权图; (c) 不连通图; (d) 顶点的度; (e) 回路; (f) 无回路图; (g) 有根结点的层次树; (h)结点深度
图的结构表达
/jheer/files/zoo/
美国曾经也是个大量依 赖铁路货运的国家。货 运公司遍布全国。但是 近50年来，这些公司互 相兼并。上面的可视化 来自财富杂志的美术总 监Nicolas Rapp的文章 TheBattle of The Rails。他用这样一个 类似树状的结构很清晰 的展示了铁路公司兼并 的历史。在80年代，这 许多公司在大量的兼并 之后，只剩下屈指可数 的7家。而现在上图中 用红线标出区区四家占 了全国铁路货运的九成。