Cartogram-变形地图

骑象  2014.09.26

在进行可视化设计时。经常会用到地图。当使用地图时,经常是把用来描述其他信息情况的,而地图只是为了区分类型而存在。比如:人口数,森林覆盖率,水含量,GDP等。通常的使用方式是,地图本身表示地图差别,然后颜色表示量。再通过颜色的差别让用户感知到问题。
more

大屏可视化设计——流程心得

骑象  2014.08.29
大屏数据可视化设计方法论很少,正好自己参与过部门多个大屏项目,所以总结了大屏可视化设计的方法。
希望通过这篇文章能帮助大家整理思考过程,提高工作效率,同时很好的达到目标,找到兴趣。

more

NORSE 全球黑客攻击示意图

骑象  2014.07.31

NORSE是号称可以显示观测实时网络攻击的网站。
把抽象的网络攻击图像化显得非常有画面感。

网站地址:http://map.ipviking.com/

more

Visualizing MBTA Data分享

Theseus  2014.06.24

Visualizing MBTA Data   作者:Mike Barry and Brian Card

通过@数据挖掘与数据分析 转发的  @英特尔商用频道 的相关微博,看到了这个非常出彩的数据可视化分析报告。之所以称之为报告,是因为其中详尽的数据说明和清晰的分析层次,已经不能简单地说是一个数据可视化展示了。

 

交通数据一直是数据可视化的一个热点,Visualizing MBTA Data(VMD)这个作品也将视角锁定在了这个领域,并选取了地铁运行数据来进行数据可视化分析。先介绍一下背景。美国波士顿的马萨诸塞湾交通局掌管着繁忙度全美排名第四的地铁系统。最近马萨诸塞湾交通局将其大量的地铁运营相关数据通过API的形式向公众开放。该API提供的数据良好的遵守了GTFS(一种由GOOGLE制订的常用于交通运输数据的数据格式)规范。

该作品的两位作者正是基于马萨诸塞湾交通局提供的良好数据源,从中提取了2014年2月整月四条地铁主干道的地铁的行驶数据,同时又通过MBTA获得了各个地铁站检票闸的人流量数据。在此基础上,作者认为可以从三个层面来展现数据:地铁的行驶,人们如何搭车地铁,地铁和乘客两者从数据上反映出的相互关联。

可以看到在拥有良好数据源的基础上,作者在提出问题的过程中,完全没有试图去提出解决地铁运营或者改善地铁运营的设想,只是希望更好地展现数据本身。首先作者的前两个问题就将数据源维持在简单的单维度信息源上,没有基于设想两者的融合展示。然后也是希望通过将两个单维数据通过可视化的形式充分展示理解后,再找数据连接点。这无论是从作者自身分析问题,还是阅读者来看这个作品都是一个非常好的分析理解过程。这种前期问题的设定也是非常值得学习的,现在更多人总是在拿到一份数据后总在想通过数据可视化最终找到一个什么问题的症结所在从而解决一个问题,却恰恰跳过了最最重要的看清数据长什么样的过程。

具体对于问题一步步的分析文章里就不详述了,因为原文已经有了非常细致说明,在这儿就说说小编从这个作品中学到的几点。

  • 优秀的联动

 现在,我们在制作数据可视化作品的时候已经非常注意图表间的联动了。最早在袁晓如老师的课上了解做LinkView的优点,现在ECharts更加是做了很好地联动配置。但是在这个可视化作品里,我看到了自己一直忽视的说明文字与图表的联动。例如下图:

点击左边的时间段说明文字,右侧图表的时间轴会自动滚动到对应的时间段。如果说这个联动还太像图例,图中右侧的说明名字中的蓝色文字将会高亮需要注意的异常数据,这就是非常典型的文字说明与图表的联动。这样的联动在这种明细展示类型中特别好用,可以帮助用户快速进入分析过程,这种的分析结果输出不显得突兀,有别于单纯信息图表的信息输出。

  • 自身图表的完善

 说实话刚看到作品中第一个地跌行驶数据的可视化行驶,心中咯噔了一下,这种大规模数据的展示如果在页面中出现分页的情况,非常不利于可视化的解读。虽然良好的交互以及明白了作者所要体现的问题,让我体验的感觉好了不少,但还是觉得有更好地形式来展示这份数据。作者仿佛准备抓住了我的这种心里,在这个段落的最后给了我惊喜。

