在自然界之中,蛇的眼睛有夜视功能,即便是茫茫黑夜,它也能轻而易举的找到猎物,这是因为任何物体都会辐射热红外,且辐射的高低和温度成正比,由于
生命体的体温会明显高于周围环境的温度,所以在蛇眼面前便无处遁形。热红外成像被广泛应用于军事领域,比如士兵带上能识别热红外的眼镜后,就能轻而易举的
发现藏匿的敌人,如下图所示:
热红外成像
唠叨了半天,听上去似乎有点跑题了,其实不然,对互联网从业者而言,同样需要有火眼金睛,以便识别网友的喜好,此时的衡量标准是点击,点击越多则表示越喜欢,此技术被称作Heatmap,已经有网站提供此类服务,如:clickdensity
,clicktale
,crazyegg
等等,甚至还有类似clickheat
项目提供源代码供你直接使用。
不过最灵活的方案莫过于自己搞定,下面大概说说Heatmap的实现:
捕捉点击
当然,这需要Javascript来实现。为了不陷入浏览器兼容的泥潭,我们选择JQuery:
<script>
jQuery(document).ready(function() {
$(document).mousedown(function(e) {
if (e.clientX >= $(window).width() || e.clientY >= $(window).height()) {
return;
}
$.get("/path/to/a/empty/html/file", {
page_x : e.pageX,
page_y : e.pageY,
screen_width : screen.width,
screen_height: screen.height
});
});
});
</script>
之所以要记录屏幕分辨率是因为有的情况下需要修正点击坐标。比如说,一个居中显示的定宽的页面,其同一个位置在不同分辨率下的坐标是不同的,当渲染图片的时候,坐标需要以一个分辨率为准进行修正。
另外,如果用户正在拖动滚动条,是不应该记录的。
分析日志
客户端使用Ajax通过GET方法触发一个空HTML页面,如此就会在服务端留下日志:
page_x=...&page_y=...&screen_width=...&screen_height=...
不同的日志格式,结果会有所不同,这里仅仅以此为例来说明问题,本文采用AWK来解析日志,当然你也可以使用Perl或别的你熟悉的语言:
#!/usr/bin/awk -f
BEGIN {
FS="&";
}
NF == 4 {
param["page_x"] = "0";
param["page_y"] = "0";
param["screen_width"] = "0";
param["screen_height"] = "0";
split($0, query, "&");
for (key in query) {
split(query[key], item, "=");
if (item[1] in param) {
param[item[1]] = item[2];
}
}
print "page_x:" , param["page_x"];
print "page_y:" , param["page_y"];
print "screen_width:" , param["screen_width"];
print "screen_height:", param["screen_height"];
print "\n";
}
至于数据的持久化,是使用MongoDB或者别的,自己定夺,这里就不多说了。
渲染图片
出于演示方便的考虑,我使用了一些随机生成的数据,以Imagick为例,代码如下:
<?php
$coordinates = array();
for ($i = 0; $i < 1000; $i++) {
$coordinates[] = array(rand($i, 1000), rand($i, 1000));
}
$max_repeat = max(
array_count_values(
array_map(function($v) { return "{$v[0]}x{$v[1]}"; }, $coordinates)
)
);
$opacity = 1 - 1 / $max_repeat;
$heatmap_image = new Imagick();
$heatmap_image->newImage(1000, 1000, new ImagickPixel('white'));
$heatmap_image->setImageFormat('png');
$plot_image = new Imagick('plot.png');
$iterator = $plot_image->getPixelIterator();
foreach($iterator as $row) {
foreach ($row as $pixel) {
$colors = $pixel->getColor();
foreach (array('r', 'g', 'b') as $channel) {
$color = $colors[$channel];
if ($color !== 255) {
$colors[$channel] = $color + ((255 - $color) * $opacity);
}
}
$pixel->setColor("rgb({$colors['r']},{$colors['g']},{$colors['b']})");
}
$iterator->syncIterator();
}
$plot_size = $plot_image->getImageGeometry();
foreach ($coordinates as $pair) {
$heatmap_image->compositeImage(
$plot_image,
Imagick::COMPOSITE_MULTIPLY,
$pair[0] - $plot_size['width'] / 2,
$pair[1] - $plot_size['height'] / 2
);
}
$color_image = new Imagick('clut.png');
$heatmap_image->clutImage($color_image);
$heatmap_image->writeImage('heatmap.png');
?>
代码虽然很多,但并不复杂,其中用到了两个图片,分别是:plot.png
和clut.png
。实际应用时,有时候点击量会非常大,此时没有必要把所有的点击都渲染出来,而应该采取随机取样的策略,如果采用MongoDB持久化的话,可以参考:The Random Attribute
。
备注:代码参考image-tempest
。
最终展示
形象一点来说,其实就是通过CSS+Javascript把生成的图片盖在网页上,并调节图片透明度来达到合二为一的效果,篇幅所限,具体代码留给大家自己实现,例子效果可参考下图:
Heatmap
BTW:热点可能会随着时间改变,为了能对照某个时间的网页,可以使用CutyCapt
截屏。
有关Heatmap的详细介绍,还可以参考
收工!Heatmap虽然不是很复杂的技术,但涉及的方面却很繁杂,希望本文能帮到大家。
分享到:
相关推荐
1. 兼容性:heatmap3完全兼容R语言中原始的heatmap函数,这意味着它可以无缝替换原有的heatmap函数,无需修改已有的代码。 2. 新特性:heatmap3提供了一些新的功能和改进,以方便用户进行热图绘制。例如,它允许...
**heatmap.js热图JS**是一种强大的JavaScript库,用于在网页或地图上生成热力图,显示数据的密度和分布情况。这种技术常被用于展示地理数据、网站点击流分析、性能监控等多种场景,通过颜色的深浅来直观地表示数据的...
`heatmap.js` 是基础库,而`heatmap-openlayers.js` 可能是专门为OpenLayers定制的一个版本,它可能包含了将heatmap.js集成到OpenLayers的特定函数或适配器。 下面是如何使用OpenLayers和heatmap.js创建热力图的...
unity heatmap热力图下载
在前端开发领域,热力图(Heatmap)是一种常见的数据可视化工具,用于展示某一区域内数据密度或活动强度。本文将围绕“heatmap.js”和“CesiumHeatmap.js”这两个JavaScript库,探讨它们如何帮助开发者创建动态、...
"3d仓库,threejs+heatmap结合"的主题涉及了两个关键知识点:Three.js和热力图(Heatmap)。接下来,我们将详细探讨这两个重要概念及其在实际场景中的应用。 **Three.js** 是一个基于WebGL的JavaScript库,用于在...
在网页开发中,我们常常使用JavaScript库来创建热力图,其中`heatmap.js`是一个非常受欢迎的选择。本文将深入探讨`heatmap.js`库以及如何在canvas上绘制热力图。 `heatmap.js`是一个轻量级且功能强大的JavaScript库...
【标题】"heatmap.zip"是一个包含使用ArcGIS JavaScript API与heatmap.js库结合的示例代码。这个压缩包展示了如何在Web前端生成热力图,无需依赖原始的JavaScript API。 【描述】热力图是一种视觉化的数据表示方式...
【ArcGIS API4.X+heatmap.js热力图示例】是一种在三维地图上展示数据分布密度的方法,结合了Esri的ArcGIS API 4.x版本的地理信息系统功能和heatmap.js库的强大热力图渲染能力。ArcGIS API 4.x是Esri推出的一个用于...
《UE热力图插件Heatmap Effect Generator深度解析》 在3D游戏开发与虚拟现实应用中,热力图作为一种强大的可视化工具,被广泛用于分析玩家行为、优化用户体验以及进行环境设计评估。UE(Unreal Engine)作为全球...
在这个压缩包“heatmap.js.zip”中,包含了一个热力图插件,它可能是JavaScript库,旨在帮助前端开发者在网页上轻松地创建和展示热力图。这个插件基于jQuery、HTML5、CSS和JavaScript技术,这些都是构建现代Web应用...
本项目“Heatmap3dRenderer.zip”是结合了流行的JavaScript库three.js和Esri的arcGIS技术,为用户提供了在Web环境中展示三维热力图的能力。下面我们将深入探讨其中涉及的关键技术和应用。 首先,**three.js** 是一...
vue+js:Heatmap 热力图实现,亲测可用,依赖Heatmap.js插件,下载后添加引用即可。
提供热力图可视化展现功能,注: 支持chrome, safari, IE9及以上的浏览器. 核心的代码主要来自于第三方heatmap.js, 主入口类是HeatmapOverlay, 基于Baidu Map API 2.0。 ,
热力图(Heatmap)是一种数据可视化工具,它用颜色的深浅来表示数据值的大小,能够清晰地展示大量数据的分布和趋势。在Windows Forms(WinForm)平台上实现热力图,可以帮助用户在桌面应用程序中直观地理解数据。本...
heatmap illustrator 是一款专业的绘制热图软件,所绘制的热图质量高,清晰。
标题 "heatmap4practice_heatmap_" 暗示我们关注的是一个与热力图(heatmap)相关的实践项目。热力图是一种强大的数据可视化工具,它用颜色来表示数据矩阵中的值,帮助用户快速识别数据模式、趋势和关联。在这个实践...
在本文中,我们将深入探讨如何利用Leaflet JavaScript库与heatmap.js插件,结合本地存储的谷歌离线瓦片地图,来实现一个自定义的热力图应用。这将帮助开发者在离线环境下创建动态且直观的数据可视化效果。 首先,...
Heatmap热图,可以非常直观的呈现一些原本不易理解或表达的数据,比如密度、频率、温度等,改用区域和颜色这种更容易被人理解的方式来呈现。热图实际上是三维可视化的...
=============== heatmap3D 将2D热图转换为3D模型可观察到X,Y,Z三个方向的对象的热图。参考建设者var j_heatmap3d = new heatmap3d . create ( ) ;创建2D热图画布j_heatmap3d . createHeatmap2dCanvases ( width ,...