矩形式树状结构图（Treemaps）：复杂层次结构的数据可视化

摘要：矩形式树状结构图（Treemaps）是一种用于分层数据的复杂的、基于区域的数据可视化效果，难以对数据进行精确解释。在许多情况下，最好使用更简单的可视化效果（例如条形图）。

矩形式树状结构图（Treemaps）是用于大型分层数据集的数据可视化技术。它们捕获数据中的两种信息：（1）单个数据点的值；（2）层次结构。

定义：矩形式树状结构图（Treemaps）是分层数据的可视化。它们由一系列嵌套的矩形组成，这些矩形的大小与相应的数据值成比例。大矩形代表数据树的一个分支，然后细分为较小的矩形，代表该分支内每个节点的大小。

分层树形图，显示了S＆P 500的结构。此结构是以下所示矩形式树状结构图（Treemap）的基础。

image

FinViz股市地图使用与上述S＆P 500数据集的树状结构相对应的矩形式树状结构图（Treemaps）。 黄色标记为（A）、（B）、（C）、（D） 的项目对应于上面树形图中标有这些字母的项目。（A）代表整个标普500强指数，与树根相同。 矩形（B）是 技术（Technology） 部门。在 技术（Technology） 部门中，一个较小的矩形是 通信设备（Communications Equipment） （C）。最后，在 通信设备（Communications Equipment） 矩形内，所有较小的矩形代表该部门内的各个公司，例如 思科系统（Cisco Systems） （D）， 高通（Qualcomm） 等。每个矩形的颜色显示该股票的价格是向上还是向下波动：非常明亮的红色表示向下的大幅波动，非常明亮的绿色表示向上的大幅波动。

image

每个矩形的大小代表该股票、行业或部门的市值（价值）。在层次结构的最低级别（单个公司），Google（E）的市值大于Facebook（F）的市值，因此其相对矩形的大小适当。在层次结构行业（Industry）中上一层，整个互联网信息提供商（Internet Information Providers）（G）类别大于应用程序软件（Application Software）（H），并且它们的矩形大小也适当地显示了差异。

矩形式树状结构图（Treemaps）的主要用途

矩形式树状结构图（Treemaps）通常位于数据仪表板（dashboard）上。设计师经常选择它们以在密集的仪表板上添加多样化视觉。但是，矩形式树状结构图（Treemaps）是一个复杂的可视化效果，它给快速理解带来了许多障碍（而这恰恰是在仪表板上显示任何信息的主要诉求）。

矩形式树状结构图（Treemaps）通常用于销售数据，因为它们可以捕获数据类别的相对大小，从而可以快速了解每个类别贡献较大的项目。颜色可以识别出与同一类别的同级产品相比表现不佳（或表现过多）的项目。这就是为什么 FinViz 的股市地图是矩形式树状结构图（Treemaps）持久使用的示例：它允许用户识别比行业同行表现更好的公司，即使它们的总股票价值可能相当小。

当你的分层数据具有2个需要可视化的主要维度时，矩形式树状结构图（Treemaps）可以很好地工作：

1. 一个正量化值，将表示为矩形面积（由于面积不能为负值，因此不能使用矩形式树状结构图（Treemaps）来可视化诸如增益/损耗之类的变量，因为这些变量既可以具有正值也可以具有负值。）
2. 一个分类值或第二个定量值，将表示为单个矩形的颜色。如果使用颜色表示定量值，则强烈建议仅使用一种颜色（如果所有数字均为正数）或两种颜色（一种用于负数，一种用于正数），并改变颜色的强度以表达精确值。由于人类认为颜色没有固有顺序，因此我们强烈建议你不要使用多种颜色来代表一定范围的数字。

image

矩形式树状结构图（Treemaps）中颜色使用不当的一个示例：使用几种不同的颜色来显示欧洲不同地区超过65岁的人口百分比；每种颜色表示不同的百分比范围（蓝色表示低范围，黄色表示中范围，红色表示高范围）。不幸的是，没有通用的自然映射表明蓝色小于黄色或小于红色。相反，如果使用单一颜色的强度来表示百分比，则效果会更好。

如果颜色代表分类变量，则可以将不同的颜色用于不同的可能值，因为用户无需将一种特定的颜色解释为"高于"或"低于"。但是，与在数据可视化中使用颜色一样，强烈建议限制颜色数量！

无论你如何在矩形式树状结构图（Treemaps）中使用颜色，请为色盲用户提供以下可访问性功能：

• 避免在同一矩形式树状结构图（Treemaps）中同时使用红色和绿色（特别是对于需要快速区分的值）。
• 使用对色盲人员安全的调色板。
• 使用可模拟色盲用户体验的工具来测试你的设计
• 对于通过颜色捕获的数据方面，使用辅助信号（例如矩形内的文本或悬停时出现的文本）

image

（左）FinViz的股市地图使用红色和绿色来编码股票价值的变化（绿色向上，红色向下）。（右）弱视者对同样的可视化效果的感知：红色和绿色很难区分。在此设计中，某些（但不是全部）矩形确实包含建议的替代提示：例如，中间上方的 AMZN 矩形标有"+1.28%"，该矩形会通知用户，即使用户无法判断其为绿色，也会知道其为向上波动。（第二张图片来自色盲模拟器）。

以下是创建可用矩形式树状结构图（Treemaps）的更多准则：

