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

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

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

树地图的主要用途

树形图通常存在于数据中指示板。设计人员通常选择它们来在密集的仪表板上增加视觉多样性。然而，树状图是一种复杂的可视化方法，对快速理解(这是仪表板上显示的任何信息的主要需求)存在许多障碍。

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

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

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

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

无论您如何在树图中使用颜色，请创建以下内容可访问性色盲用户的住宿:

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

下面是一些创建可用树地图的更多指导原则:

  • 视觉上明显的边界围绕高级类别帮助用户识别顶级分组。
  • 高对比度的文本确保人们可以读到树形图矩形内的标签。
  • 视觉上独特的选定状态，当用户悬停(或点击)矩形时到达，帮助用户确认他们正在查看正确的数据点。
  • 关于所选矩形的额外细节(出现在叠加中)，比如变量的名称、值允许用户钻取数据。

具有清晰边框的悬停状态和带有附加细节的弹出窗口
这是在FinViz treemap的选定部分周围使用视觉上清晰的边框的好例子，并在弹出窗口中提供了有关该区域的额外细节。

treemap的缺点

比较是困难的

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

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

对于没有层次结构的数据是无效的

如果数据没有层次结构，就不应该使用树状图:在这些情况下，它们在功能上等同于饼图——只是显示了部分到整体的关系。(饼状图也不是很好的可视化——就像树状图一样，它们基于面积和角度，以及不预先注意的属性。它们应该仅用于表示一个或两个项比其他项大得多，而不用于比较饼图分区的相对大小。)

视觉上压倒性的

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

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

不适合平衡树

对于条目大小相近的数据集(例如，平衡树)。在这些情况下，treemap的主要目的(快速识别给定类别中的最大项)变得非常困难。最后，用于创建树状图的标准算法尝试使矩形尽可能是方形的，以便使大小比较稍微容易一点，也不容易出错。然而，在交互式可视化中，随着时间的推移会显示变化，这种算法的一个缺陷是，矩形可能会随着它们的大小变化而移动。因此，随着时间的推移，跟踪一个特定的项目变得非常困难。

替代treemap

在很多情况下，树状图可以用条形图(用于包含一个定量变量和一个分类变量的数据)或散点图(用于包含两个定量变量的数据)来替代。

然而，这个过程需要您理解用户的前任务;对于那些试图识别出高销量和高利润率的产品，以便更积极地宣传它们的高管来说，2D散点图比树图更好。但如果用户主要关心的是整体销售，一个排序柱状图是比树状图更好的选择。(排序通常不被重视，但它是最简单的方法之一，可以很容易地识别出那些值最大和最小的条目。)

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

总结

虽然树形图对于可视化某些类型的复杂、分层数据集很有用，但它们通常很难解释。如果使用树状图，在视觉上区分不同的高级类别，避免使用多种颜色来表示数值，并在设计时考虑到色盲用户。最后也是最重要的一点是，理解用户需要对数据做什么，并考虑其他可视化(如柱状图或散点图)是否可以替代或增强treemap。

参考文献

Ben Shneiderman:“树图可视化:二维空间填充方法”，ACM图形事务，11,192 -99。(1992)

Jarke J. van Wijk和Huub van de Wetering:“缓冲树地图:层次信息的可视化”，IEEE信息可视化研讨会(INFOVIS ' 99)，旧金山，(1999年10月25-26日)