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

数据可视化-Treemap相关推荐

python中使用squarify包可视化treemap图：treemap将分层数据显示为一组嵌套矩形，每一组都用一个矩形表示，该矩形的面积与其值成正比、自定义设置每一个数据格的颜色
python中使用squarify包可视化treemap图:treemap将分层数据显示为一组嵌套矩形,每一组都用一个矩形表示,该矩形的面积与其值成正比.自定义设置每一个数据格的颜色目录
Py之pyecharts：python包之数据可视化包pyecharts简介、安装、使用方法之详细攻略
Py之pyecharts:python包之数据可视化包pyecharts简介.安装.使用方法之详细攻略目录 pyecharts简介 pyecharts的安装 pyecharts的使用方法 1.图形绘 ...
数据可视化系列（六）：场景案例显神通
数据可视化的图表种类繁多,各式各样,因此我们需要掌握如何在特定场景下使用特定的图表. 数据可视化是为业务目的服务的,好的可视化图表可以起到清晰准确反映业务结果的目的,在选择使用何种图表时,通常我们需要 ...
让效率“爆表”的49个数据可视化工具
工欲善其事,必先利其器.好的工具可以大大提升你的工作效率,并获得身边人的羡慕和赞赏.今天,我们就来向小伙伴们分享一大波非常实用的工具,武装你的大脑. ▲图表类 iCharts 简介:各种主题的开放图表 ...
数据可视化的图表实现
D3官方地址:https://github.com/d3/d3/wiki D3.js介绍: D3.js 是基于数据驱动文档工作方式的一款JavaScript函数库,主要用于网页作图.生成互动图形,是最 ...
推荐14款基于javascript的数据可视化工具
2019独角兽企业重金招聘Python工程师标准>>> 随着数据可视化概念逐年火热,有较多优秀的图表开源库和制作工具脱颖而出,下面,我们就拿其中比较有名的 14个产品进行简要介绍. ...
python利器-Python 数据可视化利器
原标题:Python 数据可视化利器 (给Python开发者加星标,提升Python技能) 作者:zone7(本文来自作者投稿,简介见末尾) 概述前言推荐 plotly bokeh pyechar ...
Echarts数据可视化开发参数配置全解
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 github源码地址:https://github.com/626626cdll ...
[转载] 50个数据可视化最有价值的图表（附完整Python代码，建议收藏）
参考链接: 使用Python中的不同图表进行数据可视化本文总结了 Matplotlib 以及 Seaborn 用的最多的50个图形,掌握这些图形的绘制,对于数据分析的可视化有莫大的作用,强烈推荐大家 ...

数据可视化-Treemap

数据可视化-Treemap相关推荐

最新文章

热门文章