树图是一种用于大型分层数据集的数据可视化技术。它们在数据中捕获两种类型的信息:(1)单个数据点的值;(2)层级结构。

定义：树形图是分层数据的可视化。它们由一系列大小与相应数据值成比例的嵌套矩形组成。大矩形表示数据树的一个分支，它被细分为较小的矩形，这些矩形表示该分支中每个节点的大小。

显示标准普尔500指数的四个等级
显示标准普尔500指数结构的层次树形图。此结构是下图所示树状图的基础。
同一个标准普尔500树图的四个视图，突出显示数据集的四个层次结构
FinViz Market Map使用的树状图与上面描述的标普500数据集的树状结构相对应。用黄色标上(A)， (B)， (C)， (D)的项目与上面树形图中的字母标记的项目相对应。(A)代表整个标普500，与树的根相同。矩形(B)是技术部门。在技术扇形，则显示一个较小的矩形通信设备C .最后，在通讯设备矩形，所有较小的矩形代表该部门内的单个公司，例如思科系统(D),Qualcomm，等等。每个矩形的颜色显示了该股票的价值是上升还是下降——非常亮的红色表示向下的大变动，非常亮的绿色表示向上的大变动。
两张放大的树状图图像，显示了项目的相对大小，以比较它们的数量大小
每个矩形的大小表示该股票、行业或部门的市值(值)。在层次结构的最底层(单个公司)，谷歌(E)的市值比Facebook (F)大，因此它们的相对矩形的大小是适当的。在层次结构的上一层(工业),整个互联网信息提供商(G)类比应用软件（H） ，并且它们的矩形大小适当，以显示差异。

树图的主要用途

树状图通常在数据中发现指示板. 设计师通常选择它们在密集的仪表板上增加视觉多样性。然而，树形图是一个复杂的可视化过程，给快速理解带来了许多障碍（这是在仪表板上显示任何信息的主要要求）。

树形图通常用于销售数据，因为它们捕捉数据类别的相对大小，允许快速感知每个类别中占很大比重的项目。颜色可以识别出与同类物品相比表现不佳(或出色)的物品。这就是为什么FinViz的市场地图是树形地图的一个经久不衰的例子:它允许用户识别比同行做得更好的公司，即使他们的整体股票价值可能非常小。

当你的分层数据有两个主要维度，你想要可视化时，树形图工作得很好:

  1. A.正定量值，它将表示为矩形的面积(因为面积不能为负，所以不能使用树映射来可视化变量，如增益/损失，它们可以有正值和负值)。
  2. A.分类或第二数量值，表示为各个矩形的颜色。如果颜色用于表示定量值，强烈建议只使用一种颜色（如果所有数字都为正数）或两种颜色（一种为负数，一种为正数），并改变颜色的强度以表示精确值。由于人类不认为颜色具有固有的顺序，我们强烈建议您不要使用多种颜色来表示一系列数字。
过于鲜艳的树形图
一实例在树形图中颜色使用不当:几种不同的颜色被用来显示欧洲不同地区65岁以上人口的百分比;每种颜色表示不同的百分比范围(蓝色表示低范围，黄色表示中范围，红色表示高范围)。不幸的是，没有普遍性自然的映射也就是说，蓝色小于黄色或红色。相反，如果用单一颜色的强度来表示百分比，效果会更好。

如果颜色代表一个分类变量，那么对于不同的可能值可以使用不同的颜色，因为用户没有必要将特定的颜色解释为比另一种颜色“高”或“低”。然而，就像在数据可视化中使用颜色一样，强烈建议限制颜色的数量!

无论在树状图中如何使用颜色，请执行以下操作可达性色盲用户住宿：

  • 避免在同一个树图中同时使用红色和绿色(特别是对于需要快速区分的值)。
  • 使用对色盲人士安全的调色板。
  • 用一个可以模拟色盲用户体验的工具测试你的设计
  • 为通过颜色捕获的数据方面使用次要信号(例如矩形内的文本或悬停时出现的文本)
