数据可视化设计：矩形树图 treemap

什么是矩形树图

说到树图，我们可能第一时间就会想到树状图（Tree diagram），它的外形就像一棵“倒立”的大树。树状图通过一枝枝“树杈”连接起具有层级关系的数据，展示上下级、同级的数据关系。

树状图

今天要分享的不是这种树状图，而是矩形树图（Treemap）。
矩形树图把树状结构转化为平面矩形的状态，虽然长得一点都不像“树”，但能表示数据间的层级关系，还可以展示数据的权重关系。

矩形树图

这棵“树”还不到30岁

与有着悠久历史的饼图、柱状图不同，矩形树图还很年轻。20世纪90年代初，为了找到一种有效了解磁盘空间使用情况的方法，马里兰大学人机交互实验室教授Ben Shneiderman和他的团队通过调整树状图，发明了矩形树图。

磁盘空间使用情况

1999年，Martin Wattenberg在SmartMoney上发布了《市场智能货币地图》，用矩形树图展示了美国股市中几百家公司的数据。图中矩形的面积与公司的市值相对应，颜色则代表自上次收市以来股价的变化情况。矩形树图也由此逐渐被用于可视化财务数据。

市场智能货币地图

在Marcos Weskamp创建了展示新闻头条的矩形树图之后，矩形树图开始被主流媒体使用。

Newsmap

如何发现“树”中之数

矩形树图把具有层次关系的数据可视化为一组嵌套的矩形，所有矩形的面积之和代表了整体的大小，各个小矩形的面积表示每个子数据的占比大小——矩形面积越大，表示子数据在整体中的占比越大。

最简单的矩形树图只展示一个类别的数据占比，每个矩形的面积代表了各数据在整体中的比重。比如澎湃美数课栏目就用了这类矩形树图，清楚地展现了双一流学科建设情况。

“双一流”学科建设哪家强？

矩形树图还可以表示两个层级的数据结构，不同类别的数据通常用不同颜色展示。OEC（The Observatory of Economic Complexity）用一个大型的矩形树图展示了具有两个层级关系的数据结构。

2016年，中国出口了什么？

所有矩形之和表示2016年中国出口总额，颜色代表了全年出口物品的种类（父类别），例如蓝色代表了机械类，深绿色代表了纺织品。蓝色部分的机械类出口数额在所有种类中占比最大，因此在所有矩形中，蓝色矩形面积最大。在机械类的分类下，电脑出口数额（子类别）占比最大，因此在蓝色矩形中，代表电脑的矩形面积最大。

用矩形树图表达具有两个层级关系的数据结构。整体矩形展示了在911事件发生后3年内，各方的赔偿和抚恤数额情况。

《美国赔偿：慈善高效，保险守诺，政府靠谱》

颜色区分了受害者获得的抚恤金的来源，黄色矩形所代表的保险公司面积最大，支出的赔偿数额最多。其中，面积最大的黄色矩形代表了保险公司的大部分赔偿都支付给“业务受影响的企业”。

“树”业有专攻

矩形树图在诞生的一刻，就具有展示带有权重的树状数据的优势。而且相对于树状图，矩形树图能更有效地利用空间。与其他通过长度来比较占比大小的图表相比，矩形树图通过面积就能清晰地比较数据的占比关系。

北上广三省幼师学历情况（堆叠柱状图）

上图是用堆叠柱状图展示北上广三省幼师学历情况。对比矩形树图，堆叠柱状图在展现研究生和高中以下学历的幼师占比情况上并不清晰。但矩形树图就能把这种占比情况清晰展现出来。

北上广三省幼师学历情况（矩形树图）

但是与每种图表一样，矩形树图也并不是“全能选手”

擅长可视化带权重的数据关系

在展示不带有权重的层级关系数据时，使用矩形树图会显得层次不清。例如，在展示公司的部门组成时，运用矩形树图会模糊层次关系，但树状图就能清晰地表达。

矩形树图表达单纯层次关系

树状图表达单纯层次关系

矩形面积要适当

当小矩形所代表的类别占比太小时，文本会变得很难排布。

image

2015年手机品牌及其下属手机型号的销量情况

遇到这种情况，我们可以采用提示工具，显示矩形所代表的数据。

2015年手机品牌及其下属手机型号的销量情况

或者考虑给小矩形编号，用注释的方式说明矩形所代表的数据。网易数读栏目在利用矩形树图展示比尔及梅林达·盖茨基金会的捐款用处时，就采用了这样的方法。

盖茨基金会捐款承诺

只用于表达正值

由于矩形的大小不能为负值，所以矩形树图中代表矩形大小的变量只能是正值。

专注展示占比关系

作为表示占比的图表类型，矩形树图无法展示占比随时间变化的情况。如果要展示占比的幅度变化，堆叠柱状图（Stack Column）和百分比堆叠面积图（Percent Stacked Area Chart）都是不错的选择。

百分比堆叠面积图