最著名的层次数据的可视化技术可能就算由Ben Shneiderman改进设计的Treemap技术。这种技术也是使用长方形。但是与前面xdiskusage所用的技术不同,Treemap巧妙的通过变换长方形的方向和嵌套长方形来表示不同的层次,并通过长方形的大小来显示节点的重要性。下面的图左边是通常见的树 型结构图。每个节点上的数值是下面低层节点上的数值和。右边的图是由Treemap生成。它把左边的层次结构转换成相互嵌套的长方形,长方形的方向则在不 同的层次变换,长方形的面积则表达了数值的大小:对应于第一层,这个区域分成三份,长方形a面积 3,b面积4,剩下面积18,a和b采用竖的方向;对应于第二层,在剩下面积18的区域里,再划分出长方形c面积5,d面积3,和剩下面积10的一块,c 和d采用横的方向;对应于第三层,剩下面积10 的区域里,划分出e面积6和f面积4,采用竖的方向。从右边的Treemap图,我们可以直观看出c和d要比e和f高级,而e和c看上去比其他的节点要重 要。

这种Treemap的技术被广泛的应用,并衍生出一些新的技术。2004年MarcosWeskamp开发出一种用来显示google新闻的技术叫Newsmap。 下面的图就是由这种技术生成,长方形的颜色代表了新闻的类型(体育,娱乐,等等),长方形的大小表示了该条新闻一共有多少篇文章/通讯社在报道。这样我们 就可以知道哪些新闻现在是热点。此外,颜色的深浅代表的新闻的时效:最近的新闻颜色会比较浅,老的就比较暗。从下面的图可以看出中国地震和Obama的竞 选是当时的两大热点。

基于Treemap,SmartMoney设计了用来显示股票市场的技术:只用一张图就可以显示超过500个股票交易所的成交变换。这种技术通过简洁的方式可以同时显示多只股票和它们的细节,自动的每过15分钟更新,使读者可以对整个市场有个整体的把握,可以算得上信息可视化的经典成功例子。在下面第一张图里,这种技术将每只股票表示成一个长方形,长方形的颜色和层次定义根据股票的不同板块(医疗健康,金融,能源,高科技,等等)。长方形又进一步组织根据股票所对应的不同工业类型(比如高科技板块又分成软件,硬件,互联网,通信,半导体,和外设)。长方形的大小反映了公司的市值(市值越大,长方形越大)。颜色表示价格的波动,比如绿色表示涨,红表示跌,黑色表示 不变。这种技术还可让用户放大到局部看具体的细节。这样用户既可以对整个市场有个基本概念,并能比较不同的股票板块。比如下面的第二张图就是放大的结果, 其中可以清楚看出不同的计算机硬件厂商之间的股票涨跌。也许这种技术可以让大家看股票的时候减少视觉疲劳。

© 2010, 视物 | 致知. All rights reserved.

Related Posts: