个推数据可视化之人群热力图、消息下发图前端开发实践

随着互联网在各行各业的影响不断深刻，数据规模愈来愈大，各企业也愈来愈重视数据的价值。做为一家专业的数据智能公司，个推从消息推送服务起家，通过多年的持续耕耘，积累沉淀了海量数据，在数据可视化领域也开展了深刻的探索和实践。

个推的数据可视化探索和应用由需求出发，从基于开源平台到结合个性化需求进行定制化开发，打造出个推实时消息推送下发图，人群分布热力图等优秀数据可视化做品。这一过程当中，个推积累沉淀了大量的数据可视化组件，打磨了本身的数据可视化技术能力。其中，个推热力图正应用在智慧城市、人口空间规划、公共服务等领域，为其提供强大的数据支撑。

个推消息下发图

 

个推打造的湖滨商圈区域人口热力图

 

本文就和你们分享一下个推的数据可视化实践、遇到的问题及解决思路，但愿你们能从中有所受益。

1、数据可视化的构成

数据可视化由四类可视化元素构成：背景信息、标尺、坐标系、视觉暗示。

1.1 背景信息

背景信息就是标题、度量单位、注释等附加类的信息。主要是为了帮助大屏受众更好地理解相关背景信息，即5W信息：何人（who）、何事（what）、什么时候（when）、何地（where）、为什么（why）。

1.2 标尺

标尺主要用来衡量不一样方向和维度上的数据大小，经常使用的有数字标尺、分类标尺、时间标尺等，相似咱们熟悉的刻度。

1.3 坐标系

坐标系有一个结构化的空间，还有指定图形和颜色画在哪里的规则，用于编码数据的时候，将物体放到该空间中的某一特定位置，它赋予X、Y坐标或经纬度以意义。常见的坐标系有直角坐标系、极坐标系、地理坐标系。饼图里面用的是极坐标系；柱状图里面有X轴、Y轴，就是直角坐标系；热力图里面用的则是地理坐标图。

1.4 视觉暗示

视觉暗示则是用来编码数据的元素，如位置、长度、大小、方向等。1985年，贝尔实验室发布了视觉元素的暗示排序清单。如清单所示，从上往下，大脑感知系统对这些符号、位置感知有不一样的敏感程度，从最高到最低依次是：位置、长度、角度、方向、形状、面积/体积、色相与饱和度。

贝尔实验室于1985年发布的视觉元素暗示排序清单

 

2、数据可视化的应用

根据不一样的数据结构类型，数据可视化的应用也不一样，经常使用的有统计数据图表、关系数据图表、地理空间数据图表。

2.1 统计数据图表

经常使用的统计数据图表有线形图、柱状图、饼图、雷达图。其中，线形图中的视觉元素为方向，咱们从中感知到的是变化趋势；柱状图中的视觉元素为长度，咱们从中感知到的是数据所表明的值的大小；而饼图和雷达图中的视觉元素则分别是角度和面积。

2.2 关系数据图表

经常使用的关系数据图表有关系图、流程图、树图和桑基图。关系数据图表最重要的就是关系。从渲染层面来讲，关系图存在两个最重要的难点：布局和聚类。布局意即如何分布要展示的数据，关系图、流程图、树图等，都只是布局不一样；聚类则是要将真实的关系进行聚类模拟和可视化呈现出来，好比，哪些实体属于同一类别、相距比较近、或有从属关系等。

2.3 地理空间数据图表

地理空间数据可视化图表有散点图、路径图、热力图、下发图等。地理空间数据图表的特色就是基于地理坐标系。

如今业内对地理空间数据可视化的研究很是多，像高德地图的Loca、Uber联合mapbox推出的kepler.gl等，都是很是优秀的地理空间数据可视化应用案例。

 

英国某城市间工做跟住宅的通勤地图 运用了方向和颜色的视觉暗示

 

kepler.gl中展现的某城市地震密度图 运用了位置、时间和颜色的视觉暗示

 

除以上四种经常使用的数据可视化图表以外，其实还有不少其余类型的图表，像词云图、时间序列数据图等，这里就再也不一一赘述。

3、地图的基本原理

在对地理空间数据进行可视化的实践中，对地图的渲染是很是重要的一步。

 

地图渲染步骤

 

上面这张图清晰地呈现了地图渲染的步骤：

· 首先，将地球经过墨卡托投影变成平面地图；

· 而后，将平面地图根据现实场景，分红一层层不一样精度的地图，排列成为一个金字塔状；

· 最终，将拼凑起这张地图的细节分割成为一张张地图瓦片。

