数据可视化-Treemap
发现数据可视化已经是一个专门的课题。
比如我刚在《WEB+DB PRESS》里看到的D3.js。又比如我下面转载的这篇关于treemap的文章。
原文:
http://zhuanlan.zhihu.com/datavis/19894525
来，认识一下这个数据可视化中的90后：Treemap
Xhinking · 6 个月前
在新版友盟指数设备详情中有个这样的可视化图表：
从这张图可以很直观的看到中国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.jsTreemap 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 Weskamp，现任Flipboard设计师。
Obama’s 2012 Budget Proposal: How $3.7 Trillion is Spent 走在数据新闻前沿的New York Times制作的奥巴马政府2012年财政预算案TreeMap，提供了可交互的方式来分析预算的安排。
The Billion Dollar-o-Gram 2009 Information is beautiful中的这个经典案例直观的告诉我们Billion是什么概念。
很多磁盘管理App使用Treemap帮助用户可视化磁盘状况。如Mac平台上的Disk Map for Mac
还有Android平台的Memory Map
总结
不可否认，作为90后的TreeMap也有一些缺点，例如无法很好的对比更深层级的子节点、极限值情况下不可读等等问题。我们应当意识到每种可视化方式都不是完美的，选择恰当的可视化方法，集中展现数据的某个角度，帮助我们分析洞察数据，转换为决策才是最重要的。
相关链接
新版友盟指数
Treemaps for space-constrained visualization of hierarchies
Squarified Treemaps
Treemap Art
Wikipedia - Treemapping
Wikipedia - Ben Shneiderman