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

CNN的一个绚丽可视化–ecosphere
很酷有木有!如果语言也是种生物,它或许会长成这个样子。这是COP17(联合国气候变化框架大会第17次全体缔约方大会)关于气候变化的实时观点的可视化
该可视化应用的成功不但在于这种展示方式对于海量数据本身的理解检索上提供了多少便利,更多的还在于树这个形式与应用场景环保这个实际话题良好的契合,加上良好的效果,使之成为一个优秀的可视化案例。

more