数据可视化-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

时间: 2024-11-06 07:41:57

数据可视化-Treemap的相关文章

利用R语言进行交互数据可视化(转)

上周在中国R语言大会北京会场上,给大家分享了如何利用R语言交互数据可视化.现场同学对这块内容颇有兴趣,故今天把一些常用的交互可视化的R包搬出来与大家分享. rCharts包 说起R语言的交互包,第一个想到的应该就是rCharts包.该包直接在R中生成基于D3的Web界面. rCharts包的安装 require(devtools) install_github('rCharts', 'ramnathv') rCharts函数就像lattice函数一样,通过formula.data指定数据源和绘图

推荐14款基于javascript的数据可视化工具

随着数据可视化概念逐年火热,有较多优秀的图表开源库和制作工具脱颖而出,下面,我们就拿其中比较有名的 14个产品进行简要介绍. 1.AnyChart 链接:http://www.anychart.com/ AnyChart 是基于 Flash/JavaScript(HTML5) 的图表解决方案,它可以轻松地跨浏览器.跨平台工作.除了基础的图表功能外,它还有收费的交互式图表和仪表功能.它可以通过 XML 格式获取数据,该方式让开发人员非常灵活地控制图表上的每一个数据点,而当图表数据点数量偏大时,则可

利用R语言进行交互数据可视化

本文是本人受统计之都邀请写的一篇关于数据可视化的文章,感兴趣的同学可以上统计之都去查看. http://cos.name/2016/06/using-r-for-interactive-data-visualization/ 上周在中国R语言大会北京会场上,给大家分享了如何利用R语言交互数据可视化.现场同学对这块内容颇有兴趣,故今天把一些常用的交互可视化的R包搬出来与大家分享. rCharts包 说起R语言的交互包,第一个想到的应该就是rCharts包.该包直接在R中生成基于D3的Web界面.

数据可视化与D3.js

数据可视化 数据可视化是如何把数据更好的展现出来的一个课题,在大数据出现后,它变得更为重要和迫切. 以前使用excel进行柱状图.饼状图.折线图等是最常用的数据可视化手段之一,而在WEB端,使用流行的extjs.fusioncharts.jfreechart,或者相对不太流行的amchart.highcharts.Bootstrap里的charts.jquery的一些插件等等都可以实现饼状图等的展示. 然而我这里说的数据可视化并不是这种传统的.简单的图形,而是更为复杂,能够在有限的空间里展示更多

地理数据可视化:Simple,Not Easy

如果要给2015年的地理信息行业打一个标签,地理大数据一定是其中之一.在信息技术飞速发展的今天,“大数据”作为一种潮流铺天盖地的席卷了各行各业,从央视的春运迁徙图到旅游热点预测,从大数据工程师奇货可居到马云布道“DT”时代,“大数据”被推到了一个前所未有的高度,连国家领导人出访演讲都言必称大数据.地理信息数据天生具有大数据属性,作为整天和地理信息数据打交道的地信人自然不甘落后,地理大数据概念脱颖而出. 地理大数据是什么?大体来说就是把社会经济.自然资源.商业信息等但凡具有一点空间维度的数据一股脑

数据可视化-gojs插件使用技巧总结

随着云计算时代的到来,由于Web技术的快速革新以及为了提供高质量的用户体验,数据可视化成为了前端技术发展的一大方向.为了解决这个问题,现如今涌现了很多优秀的第三方的javascript图形库,比如highcharts.js,echarts.js,d3.js,go.js- 数据可视化javascript插件对比 在HTML5标准支持下,web实现图形标准主要分为canvas和svg,上述的javascript图形库都是依赖2者之一作为底层库.Canvas基于像素,提供2D绘制函数,是一种HTML标

蒋步星:数据可视化技术的误区

所谓数据可视化是指把数据以图形动画以及地图等形式呈现出来,这样即直观又美观,易于理解从而看出数据背后的问题. 要做好数据可视化,需要两方面的能力.一是"艺术"能力,即知道什么样的数据用什么形式去表现最合适,该用柱图时不能用饼图,颜色搭配也要合理,另一个是"技术"能力,设计好的呈现方案还要能真地做出来,并且要把成本控制在可接受范围内.这里我们不深入讨论"艺术"问题,来看看考察和选择可视化技术中的一些常见误区. 误区|考察报表,挑可视化技术最好? 报

数据可视化工具

随着大数据的崛起,数据分析变得越来越重要,数据可视化工具能更直观地展示数据之间的联系和变化,是数据分析中不可或缺的工具. 1. iCharts iCharts是一个在线的数据可视化工具,被广泛应用于商业.经济.体育等领域的报告中.iCharts免费版本提供了一些基本的交互式图表样式,如果更使用高级的样式,则需要购买高级版本. 2. Fusion Charts Suit XT Fusion Charts Suit XT是一个专业的JavaScript图表库,可以用来创建90多种类型的图表,包括2D

ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要将后台数据库上的一些数据以可视化的方法显示到前端,找来找去,发现百度开发的这套图表工具库还不错,网上搜索了一下相关的教程,也算是实现了较为简单的demo.于是写下来,记录一下. ECharts ECharts是国人开发的一套前端的图表工具库,使用起来超方便,也很简单(当然了,前提是理解了其工作原理之