数据可视化之热力图

最近看了一下百度的热力图,通过百度地图,确实是一个实时大数据渲染的一个形象表达形式,正好借这个机会学习一下,刚买的机械键盘,发现有两个好处:每天不写点代码(或调试),感觉对不起这价钱啊,估计我之前买的所有键盘+鼠标花费总和都不如这个键盘贵;其次就是控制自己不再吃零食了,怕掉进键盘里心疼啊。

好了,热力图还是相对比较容易,我们主要讨论如下3+1点吧,主要是前三部分,后面只是简单分析一下百度热力图和个人的简单看法。热点图的实现参考了SuperMap的热点图和百度Echarts的热点图实现。

  • 原理
  • 实现
  • 优化
  • 百度热力图简述

原理

如上是全国范围内的截图,一看就能了解当前中国人口密集度。每个区域的形状不规则,而且还五颜六色。直觉上,我们会觉得每个区域都应该有一个位置点,还应该有一个缓冲范围,然后对这个范围内进行一个渐变效果。这个思路应该还是比较理性的,只是还是无法解释区域的不规则,但抽象了位置点(XY)和渐变(五颜六色)的数据概念。那我们再结合数据,看看我们的推理是否准确。

这是一个示例数据,可见每一个HeatPoint由三部分组成(X,Y,Weight)。这个和我们之前分析的比较类似,每一个热点都有一个位置和权重,权重越大,则该点越显著,也就代表其渐变的一个衰变因素。不规则的区域又是如何形成的?看完代码后发现,是每个热点各管各的,然后相互叠加影响,形成了最终具有真实意义的奇形怪状的热点图。想想也是,不然好看不实用,那热点图的设计也就本末倒置了。另外还有一个半径属性,主要是缓冲区的半径,表示该热点的影响范围,通常我们认为所有热点的影响范围即半径都是一样的,只是权重不同,这也是为了处理的方便。

打个比方,下雨天的池塘,每一个雨滴都会引起一个涟漪,这就相当于一个热点,位置不同,雨滴的大小速度质量等并不完全一样,因此具有不同的权重,但在水面上,相互影响,形成了很多不同的形状,而水波的密集度可以用渐变来体现。这样,我们则把每一个个离散点,通过一个缓冲区,转变为连续的面,进而对其进行可视化展现。

当然,在数据上需要多提一点,实际中,因为热点数据量非常大,所以在不同级别下的数据会有优化,比如全国范围内(大)的数据比较粗略(小),而区域范围内(小)数据精细(大)。这里面有一个抽稀和聚类的处理(个人感觉应该是这个思路),这是数据处理层面的问题,我们下面还是专注可视化方面的问题。

实现

这些代码都比较简单,如果你对canvas有一定基础,相信也能明白,主要是看思路。首先就是对所有点进行一次筛选和统计,只保留屏幕范围内的热点,并根据权重获取当前最大和最小权重。这样我们获取了一个[minWeight,maxWeight]以及所有需要处理的drawPoints数组,为下面的渲染准备好数据。

渲染的过程其实就是对每一个热点权重范围内的点进行颜色的更新,颜色包括两个部分:RGB和Alpha。而渲染过程也分为两个过程:权重的计算和权重对应的颜色(RGB + Alpha)。

首先,权重的计算是一个插值的过程,根据权重值和范围值(距离热点的距离)的算法,你可以根据具体的需要选择合适的算法,而计算主要有两种情况,当前点还没有任何权重值;累加当前点的权重值。点越密,累加后的权重值就越高,则可以用权重值高的风格(红色)突出。其次就是根据权重值获取对应的颜色,这里会有一个颜色表,根据不同的权重值,采用具体的差值算法获取对应的颜色。

这样则完成了热点图的渲染,这里需要注意的是,两个for循环是对热点的行列的遍历,本身是一个矩阵范围,而热点本身的范围应该是一个圆,因此在for循环中需要判断是否在圆内。最终效果如下图:

优化

如上就是热点图的原理和实现,基本上实现都大同小异。不知道你看出来有什么问题了没有?性能!

这个实现有一个特点,假设有N个热点,权重假设是(0,1)之间的平均值0.5,半径假设为R(像素单位),那一共要有N * 0.5 * R * R * 4(4个象限),这个计算量是惊人的,和N以及R的平方是线性增长。另外一个特点,在for循环中的规则都是一致的。

这就让我们想到,如何能够进行优化,答案就是批次和模板。在开始前,我们先说两个技术点。

Canvas渐变填充

如上是伪代码,最终是在canvas上绘制了一个圆,但本身是从黑到白的渐变,同时阴影在x轴上偏移d个像素,这样,该代码生成了如下一张图片,我们称它为权重图,暂时不解释,只需要明白这段代码生成该图的过程即可。

Canvas色带

这里主要有两个函数:

  • createLinearGradient()创建线性的渐变对象
  • addColorStop() 方法规定不同的颜色,以及在 gradient对象中的何处定位颜色

这样,我们便创建了一个色带,就是如上这样一个效果,当然我们也可以根据自己的需要,定义一个彩色色带,就想我们平时所见的调色板中的颜色色带一样。这里比较宽,主要是给大家看一下效果,真正程序中,宽度只需要一个像素就可以。

实例化

不知道大家这时候是否发现了里面的原理和巧妙之处?

打个比方,我一直想买一个印章,这样每次买书的时候,就不用自己一笔一划的来写了,字写得比人还丑,这可以理解(不过最后还是没买,因为最后连书也买不起了)。假如我有了印章,这样每次就不用自己写了,直接盖章多省事啊,而且还一模一样。

