你不知道的前端算法之热力图的实现

作者:TalkingData 李凤禄

本文为TalkingData原创,未经授权禁止转载。申请授权请在评论中留言联系!

inMap 是一款基于 canvas 的大数据可视化库,专注于大数据方向点线面的可视化效果展示。目前支持散点、围栏、热力、网格、聚合等方式;致力于让大数据可视化变得简单易用。

GitHub地址:https://github.com/TalkingData/inmap

热力图这个名字听起来很高大上,其实等同于我们常说的密度图:

如图表示,红色区域表示分析要素的密度大,而蓝色区域表示分析要素的密度小。只要点密集,就会形成聚类区域。 看到这么炫的效果,是不是自己也很想实现一把?接下来手把手实现一个热力(带你装逼带你飞、 哈哈),郑重声明:下面代码片段均来自 inMap。

准备数据

inMap 接收的是经纬度数据,需要把它映射到 canvas 的像素坐标,这就用到了墨卡托转换,墨卡托算法很复杂,以后我们会有单独的一篇文章来讲讲他的原理。经过转换,你得到的数据应该是这样的:

好了,我们得到转换后的像素坐标数据(x、y),就可以做下面的事情了。

创建 canvas 渐变填充

创建一个由黑到白的渐变圆

createRadialGradient() 创建线性的渐变对象

addColorStop() 定义一个渐变的颜色带

效果如图:

那么问题就来了,如果每个数据权重值 count 不一样,我们该如何表示呢?

设置 globalAlpha

根据不同的count值设置不同的Alpha,假设最大的count的Alpha等于1,最小的count的Alpha为0,那么我根据count求出Alpha。

然后代码如下:

效果跟上一个截图有很大区别,可以对比一下透明度的变化。

(这么黑乎乎的一团,跟热力差距好大啊)

重置 canvas 画布颜色

getImageData() 复制画布上指定矩形的像素数据

putImageData() 将图像数据放回画布:

getImageData()返回的数据格式如下:

返回的数据是一维数组,每四个元素表示一个像素(rgba)值。

实现热力原理:读取每个像素的alpha值(透明度),做一个颜色映射。

代码如下:

创建颜色映射,一个好的颜色映射决定最终效果。

inMap 创建一个长256px的调色面板:

inMap 默认颜色如下:

将gradient颜色设置到调色面板对象中:

返回调色面板的像素点数据:

创建出来的调色面板效果图如下:(看起来像一个渐变颜色条)

最终我们实现的热力图如下:

本文来自企鹅号 - TalkingData媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Flutter入门

偶遇FFmpeg(二)——常用命令

将输入的视频的帧,以左上角为坐标的原点,剪切成x,y坐标开始的指定大小。 语法:

3794
来自专栏coding for love

CSS进阶01-CSS视觉格式化

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

670
来自专栏大数据挖掘DT机器学习

很棒的R语言回归模型和方差模型

对于初学者,利用R语言自带的数据进行练习是不错的选择,下面这些模型便是最好的实例。 1、回归模型 回归模型利用自带的faithful数据来示例,faithful...

4818
来自专栏天天P图攻城狮

终端图像处理系列 - OpenGL混合模式的使用

OpenGL一次渲染过程包含了多个阶段,包括顶点着色器、图元组装、栅格化、片元着色器、测试和混合等,最后将结果输出的FrameBuffer上。

88814
来自专栏HTML5学堂

一步步教你弹性框架-上篇

HTML5学堂:本系列主要在于跟大家分享弹性运动框架的制作方式。弹性运动框架的运动方式类似于弹簧,有一种回弹的效果,在网站中的一些特效当中还是有一些应用的。实现...

3688
来自专栏非著名程序员

Android 自定义View高级特效,神奇的贝塞尔曲线

? (这就是贝塞尔曲线 ) 投稿作者:一口仨馍/csdn 原文链接: http://blog.csdn.net/qq_17250009/article/de...

5649
来自专栏逸鹏说道

水印新思路之~坑人于无形

有空可以研究一下。很多注重图片版权的公司完全可以设置这种无形水印,发现被人盗用,直接可以拿图告人,拿图找泄密者~ 本文通过一个的实验,简要介绍频域手段添加数字盲...

4274
来自专栏工科狗和生物喵

【机器视觉与图像处理】基于MATLAB+Hough的圆检测

本次文章,没有太多好写的,就是最近做的一个机器视觉的课程设计作业,是要做一个流水线的生产线建模以及对于产品的检测识别,我个人承包了圆心半径检测的内容,熬了好几天...

3081
来自专栏算法+

自动曝光修复算法 附完整C代码

AF自动对焦(Automatic Focus) 自动对焦即调节摄像头焦距自动得到清晰的图像的过程

5634
来自专栏MixLab科技+设计实验室

人工智能设计师之智能排版的另一种实现方式

Flipboard的自动排版系统Duplo 最近在整理算法驱动设计的案例,翻到Flipboard的自动排版系统,再次研究了下,把相关的技术思路整理了下: Fli...

3977

扫码关注云+社区

领取腾讯云代金券