云图和热力图的绘制算法

云图和热力图是很像的两种图,它们的区别在于,云图的数据源要求图的每一个区域都有数值,而热力图是在图上的某些离散点有数值。事实上,云图可以看作是高密度的热力图。

云图

在开始绘制云图之前,我们先来研究云图的数据源。假设我们现在要绘制以下数据的云图:

云图和热力图的绘制算法_第1张图片

 这是一张5*4的表格,可能我们要绘制的云图是500*400这个大小。我们很容易会想到这样一种绘制方法:

(1)表格的一个格子代表一个像素,数值代表一种颜色,如下图所示:

云图和热力图的绘制算法_第2张图片

(2)把这张5*4的图片放大100倍,得到500*400的云图。

这种方法似乎行得通,事实也行得通。关键在于在放大的时候,我们采用怎样的算法。由原来的5*4=20个数,扩大到500*400=200000个数,中间缺少的数,我们需要使用插值。常用的插值算法有三种,分别是最邻近插值、双线性插值和双三次插值。

使用最邻近插值算法的结果:

云图和热力图的绘制算法_第3张图片

显然这不能叫做云图。

使用双线性插值算法的结果:

云图和热力图的绘制算法_第4张图片

 双线性插值只考虑目标点周围的四个点。这图看起来已经差不多了,但能看出图中有些十字架。这是数据源太小引起的。

使用双三次插值算法的结果:

云图和热力图的绘制算法_第5张图片

可以看出,这个云图效果已经很不错了。双三次插值考虑了目标点周围的16个点,所以会更加圆滑。

热力图

 同样的,我们先看热图的数据源。热力图的数据源可能如下表所示:

云图和热力图的绘制算法_第6张图片

可以看出,有值的数据是离散且稀疏的。 热力图是以一个点为中心,离点越近颜色越深(红),离点越远颜色越浅(蓝),而且超过一定半径之后,颜色就没有了。要得到热力图,算法其实也是很简单的:

(1)初始化一个跟背景同等规模的矩阵,例如是800*600,初值为0。

(2)规一化数据源的行和列,例如上表中的数据3,可表示为(0.8,0.667,3)。

(3)将数据源的行和列,转到目标图的行列尺寸,上表中的数据3,表示为(800*0.8,600*0.667,3)=(640,400,3)

(4)计算每个像素点到数据点的距离,大于半径直接为0,小于关系的,计算一个跟距离反比的数值。

(5)累计所有到数据点的数值,作为一个像素点的数值。

上述的矩阵计算完成之后, 再配上颜色,就得到热力图了:

云图和热力图的绘制算法_第7张图片

 

你可能感兴趣的:(算法,云图,热力图,算法,插值算法)