• 视觉上明显可区分的边界围绕在较高级别的类别周围可帮助用户识别顶级分组。
• 高对比度文本确保人们可以阅读矩形式树状结构图（Treemaps）矩形内的标签。
• 具有视觉特征的选定状态出现在用户悬停（或点击）矩形时，可帮助用户确认他们在寻找正确的数据点。
• 有关选定矩形的其他详细信息（显示在叠加中），例如变量的名称、值，允许用户深入数据。

image

一个很好的示例：在 FinViz 矩形式树状结构图（Treemaps）的选定部分周围使用视觉上截然不同的边框以及在弹出窗口中显示有关该扇区的其他详细信息的。

矩形式树状结构图（Treemaps）的缺点

难于比较

人脑能够预先处理某些视觉信息：可以快速而准确地掌握诸如长度之类的属性，并且几乎无需任何认知即可比较这些属性的值。不幸的是，面积不是这些能够预先注意的属性之一。矩形式树状结构图（Treemaps）依赖于面积（可能还包括颜色）来编码变量的值，因此，尽管矩形式树状结构图（Treemaps）可以传达大型数据集中的整体关系，但它们不适合涉及需要进行精确比较的任务。

image

此仪表板包括一个矩形式树状结构图（Treemaps），该树状结构图显示了四个工厂生产的各种产品的生产水平。颜色用于表示不同的工厂，大小用于显示产出。这种可视化将大量数据压缩到一个狭小的空间中，但它有效传达的信息却是非常高级别的，例如，可以轻松地识别每个类别中的绩效最佳者。但是，要确定总体表现最好的前五名既困难又费时。条形图将比树状结构图更准确、更快速地传达此信息。

image

上面的仪表板图像的放大视图：（A）或（B）哪个更大？由于此可视化使用区域来传达变量的大小，因此它不容易实现项目之间的特定比较。进行比较需要将鼠标悬停在某个部分上，等待带有该值的工具提示出现，然后将该信息保留在自己的短期记忆中，同时在另一部分重复相同的过程。

对于非分层数据效率低下

如果你的数据不是分层的，则不应使用矩形式树状结构图（Treemap）：在这种情况下，它们在功能上与饼图等效，只需显示部分与整体的关系。（饼图也不是很好的可视化工具，就像树状结构图一样，它们是基于面积和角度的，这些属性不会引起预先注意。它们仅应用于传达一个或两个项目比其余项目大得多，而不是用于比较饼图切片的相对大小。）

视觉上具有压倒性

矩形式树状结构图（Treemap）通常用于可视化非常大的数据集，其中包含数百或数千个项目。如此大量的信息可能会在视觉上压倒用户，树状结构图变成了一片小矩形的海洋，许多矩形太小而无法带有文本标签。此外，在复杂的树状结构图中，整体层次结构很容易变得难以区分。解决方案是一个缓冲垫树状结构图（Cushion Treemap），它使用纹理使每个矩形在中间看起来像垫子一样"凸起"，并且逐渐变细到边缘。这种视觉效果利用了人类将这种类型的阴影解释为凸起的表面的优势，从而可以更快地识别出不同的矩形。

image

在缓冲垫树状结构图（Cushion Treemap）中，每个矩形从边缘到中心都有一个轻微的渐变。此效果有助于直观地识别小项目以及由多个矩形组成的较大类别。

不适用于平衡树（Balanced Trees）

矩形式树状结构图（Treemap）对于项目大小接近的数据集（例如平衡树 Balanced Trees）也是较差的选择。在这些情况下，矩形式树状结构图（Treemap）的主要目的（快速识别给定类别中最大的项）变得非常困难。最后，用于创建矩形式树状结构图（Treemap）的标准算法试图使矩形尽可能地为正方形，以便在进行大小比较的时候能够稍微容易些，并且不易出错。但是，在显示随时间变化的交互式可视化中，此算法的缺陷是矩形可能会随着大小的变化而移动。因此，随着时间的推移跟踪特定项目变得非常困难。

矩形式树状结构图（Treemap）的替代方案

在许多情况下，矩形式树状结构图（Treemap）可以替换为条形图 Bar Charts（对于具有一个定量和一个分类变量的数据）或散点图 Scatter Plots（对于具有两个定量变量的数据）。

但是，此过程需要了解用户的首要任务；对于试图识别具有高销量和高利润率的产品以便高调地宣传它们的高管来说，二维散点图（Scatter Plots）比矩形式树状结构图（Treemap）更好。但是，如果用户主要关心整体销售额，则排序的条形图（Bar Charts）比矩形式树状结构图（Treemap）更好。（排序通常被低估，但它是使识别具有最大和最小值的项目变得容易的最简单方法之一。）

image

对于具有2个定量变量的数据可视化而言，散点图（Scatter Plots）通常比矩形式树状结构图（Treemap）更好，因为人类视觉系统可以快速准确地检测2D位置。此散点图还添加了第三个分类变量，表示为彩色。

总结

虽然矩形式树状结构图（Treemaps）对于可视化某些类型的复杂层次数据集很有用，但它们通常很难解释。如果使用树状结构图，请在视觉上区分不同的高级类别，避免使用多种颜色来表示数值，并在设计时考虑到色盲用户。最后，要了解用户对数据的处理方式，并考虑其他可视化效果（例如条形图或散点图）是否可以替代或增强树状结构图。

（编译完）

---

英文原文：地址
原文作者：Page Laubheimer
编译作者：@iris0327

以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。

image