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

作者: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 条评论
登录 后参与评论

相关文章

来自专栏机器学习原理

我的机器学习matplotlib篇导入画出第一个图形颜色,标记,线型刻度、标题、标签和图例!创建子图

前言: matplotlib是python最常用的绘图库,能帮你画出美丽的各种图 导入 包含了中文显示,屏外显示 import matplotlib.p...

3726
来自专栏葬爱家族

Android高级动画(2)

前面一篇文章已经讲了Android中大部分的动画框架,回顾一下有:Tween动画,属性动画,帧动画,CircularReveal,Activity转场动画,5....

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

用R解析Mahout用户推荐协同过滤算法(UserCF)

作者: 张丹(Conan), 程序员Java,R,PHP,Javascript http://blog.fens.me 前言 用R全面解析Mahout的基于用...

30312
来自专栏Young Dreamer

针对iPhone的pt、Android的dp、HTML的css像素与dpr、设计尺寸和物理像素的浅分析

  最近被一朋友问到:css中设置一DOM的height:65px,请问显示的高度是否和Android的65dp的元素等高?脑子里瞬间闪现了一堆的概念,如dpr...

1895
来自专栏Android常用基础

自定义View(一)-动画- XML生成View动画

感觉好久没有写博客了。首先因为最近比较忙,有在学习即时通讯相关的开源项目,好不容易忙完了。有点时间就抓紧写博客。之前学习的开源项目百篮应用已经获得360+sta...

761
来自专栏前端新视界

使用 canvas 画图时图像文字模糊的解决办法

最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率绘制不同尺寸的画布。以下是创建高分辨率画布的代码:

632
来自专栏ytkah

excel同时冻结首行和首列怎么操作

  之前ytkah只知道excel可以冻结首行或首列,但还不清楚如何同时冻结excel首行和首列,后面看到小C的报表,问了他才明白怎么操作。   首先,我们先把...

2955
来自专栏LeoXu的博客

借助 iText 用代码在 PDF 中创建空白签名域

612
来自专栏前端知识分享

第119天:移动端:CSS像素、屏幕像素和视口的关系

移动前端中常说的 viewport (视口)就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip ( device-independent pixe...

755
来自专栏Android-薛之涛

Android 软键盘遮挡解决

        链接:https://www.jianshu.com/p/9eb57a8ff5e5

864

扫码关注云+社区