跳到主要内容

【译文】矩形树图：原因和方法

· 阅读需 13 分钟

Treemaps, Why and How 的译文，由 ChatGPT-4 翻译

原文：Treemaps, Why and How

逐渐地但又无情地，硬盘上的文件数量 从数十增加到数百，然后从数百增加到数千。同样，文件夹和目录的数量几乎是以指数形式增长。找到某种图表是非常必要的，这将允许用一种相对简单的方式来可视化新的 利维坦 的内容。

解决方案来自 Ben Shneiderman 的创造性思维，他是马里兰大学的计算机科学教授，同时也是人机交互实验室（HCIL）的创建者。他当时在寻找“一个紧凑的目录树结构可视化方法”(#1)。很显然，目录的结构对应于一个层次化的树结构图，但现有的图表非常笨重，因此效率低下。用他自己的话来说：“树形结构的节点-链接图变得过大而不再有用，所以我探索了在空间受限布局中显示树的方法”(#2)。

最终的结果是一种称为 Treemap 的图表。出乎意料的是，其当前的应用大大超出了原始目的。

为什么：Treemap 是一种基于矩形的可视化方法，允许你表示一个层次化排序（树结构化）的数据集。概念性的想法是在物理空间受限的空间内比较数量和显示某个层次结构的模式。为此，使用不同大小和颜色的矩形从不同角度展示数据集。目标不是指出确切的数值，而是将数据集“拆分”成其构成部分，并快速识别出较大和较小的组成部分。

图1: 使用 Plotly 创建的 Treemap。

它们也被用来指示排名、部分之间的差异以及非层次化的“扁平”结构中的相对比例。从这个意义上讲，它们被认为是传统饼图的一种替代品，饼图通常用于可视化“部分到整体”的关系。与饼图的最大不同是，Treemap 允许你在相对较小的空间内，通过嵌套矩形的方案比较构成整体的各个部分。相比于饼图，它们的一个优势在于它们可以包含在或许是层次性的结构中的数十或数百个部分。

物理空间的有效利用和智能的颜色管理使它们成为在商业分析应用、财务、商业、政府、选举以及类似领域内可视化大量信息的出色工具：标准普尔 500 指数；Merval（布宜诺斯艾利斯证券交易所）；按省份或州的选举结果；按地区、国家或行业的出口；按产品部门的销售等。以下 Treemap 展示了 2017 年牙买加按行业（农业、石油、化学品、矿物等）划分的出口情况(#3)。

图2: 2017 年牙买加出口。来源：commons.wikimedia.org (#3)。

由于前面提到的原因，Treemap 是商业智能（BI）演示中最常用的视觉元素之一，尽管当可视化的目标是在数据集的组成部分之间进行精确比较时，不应使用它们。

如何：它们由一系列嵌套的矩形（瓦片）组成，这些矩形的面积与它们代表的数据成比例。较大的矩形（层次结构的较高层级）指示数据树的根或主分支，并被细分为较小的矩形，这些较小的矩形表示树的每个分支所拥有的节点（层次结构的较低层级）的大小。数据集的数值应该是正的，并且与矩形的面积相对应。

智能使用颜色允许在图表中加入新的维度。通常的做法是使用不同矩形中的颜色来指示第二个分类或定量值。因此，通过单一颜色强度的变化来指示排名；通过两种颜色强度的变化来展示不同的正负定量值。下图显示了使用两种颜色的不同强度对高于和低于阈值的数值进行排名。

图3: 使用 Squarify 创建的 Treemap。

从上述内容可以推断，适当使用颜色允许我们利用 Treemap 表示亏损、销售下降或其他非正面值。这始终是相对于不由矩形面积表示的第二个定量值。

以下 Treemap 显示的是标准普尔 500 指数（#4）。它是纽约证券交易所（NYSE）和纳斯达克（NASDAQ）上广泛持有的 500 家公司股票的指数或集合。矩形的大小表示指数中每家公司的相对大小。不同颜色和颜色强度的变化显示了某个特定日子的正面、负面和“中性”结果的梯度：非常亮的红色表示向下的大幅度变动，非常亮的绿色表示向上的大幅度变动。毫无疑问，对于那么大量的信息显示在相对较小的空间中，Treemap 是最恰当的可视化工具。

图4: S&P 500 (#4).

有几种算法允许通过嵌套的彩色矩形图形显示层级数据：Squarified、Slice and Dice 和 Stripped。Squarified 是最常被商业数据可视化工具实现的算法。它基于一种旨在使每个块尽可能正方形以便于相互比较的策略。它还试图按照递减的方式排列数据集的连续成员（块、瓦片），从图表的左上角到右下角。最后，该算法在桌面、笔记本电脑和手机上都有良好的视觉展示。

在使用 Treemap 讲述故事时需要注意的一些预防措施：

  • 请始终记住，Treemap 难以阅读，因为它们依赖于观众通过比较面积来解读数值信息的能力。不要忘记人类擅长评估距离但不擅长计算面积。这一缺点在 Treemap 中由于显示的面积（矩形、瓦片）数量众多而被放大。在使用 Treemap 之前，至关重要的是要评估条形图或饼图是否能以较少的视觉强度讲述同样的故事。
  • 当真正重要的信息具有类似的数值时，这些图表并不建议使用。在这种情况下，算法生成的区块面积非常相似，难以在仪表板中进行比较。
  • Treemap 不能用于显示可能取负值的数值变量，如亏损。请记住，这种类型的限制适用于所有使用面积来编码定量变量值的图表。
  • 如果你想在交互式演示中使用它们，必须非常谨慎。记住，如果比较面积相对困难，那么比较交互式变化的面积更加复杂。
  • 另一个使进行良好比较变得困难的问题是缺乏公共基线，这是条形图没有的缺点。
  • 通常不可能在大小差异很大的大块和小块之间包含文本。标准解决方案是使用工具提示，当用户悬停在它们上方时提供与那些矩形相关的信息。

当然，了解 Stephen Few 对此话题的看法也很重要：“当无法使用常规图形，如条形图，因为有太多项目无法在单个屏幕上的单个图形或一系列图形中表示为条形时，Treemap 通过最佳利用屏幕空间解决了问题。因为他们依赖于我们无法精确比较的预注意属性（面积和颜色）来编码值，所以我们保留这些方法用于其他更精确的可视化方法无法使用，或者不需要精确度的情况。” (#5)。

用 Python 绘制 Treemap

如 The Python Graph Gallery (#6) 所示，“数据可视化的可能性相当有限”。要用 Python 绘制 Treemap，必须导入Squarify 库（pip install squarify）并使用 squarify.plot 函数，指明值、标签、颜色，以及通过 alpha 属性指定透明度。与一些商业工具生成的图表相比，结果图表相当有限。

一个更好的选择是通过 Plotly 的 treemap 指令使用，其语法远优于 Squarify 的等效物。除了指明值、标签和颜色，plotly.express 中的 treemap 语法还包括 path 参数，它允许你从根到分支定义扇区的层次结构（#7）。

plotly.express.treemap(data_frame=None, names=None, values=None, parents=None, ids=None, path=None, color=None, color_continuous_scale=None, range_color=None, color_continuous_midpoint=None, color_discrete_sequence=None, color_discrete_map={}, hover_name=None, hover_data=None, custom_data=None, labels={}, title=None, template=None, width=None, height=None, branchvalues=None, maxdepth=None)

结论

当数据集按照带有根、分支和节点的树形结构层级进行组织时，Treemap 图表是一种合适的可视化类型。它使我们能够在有限的空间内非常有效地展示大量数据的信息。可视化的主要目的是在不同层级的层次结构之间进行非精确的比较。它们也用于对非层级数据进行“部分与整体”的分析。当数值数据为负，或者数值差异不足以进行适当比较时，不应使用它们来得出准确的结论。

参考文献

  1. Ben Shneiderman (1992). “使用树图的树可视化：2D 填充空间方法”。ACM 图形学交易。11: 92-99. doi:10.1145/102377.115768.
  2. Ben Shneiderman, 2006 年 4 月 11 日, 使用 Treemap 可视化发现商业智能, http://www.perceptualedge.com/articles/b-eye/treemaps.pdf
  3. https://commons.wikimedia.org/wiki/File:Jamaica_Export_Treemap.jpg
  4. https://www.mergersandinquisitions.com/what-is-the-sp-500/
  5. Stephen Few, 2009 年, 《你现在看到的：定量分析的简单可视化技术》，Analytics Press; 第 1 版 (2009 年 4 月 1 日)
  6. https://python-graph-gallery.com/treemap/
  7. https://plotly.com/python-api-reference/generated/plotly.express.treemap.html