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://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的熱圖項目。
熱圖技術的更多應用：
了解了熱圖的原理和優點，我們可以大膽應用，我舉幾個例子，拋磚引玉：
足球比賽中，可以用來呈現隊員在場上的活動熱圖：
超市或商店里呈現顧客的移動和駐足的熱圖，用來優化商品和貨架布局。
統計房屋租金價格，與地圖結合看租房熱度：
統計程序中的字幕頻度，用鍵盤和熱圖呈現，來看不同編程語言的常用字符：
