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

zhouningyi  2014.05.28

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

房租热力图(RentHeatMap)

Theseus  2011.12.15

项目作者:淘宝EDP
项目简介:杭州各地区每居室月房租的热力分布图。用户可以直观地观察到杭州各地区房价的高低。
可视化技术:HTML5JavaScriptGoogle Map API
可视化展现形式:热力图;地图
数据来源:淘宝房产2011年五、六月份房东和中介公司发布的房源数据。

数据处理:从房源数据中提取可信度较高的租房成交数据,统计了覆盖杭州的经、纬度间隔为0.005的各网格点处的平均房租,插值绘图。
more