这里,假设这个章是圆形的,它就是一个模板,对应的就是创建好的渐变填充的纹理。以前我们需要对热点缓冲区内的所有点都进行计算,计算出权重值,现在只需要以该热点为圆心盖一下,则把该热点范围内所有点的权重值都写上去了。

于是,逐个把所有热点都盖章,这样权重值不是都有了嘛,啪啪啪的声音就是爽。但这有一个问题,热点之间的相互影响怎么处理?这是需要叠加效果的,而不是后盖的章覆盖前者的效果。这里在盖章的时候增加一个透明度的属性,谁的权重大,谁的透明度就小,这样就可以叠加效果了,之前写的风向图的轨迹也是这个思路,还记得吗?下面是逐次盖章(贴图)的代码实现,大家过一遍,都是一个思路。

这样之后,我们就有了一个“热力图”了,不过略有遗憾,因为它是黑白相机拍出来的,都是0~255的灰度值,也就是权重信息。这样,我们就需要根据之前创建的色带来对它进行上色的过程了

可见,通过模板,我们可以极大的减少计算量,渲染也是批次的,而不是逐点赋值。这样我们可以根据不同的算法来创建对应的模板,实现不同的热点风格。下面是百度热力图采用这个方式实现的思路。

百度热力图&总结

不知不觉又写了这么多,就压缩一下篇幅吧。如下,是百度热力图八小时的请求队列,从v的属性可以看出来是小时单位,而xyz和地图行列号一致。如果想要叠加百度热力图的,就可以按照这个思路来加载热力图层了。

总体来说,个人觉得有两点收获:1功能的实现不是完结,而是开始,方能深入掌握其中,就好比一锅汤,精华都在下面,沉得住寂寞,肯定有所收获。2热力图的技术点都不难,一看便知,但不看还真不知道,这些技术点看起来没关系,但结合好了性能的提升非常明显。所以,见的多了经验就多。

今天圣诞节了,每年圣诞节我都会买一本书,然后写上”Merry Christmas to me”,然后送给自己,能看到这的人也都是真爱,再唠叨几句吧:昨天听了一个deliberate practice的概念,讲的是同等时间下,业余爱好者喜欢不断练习自己熟悉的动作,而专业选手则会专注在自己不熟悉但有机会掌握的动作,这一块在心理学中成为panic zone,属于你知道,但不精通的部分。个人觉得收获很大,如何更好的发挥时间价值,这也是我,作为一个老人家需要调整的地方。

原文发布于微信公众号 - LET(LET0-0)

原文发表时间:2015-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员叨叨叨

3.1 Shader Language 原理第 3 章 Shader Language

In the last year I have never had to write a single HLSL/GLSL shader. Bottom lin...

743
来自专栏AI科技大本营的专栏

AI 技术讲座精选:数学不好,也可以学习人工智能(七)——自然语言处理的奇妙神奇之处

机器都能做到吗? 我现在是任由自动化左右吗? 未来AI会让作家失业吗? 请阅读本文。 编译 | AI100 在本系列的第五部分中发现了卷积神经网络...

3349
来自专栏LhWorld哥陪你聊算法

【自然语言处理篇】--以NLTK为基础讲解自然语⾔处理的原理和基础知识

Python上著名的⾃然语⾔处理库⾃带语料库,词性分类库⾃带分类,分词,等等功能强⼤的社区⽀持,还有N多的简单版wrapper。

1402
来自专栏游戏杂谈

3D引擎为什么使用三角形绘制曲面

这个问题是我第一次接触3D开发就有的疑问,最近在看《游戏引擎架构》(Game Engine Architecture),在书中找到了答案。

1273
来自专栏AI科技评论

韩家炜在数据挖掘上开辟的「小路」是什么

AI 科技评论按:前些日子,数据挖掘领域的巨擘韩家炜教授 [1] 在中国计算机学会(CCF)主办的第 87 期 CCF 学科前沿讲习班(CCF Advanced...

4938
来自专栏斑斓

统计学中的相关性分析

掌握一点儿统计学介绍了统计学中常用到的函数,特别重点介绍了Standard Deviation(标准差)。接下来结合一个案例来谈谈相关性(Correlation...

3467
来自专栏量化投资与机器学习

【年度系列】股市风起云涌,我用Python分析周期之道

股票市场周期是股票市场长期的价格模式,通常与商业周期有关。 它是技术分析的关键,其中投资方法基于周期或重复的价格模式。 如果我们对股市周期有了更好的理解,我们总...

1432
来自专栏数据科学与人工智能

【Python环境】python的数据科学资源

python和R是数据科学家手中两种最常用的工具,R已经介绍的太多了,后续我们来玩玩python吧。从出身来看,R是统计学家写的,python是计算机科学家写的...

2226
来自专栏Code_iOS

OpenGL ES 2.0 (iOS) 笔记大纲

这里包含了所有,我已经学习或者将要学习的 OpenGL ES 2 内容,所以它是笔记,描述的是学习心得,不是一本教科书。

1052
来自专栏PPV课数据科学社区

【黑科技】数据分析师的秘密-QQ聊天记录分析(三)

? 上两篇分析了群的活跃状况,成员活跃状况,以及一些文本的分析,包括词云,聊天关键字, 实体识别,情感分析等等,这篇只围绕一个问题来,那就是提取谈话内容的问题...

3115

扫码关注云+社区