地图渲染涉及到两个重要名词：地图投影和地图瓦片，下面对这两个名词进行了详细解释：

 

3.1 地图投影

按照投影形式的不一样，地图投影有圆锥投影、圆柱投影、方位投影三种；根据投影方向的位置又能够分为正轴投影、横轴投影、斜轴投影三种。这里要说的是，由于投影，地图就不可能被精准还原，投影展开后的平面地图确定会有一个变形，根据变形又能够分为等角投影、等面积投影、任意投影等。

根据不一样的地图使用场景，须要选择不一样的投影算法，如今不少投影算法都是现成的，不须要本身手动写。其中，等角投影是用得比较广泛的一种，其中的墨卡托投影，则是如今地图厂商使用较多的一种地图投影算法。

 

不一样的地图投影方式

 

3.2 地图瓦片

通过Web墨卡托投影后，地图就变为平面的一张地图。由于有时候咱们须要看宏观的地图信息（如世界地图里每一个国家的国界），有时候又要看很微观的地图信息（如导航时道路的路况信息）。为此，咱们须要对这张地图进行等级切分。

地图瓦片的金字塔坐标体系

 

在最高级（zoom=0），须要的信息最少，只需保留最重要的宏观信息，所以用一张256x256像素的图片表示便可；在下一级（zoom=1），信息量变多，用一张512x512像素的图片表示；以此类推，级别越低的像素越高，下一级的像素是当前级的4倍。这样，从最高层级往下到最低层级就造成了一个金字塔坐标体系。

对每张图片，咱们将其切分为256x256的图片，成为瓦片（Tile）。这样，在最高级（zoom=0）时，只有一个瓦片；在下一级（zoom=1）时，有4个瓦片；在下一级（zoom=2）时，有16个瓦片，以此类推。

4、个推数据可视化实践

个推的数据可视化建设有下发图、热力图等。

1) 个推消息下发图 实时展示了个推当天累计消息下发量、应用下发群体画像（包括性别比例、年龄段分布、当日应用下发城市Top5等）。

个推消息下发图

 

2) 个推区域人口热力图 则对区域人口分布、人口性别比例、人口年龄段等进行了数据可视化呈现。

个推打造的湖滨商圈区域人口热力图

 

接下来，就如下发图和热力图为例，来为你们剖析下个推的数据可视化实践过程。

4.1 前期技术选型

从效率和经济角度考虑，咱们首先调研了一下现成的方案是否能知足需求。

方案一：地图应用
前面讲过，地图是以地图瓦片的形式渲染出来的，地图应用不能实现设计稿中的效果，因此该方案不可行。

方案二：图表应用
ECharts这类综合的图表库，能基本实现一些地图的效果，而且能切换视角，配置简单；但ECharts中线的效果很是有限，达不到设计稿中想要的渐变以及落地效果，也只能被忍痛放弃。

方案三：D3.js
D3.js很是优秀，咱们称它是图表界的jQuery，基本能实现咱们想要的效果。可是，它也存在一个问题，即它是使用SVG的。SVG是一种矢量图格式，能够保护图片呈现时不失真，可是若是用来实现动画效果，则存在性能问题。

这里，咱们将SVG和Canvas进行了性能对比：当飞行数量达到100时，SVG的动画帧数FPS只有12-43，CPU占用很高；Canvas则好不少，基本上是42-60FPS，CPU占用率是20%-30%，在内存占用等各方面都完胜。

飞行数量达100时SVG和Canvas性能对比

 

综合来看，以上三种方案都不完美。因此，最终，咱们决定用本身的方式来实现。

4.2 第一步：分层

首先，以下图，在对地理数据进行渲染以前，咱们先根据数据类型进行了分层：

1) 地图底层；

2) 热力图层；

3) 飞线层；

4) 其余任何地理空间数据层，好比柱状图、交通图等。

根据数据类型进行分层

 

4.3 第二步：地图底层的实现

1) 数据&配置：从阿里云DataV拿到中国地图的数据，再经过墨卡托投影算法获得转换后的数据。

2) Canvas渲染：把数据渲染到Canvas上，这里用的是D3.js的墨卡托转换函数，再用.context方法渲染到Canvas上。

3) 调整效果：渲染完地图后，调整效果，好比阴影、边框、变形等。

4.4 第三步：热力图的实现

热力图以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区域。

热力图有两个重要的参数：Max（阈值）和Radius（半径）。

· Max：即阈值，就是刚才讲到的标尺，告诉咱们某个颜色段的含义。这张图里面0表示透明度值最低，颜色最浅；而后100则表示透明度值为1，颜色最深。