这张图其实相当于上图的压缩版,在非常小的空间里简洁明了的展示了总体数据的形态,也非常容易捕获异常数据的所在。同时在这一个可视化上面的说明文字中也与这幅图有联动,真是让人充分感受了良好的数据阅读体验。

  • 清晰层次

作者在用数据可视化展现数据的同时,也通过良好的分析层次结构展现出来。无论将总的问题拆成三个层次鲜明的三大部分,还是数据可视化方法从前到后由简到繁、从分到总得设计,都让读者仿佛跟着两位作者一同完成了这个作品,所以说这篇文章本身也是对于两位作者分析过程的一种可视化展示。

这个作品让小编非常激动,一口气写下了这篇文章,其中有什么错误的地方请大家指出,也欢迎大家在微博上继续和我们讨论。谢谢大家!

 

 

 

webgl热力图-5个商圈的24小时

zhouningyi  2014.05.28

通常见到的热力图,按红橙黄绿青蓝的颜色,即暖色到冷色,对应区域内数据从多到少。热力图在可视化场景中运用广泛:淘系产品量子恒道中,卖家能通过热力图分析自己店里购物的鼠标点击行为,分析用户一般喜欢点击页面的什么部分。又如2年前的一个demo,我们在地图上用热力图分析杭州的房价,可以从中看出房价大概分布。 可通常我们见到的热力图有2个弊端: 1、定性不定量,你不知道每个颜色上具体对应的数值。 2、计算比较慢,通常,为了保证浏览器的兼容性,我们绘制热力图用的这个库。这个基于canvas的库非常经典,但绘制的速度不够快。如果一份数据一秒钟变几次,热力图的大小又很大,那浏览器就悲剧歇菜了。 还好,如果你用chrome或者firefox等新浏览器,webgl可以助你一臂之力,webgl的图形计算,使用GPU加速,一次性可以平行进行大量图形计算,速度刚刚地快。虽然原生webGL殊为不易,但不要紧,已经有人写好了一个叫做webgl-heatmap的库,而且使用方法很简单。可以看看俺的这个案例: 在这么流弊的计算能力帮助下,我和高德地图做了一个城市人流(数据来源于手机定位)的可视化demo,从中我们可以看到北京五个商圈在不同的时间里人流的分布情况。可以播放、暂停以及在slider上直接选择。

透视美国国会

Theseus  2012.01.20

Clear Congress Project:这个可视化案例是一个从领导能力,政治主张两个主要方面对美国国会议员们进行了可视化分析工具。
构成这个可视化分析工具的可视化方法非常简单,但是这个案例的具体价值体现在这个可视化分析工具设计者是从实际需求出发,并且在开发完这项工具以后,利用该工具进行了大量的分析。在>设计者的博客
more

一个单词的家境、家史和家谱

Theseus  2012.01.20

GraphWords

一个单词它到底是什么?一个人的成长离不可它的家庭环境,一个单词也是,看看单词它家是什么样的,就知道这个单词是哪路货色了

嗯,网络图什么的最适合表示这种暧昧不清传宗接代的关系了~

这个一看也很容易明白它是干什么的,不同颜色代表不同的词性,中间的小节点就是这个词的一个释义。

你可以搜“love”试试,它的动词解释各种内涵。这个工具玩好了还挺有意思~
more

来一场音乐的旅行吧~

Theseus  2012.01.20

旅行嘛,总去个谁谁他祖坟,谁谁曾吃喝拉撒的地方也没意思,这个西方舞曲音乐发展变迁的可视化为音乐发烧友提供了一个新的出发理由,从十八世纪到二十一世纪,你可以在这张图上看到舞曲音乐在西方各国发展的旅程,出游的时候,可以去探索各个流派起源地方,来一场回归之旅,在最悠远古老的音乐里听听人类文明的声音,各路文艺青年以及预备文艺青年可以试试。
more

去哪炒房?

Theseus  2012.01.20

Trulia 根据每个月美利坚国土上找房者在网上搜索房子的pv数据,将地区房子的热度一目了然地可视化出来,你可以看到某些地方的草生长得越来月旺盛而坚挺。换成个中国版的应该很有意思。中国版应该叫炒房投机风向图
more

看,灰机灰过去了!

Theseus  2012.01.20

这是一个实时的飞机航线可视化,基于地图很直观,就是说如果你有耐心,你可以在屏幕这端看着亲爱的他/她的飞机一点一点地飞到(或者说挪到)地图上的另一点。对了,有兴趣的话可以体验下高峰时期的场景,有密集恐惧症的亲们慎入。
more