从友盟指数的设计思路，分析可视化领域“小鲜肉” Treemap

日前，看到有人在知乎、twitter 上讨论新版指数的设计思路，也有朋友来问“Treemap是什么工具”？在此发个科普贴解释一下。

在新版友盟指数设备详情中有个这样的可视化图表：

从这张图可以直观的看到中国 Android 智能手机市场各大品牌占有率情况。通过颜色区分品牌，通过面积表现各个品牌占有率，一目了然。每个品牌矩形还被分割成了若干小矩形，这些小矩形对应了该品牌下各种机型的占比。点击某个品牌区域可以放大至该品牌的机型细分视图，浏览机型的占比情况。
​
其实，这是一个非常典型的 Treemap 可视化应用，Treemap 适合展现具有层级关系的数据，能够直观体现同级之间的比较。例如上面 Android 设备占有率 Treemap 的原始数据结构是这样的：

可以想象，如果使用这样的树状结构直接展示中国Android设备占有率是多么的低效，并且还损失了很多信息。

再说下Treemap 的历史

初见 Treemap 可能会觉得与传统统计图表相比有些非主流，的确，Treemap 人家可是个不折不扣的 90 后。

Treemap 由马里兰大学教授 Ben Shneiderman 于上个世纪 90 年代提出，起初是为了找到一种有效了解磁盘空间使用情况的方法。

教 授首先想到的是用树状结构来表示，但是这样图表会太占空间。那么如何在受限空间内展示树状数据结构呢？Ben 教授想利用面积来表示文件大小，但是用矩形、 三角形还是圆形都有一定的问题。正当 Ben 教授在休息室中思考时，突然 “Aha”，想到了将屏幕交替切分为水平和垂直方向的矩形，用递归来实现层级关系。 教授花了几天时间验证这个想法，并完成了只有六行的算法。算法和最初的设计发表在 1992 年 1 月的《ACM Transactions on Graphics》上。

如何命名这种展现形式呢，Ben教授想了很久。最终确定为我们今天所熟知的Treemap。Treemap一词很好的表示了一个Tree状结构转化为平面空间矩形的状态，就像一张地图，指引我们发现探索数据背后的故事。

经过之后多年在实践中不断的改进与优化，Treemap 逐渐发展完善。今天，我们可以通过 Tableau 或者 D3.js 很方便的制作出漂亮并且实用的 Treemap。

2014 年 10 月 16 日至 2015 年 4 月 15 日，在 Washington DC 的 National Academies Keck Center 还有个 Every AlgoRiThm has ART in it：Treemap Art Project 的展览，可以在现场感受 Treemap 的魅力。下图为在展览上 Ben 教授。

Treemap 背后的技术

Treemap 在视觉上呈现出一种秩序的美感，这应当归功于背后的算法。在限定面积尺寸的矩形中如何根据值来划分节点的长宽与位置关系到 Treemap 最终可视化的效果。

Treemap 布局算法大致有以下 5 种：
BinaryTree
Ordered
Slice And Dice
Squarified
Strip
Treemap 早起使用的是 Slice And Dice 算法，但是这种算法很容易在结果中出现细长的矩形（可以在上面早起 Treemap 上看到）。人类视觉对于面积的识别能力本来就不足，对比细长矩形的面积更加困难，影响了 Treemap 的可视化效果。

1994 年 Hascoet & Beaudouin-Lafon 提出了 “squarifying”（译作“正方化”）算法，使得计算出的矩形尽量接近正方形，以达到最佳可视化效果。

友盟指数使用了 D3.js，在D3.js Treemap Layout 中使用的默认算法便是 Squarified（还可以选择 Slice and Dice 算法生成垂直或水平矩形布局的 Treemap）。具体的 JavaScript 实现代码可以 Github 看到。

大致介绍一下 Squarified 算法的计算流程。

如下图所示，在面积为 24 单位的区域内，规划面积分别为 6, 6, 4, 3, 2, 2, 1 单位的矩形，并尽量接近正方形。

下图中分步演示了规划的过程，Squarified 算法中最重要的一点就是计算最新放置矩形的长宽比，长宽比越接近 1 则越接近正方形。所以当长宽比偏离 1 时，应放弃这种情况，调整矩形插入位置。（点击查看大图）

这样便完成了树状结构一级的布局，然后对每个矩形区域继续按照上述方法进行计算，最终绘制出完整的 Treemap。

Treemap的应用

时至今日，Treemap 被应用于各行各业中，人们基于 Treemap 这种可视化方法创造出了更多富有创新精神的应用。

Newsmap 是一个非常经典的 TreeMap 在新闻媒体领域应用，颜色区分新闻类别，面积代表了相关新闻的数量。

Newsmap 的作者是 Marcos Weskmap ，现任 Flipboard 设计师。

走在数据新闻前沿的 New York Times 制作的奥巴马政府 2012 年财政预算案 TreeMap，提供了可交互的方式来分析预算的安排。

Information is beautiful 中的这个经典案例直观的告诉我们 Billion 是什么概念。

很多磁盘管理 App 使用 Treemap 帮助用户可视化磁盘状况。如 Mac 平台上的 Disk Map for Mac。

还有 Android 平台的 Memory Map

总结

不可否认，作为 90 后的 TreeMap 也有一些缺点，例如无法很好的对比更深层级的子节点、极限值情况下不可读等等问题。我们应当意识到每种可视化方式都不是完美的，选择恰当的可视化方法，集中展现数据的某个角度，帮助我们分析洞察数据，转换为决策才是最重要的。

点击“阅读原文”，查看完整博文。
友盟每周分享最实用的 App 实战运营文章、最新的移动互联网关键数据，推荐开发者订阅、投稿，微信号：umengcom ；如有友盟产品使用问题，请发邮件至[e-mail] 。