· Radius：即半径，表明数据的有效范围和影响力。

而热力图的具体实现过程，你们可参考个推以前推送的一篇文章：数据可视化：浅谈热力图如何在前端实现。

 

4.5 第四步：飞线层的实现

分线层的实现能够拆开为曲线、动画、光效三部分。

关于飞线层的具体实现，你们能够点击查看：数据可视化之下发图实践，篇幅有限，这里就再也不重复叙述啦。

5、遇到的问题

个推在开展数据可视化实践的过程当中，也遇到了一些问题。这里主要和你们分享两个问题：跨级别热力图的渲染卡顿问题和样式变形后数据图层的对应问题。

问题1：跨级别热力图的渲染卡顿问题

因为热力图的数据自己很大，当发生视图级别跨越的时候，数据量级成倍增加，这对性能是一个很大的考验，最终数据可视化呈现的效果会有卡顿的问题存在。

为了解决该问题，咱们作了几步优化：

• 请求优化：首先咱们将请求分红了6块，根据可视窗口进行切割，相似图片的懒加载。
• 缓存、防抖：而后是缓存和防抖，咱们将转换过的热力图数据缓存了下来，对频繁操做进行了防抖，以免请求堵塞。
• 数据聚合：最后，咱们还对拿到的数据作了聚合处理。热力图自己就是一个数据融合的过程，那么，咱们是否有必要再去作一个聚合？事实证实，咱们作了这个聚合以后，对于数据量大或者级别过深的热力图，确实是有效果的。

其中，对于数据聚合，咱们研究了四种方案：Kmeans、网格法、距离法、网格距离法。

• Kmeans：首先随机选取n个聚类质心点，而后遍历每一个点到每一个聚类的距离并归类，再不断地迭代再归类。但这个方案对于热力图是不适用的，更适合关系图。
• 网格法：网格法比较简单，网格法是把屏幕里面的每一个区域画成一个个格子，看哪一个数据在这个格子里面，把点聚合到格子的中心，有个别点的误差会比较大。
• 距离法：距离法是经过迭代每个点、设置点的外包正方形去碰撞，若相交，则把该点聚合到该聚合点中，因此每次聚合的结果都不同。
• 网格距离法：还有一个是网格距离法，顾名思义，就是前面两个方法的结合。首先迭代格子，算出网格质心，再次迭代聚合后的点，经过距离法再算一次质心。相对来说，网格距离法会比网格法和距离法，在算法时间上多一点，可是它的结果会更准确一点。咱们也正是使用该方法，使数据卡顿的问题不那么明显。

问题2：样式变形后数据图层的对应问题

第二个问题是样式变形后数据图层的对应问题。

由于对地图进行渲染的时候，咱们用了一个CSS变形，模拟了一个透视效果，根据这个效果，咱们渲染出来的效果以下图。

热力图和地图由于是平面效果，能够用样式变形来模拟透视效果；但是飞线和点，倒是3D的效果。想象下，看烟花的时候，烟花正对咱们视角的时候是否是一条直线，而呈90度角的时候，是否是正好能够看到飞线角度。

这其实正好印证了余弦定律，因此从模拟的角度来说，这个效果已经达到了，只要咱们把曲线的曲率根据视角的角度配合余弦定律转换一下。

可是这样的办法不够准确，好比曲线的控制点会不会随视角的转换而转换？

再来看一张图，咱们之因此能模拟3D的效果渲染在屏幕上，是由于眼睛会骗人。因此，只要画出一张图跟实际看到的物体同样，咱们就认为是3D的。

在地图中，咱们则用样式变形，经过设置rotate X、rotate Y、rotate Z等三个参数进行转换，能够看出，旋转其实就是一系列的三角函数变换。

Perspective，即假定咱们坐在屏幕前面的距离必定，有了这个设定的值，就能模拟出CSS的样式变形。

固然，透视的算法很是复杂，有单点透视、两点透视以及散点透视等。这里咱们只是简单地把模型映射到屏幕。

6、结语

数据可视化以直观、高度视觉冲击力的方式向受众揭示数据背后隐藏的规律，传达数据价值。视觉效果的背后，个推数据可视化实践的核心依托于自身海量数据的积累和数据智能技术的沉淀。

目前，个推热力图正应用于智慧城市、人口空间规划、公共服务等领域，为其提供强大的数据支撑。将来，个推还将持续探索将数据智能的技术应用到各垂直行业中，探索用数据智能带来产业智变。