一个版本的标准普尔500树状图显示在色盲模拟器
(左)FinViz的市场地图用红色和绿色表示股票价值的变化(绿色表示上升，红色表示下降)。(右图)患有deuteranopia的人也能看到同样的视觉效果:红色和绿色很难区分。在这个设计中，一些(但不是所有)矩形确实包含了推荐的替代提示:例如，位于中上方的AMZN矩形被标注为“+1.28%”，这告知用户该股票上涨了，即使他们不能分辨它是绿色的。(第二幅图来自于色盲模拟器）．

以下是一些创建可用树图的指导方针:

  • 视觉上明显的边界围绕高级类别帮助用户识别顶级分组。
  • 高对比度的文本确保人们可以读取树映射矩形内的标签。
  • 视觉上与众不同的选定状态，当用户悬停(或点击)一个矩形时到达，帮助用户确认他们正在查看正确的数据点。
  • 关于选定矩形的附加细节（出现在覆盖图中），例如变量的名称、值允许用户深入数据。

带有清晰边框的悬停状态和带有附加细节的弹出窗口
这是一个很好的例子，在FinViz树图的选定部分周围使用视觉上独特的边界，以及在弹出窗口中关于扇区的额外细节。

treemap的缺点

比较是困难的

人脑能够处理某些视觉信息前注意：可以快速准确地掌握长度等属性，并且几乎不需要任何认知努力就可以比较这些属性的值。不幸的是，面积不是这些预先注意的属性之一。树形映射依赖于面积（可能还有颜色）来编码变量的值，因此，尽管树形映射可以在大型数据集中传递整体关系，它们不适合进行精确比较的任务.

包含树状图的仪表板。
这指示板包括一个树状图，显示四个工厂生产的各种产品的生产级别。颜色用来表示不同的工厂，尺寸用来表示生产的产量。虽然这种可视化将大量数据压缩到一个小空间中，但它高效地传递的信息是非常高级别的——例如，它很容易确定每个类别中的最佳表现。然而，要确定总体表现最好的五个人，既困难又耗时。柱状图比树状图更准确、更快速地传达了这一信息。
仪表板树状图放大显示两个区域非常相似的区域。这是一个例子，说明了树形图由于视觉上的相似性，对于精确的比较来说是很差的工具。
放大上面的仪表盘图像:(A)和(B)哪个更大?由于这种可视化使用area来表示变量的大小，因此不容易进行项之间的具体比较。进行这种比较需要将鼠标悬停在某个区段上，等待带有该值的工具提示出现，然后将该信息保存在自己的页面中短期记忆在其他部分重复相同的过程。

对于非分层的数据效率低下

如果你的数据不是分层的，就不应该使用树图:在这些情况下，它们在功能上相当于饼图——只是显示部分对整体的关系。(饼图也不是很好的可视化——就像树图一样，它们是基于面积和角度的，这些属性都不是很重要。它们应该仅用于表示一个或两个项比其他项大得多，而不是用于比较饼图切片的相对大小。)

视觉上压倒性的

树形图通常用于可视化包含数百或数千项的非常大的数据集。这么多的信息在视觉上可能会让用户不知所措——树形图变成了小矩形的海洋，许多小到无法承载文本标签。此外，在复杂的树状图中，整个层次结构很容易变得不可识别。答案是a缓冲treemap，它使用纹理使每个矩形看起来“凸起”在中心像一个垫子，并逐渐减少到边缘。这种视觉效果利用了人类将这种类型的阴影解释为一个凸起的表面的倾向，使它更快地识别不同的矩形。

一个“缓冲”树状图，用来帮助用户更容易地看到矩形。
在一个缓冲树图中，每个矩形从边缘到中心有一个轻微的梯度。这种效果有助于在视觉上识别小物品以及由几个矩形组成的较大类别。

不适合平衡的树木

对于项目大小相近的数据集来说，树图也是糟糕的选择(例如，平衡树）．在这些情况下，树映射的主要目的(快速识别给定类别中最大的项目)变得非常困难。最后，用来创建树状图的标准算法试图使矩形尽可能的正方形，以便使大小比较稍微容易和更不容易出错。然而，在交互式可视化中，随着时间的推移显示变化，该算法的一个伪结果是，矩形可能会随着其大小的变化而移动。因此，随着时间的推移，保持对特定项目的跟踪变得非常困难。

替代treemap

在许多情况下，树形图可以用条形图(对于具有一个定量变量和一个分类变量的数据)或散点图(对于具有两个定量变量的数据)代替，它们代表感兴趣的变量。

然而，这个过程需要理解用户的首要任务；对于那些想要找出销量高、利润率高的产品，以便进行最积极的广告宣传的高管来说，2D散点图比树形图更好。但如果用户主要关心的是整体销量，那么排序柱状图是比树状图更好的选择。(排序经常被低估，但它是一种简单的方法，可以轻松地识别最大和最小的值。)

显示三个变量的散点图。
散点图通常比树状图更好地用于可视化具有2个定量变量的数据，因为人类视觉系统可以快速准确地检测二维位置。这散点图还增加了第三个类别变量，用颜色表示。

总结

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

参考文献

Ben Shneiderman:“使用树地图进行树可视化：二维空间填充方法，”美国计算机学会图形学报，11,1,92-99。(1992)

Jarke J.van Wijk和Huub van de Wetering：“缓冲树状图：层次信息的可视化”IEEE信息可视化专题讨论会（旧金山），（十月25-26，1999）