云图和热力图的绘制算法

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

云图

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

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

（1）表格的一个格子代表一个像素，数值代表一种颜色，如下图所示：

（2）把这张5*4的图片放大100倍，得到500*400的云图。

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

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

显然这不能叫做云图。

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

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

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

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

热力图

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

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

（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）累计所有到数据点的数值，作为一个像素点的数值。

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