国内外Heatmap、热图的应用和相关技术

Heatmap热图，可以非常直观的呈现一些原本不易理解或表达的数据，比如密度、频率、温度等，改用区域和颜色这种更容易被人理解的方式来呈现。

 

  最近我们团队在 雨量分析里的热图应用

  这样可以更 清晰，精确的反映 一场降雨的分布

 

 

 

热图实际上是三维可视化的俯瞰效果。（颜色代表一个维度）。

我们对热图并不陌生，教科书里、天气预报里的气温地图是最典型的案例。

在用户体验制胜的微创新时代，热图在互联网用户行为分析上的应用也越来越被重视。常见的应用有：

鼠标点击热图：

演示地址 http://js.clicki.cn/#/clicki/heatmap   热图应用

屏幕滚动热图（scroll map）：

眼动/注意力热图（Attention heatmap）：

用户地区热图

热图的优缺点：

优点：

1. 与实景结合，数据表达更直观

原始数据：在一个1024*800的网页上的点击数据：{x:420,y:302}的信息可读性，跟下图相比显然不可同日而语。

2. 用形状和色彩传递信息，更易理解

人对事物的认知是感性的基于某种基模的，人对形、色、声、味、温度、压力…等可直接感知内容的理解要比数字容易的多，热图之所以为“热图”是用人们熟知的火焰色彩传达温度感，借助形、色和温度三种基模传递原本难以理解的数量信息，非常之给力。

3. 柔化视觉效果更好，对非精确信息表达更合理

摄影爱好者一定知道柔光摄影技巧，照出来的照片更漂亮。

有时候我们更希望得到数据的平均值或近似值，而不是精确值，比如我们点击网页上的内容时并不是精确到某一像素，而是一个区域。因此模糊处理后可以更合理的解释用户比较喜欢点击的区域。

 

缺点：

1. 柔化效果，对精确信息表达不准确

优点在某些时候也是缺点，当我们分析作弊时，精确点更具说服力：

看上面两张图，第一张图并不明显，第二张图就可以看出问题了，428个点击，平均分布在10个位置，偏移量不超过5像素，显然不是人干的。

 

2. 色彩传递感性化信息，不容易分辨具体值

还是这幅图，单从热图上看，只有9个圆点，而实际上有却有1400次点击。从热图上无法分辨出每个圆点涵盖了多少次点击，点击数等量增减，热图完全一样。

 

任何一种可视化手段都不是完美的，更不是万能的，所以我们在利用可视化技术时，应该根据具体需求做取舍。

热图的实际应用：

国外的热图产品比较有代表性的：

CrazyEgg：http://www.crazyegg.com

是我所知道最早的公开使用热图工具，有热图、点图、链接点击图。点图用flash实现，功能强大支持各种条件筛选过滤，而且非常好用。可惜是收费的，最低每月9美金，只支持10000pv和10个页面。

 

ClickTale：http://www.clicktale.com

Clicktale是我所知道最早实现用户鼠标轨迹监测的产品。除点击热图外，clicktale还支持鼠标轨迹重现、鼠标移动热图、scrollmap、表单分析等等深度用户行为分析功能。也是收费的，最低收费99美元/月。

 

国内也有很多产品支持热图：

Clicki:http://www.clicki.cn

Clicki是我所知道最早放出热图功能的产品，早在2007年就已经有案例，但是当时服务并不稳定，用的人不多。去年Clicki重新改版，热图功能非常给力，使用canvas实现，支持全站热图，热图实时更新，支持多条件过滤。目前功能免费，但需要邀请码才能注册。

 

百度统计：tongji.baidu.com

百度统计去年上线了热图功能，热图用flash实现，支持区域框选和条件过滤。功能免费，需要预先指定要统计的页面，数据延迟一天。

 

Cnzz也在今年放出热图功能，功能跟百度基本一致。

量子统计：http://lz.taobao.com/

量子统计的热图功能针对性更强，主要针对淘宝店铺，量子在淘宝上是收费的，我没有开通，不太了解具体功能。

热图的技术原理：

火丁笔记这篇文章非常清楚的解释了热图的技术原理：http://huoding.com/2011/01/04/39

Oldj这篇文章讲解了热图渲染的原理：http://oldj.net/article/page-heat-map/

综合这两篇文章，基本上能够实现一个简单的热图功能了。但要实现数据关联和动态更新，还需要更多的工作。

 

热图的开源工具：

Clickheat是我最早了解到的点击统计开源项目，是一个php的开源代码，用php渲染图片，呈现热图，热点太小，呈现效果一般，可以自己改一下，实现更好的效果。

 

phpHeatmap是2006年我做Clicki的热图时，实现的一套基于php的热图代码，当时看到Crazyegg，查了一些资料后自己尝试实现的，后来博客挂了一直没再更新。这次整理资料重新放到网上，有兴趣的同学可以参考。

 

Heatmapjs是一个基于js+html5的热图开源项目，Clicki的热图就是基于这个项目。功能完善，使用简单。

 

HeatCanvas是国人开发的一款基于js+canvas的热图项目。

 

热图技术的更多应用：

 

了解了热图的原理和优点，我们可以大胆应用，我举几个例子，抛砖引玉：

 

足球比赛中，可以用来呈现队员在场上的活动热图：

超市或商店里呈现顾客的移动和驻足的热图，用来优化商品和货架布局。

统计房屋租金价格，与地图结合看租房热度：

 

统计程序中的字幕频度，用键盘和热图呈现，来看不同编程语言的常用字符：