With the impact of the Internet in all walks of life continued to deepen, more and more large-scale data, businesses increasingly appreciate the value of the data. As a professional data intelligence company, a push from the message push service started, after years of sustained work, accumulated precipitation of huge amounts of data, in the field of data visualization is also conducted in-depth exploration and practice.
Data visualization and its application in a push starting from needs, from customized development based on open-source platform to combine individual needs, to create a real-time push messaging push issued map, population distribution and other outstanding data heatmap visualization works. This process, a large number of push accumulated precipitation data visualization components, grinding their own data visualization technology capabilities. Among them, a push thermodynamic diagram being applied in the field of smart city, population spatial planning, public services, etc., to provide powerful data support.
FIG push message is sent at a
A push to create a regional population of lake district heat map
This article will share with you a push data visualization practice, problems encountered and solutions ideas, I hope you learn from it benefit.
First, the configuration data visualization
Data Visualization Visualization is constituted by four elements: background information, scale, coordinates, visual cues.
1.1 Background Information
Background information is the title, metric information additional classes of units, comments, etc. Mainly to help the audience better understand the big screen relevant background information, that is, 5W information: Who (who), what is going on (what), and when (when), where (where), why (why).
Ruler 1.2
The main scale used to measure the size of the data in different directions and dimensions, commonly used with digital gauge, classification scale, time scale, etc., similar to the familiar scale.
1.3 Coordinate System
Coordinate space of a structure, when the color and pattern as well as specify where to draw rules for encoding data, the object on a certain location in the space, it gives the X, Y coordinates in latitude and longitude, or significance. There are common coordinate system Cartesian coordinates, polar coordinates, the geographic coordinate system. Pie inside a polar coordinate system is used; histogram inside the X-axis, Y-axis, that is, a rectangular coordinate system; FIG heat is used inside the geographical coordinates of FIG.
1.4 visual cues
Elements of visual cues is used to encode data, such as location, length, size, direction and the like. In 1985, Bell Labs released a hint of sorting a list of visual elements. As shown in the list, from the top down, these symbols brain sensing system, sensing the position of different sensitivity, is from the highest to the lowest: position, length, angle, orientation, shape, area / volume, hue and saturation .
贝尔实验室于1985年发布的视觉元素暗示排序清单
二、数据可视化的应用
根据不同的数据结构类型，数据可视化的应用也不同，常用的有统计数据图表、关系数据图表、地理空间数据图表。
2.1 统计数据图表
常用的统计数据图表有线形图、柱状图、饼图、雷达图。其中，线形图中的视觉元素为方向，我们从中感知到的是变化趋势；柱状图中的视觉元素为长度，我们从中感知到的是数据所代表的值的大小；而饼图和雷达图中的视觉元素则分别是角度和面积。
2.2 关系数据图表
常用的关系数据图表有关系图、流程图、树图和桑基图。关系数据图表最重要的就是关系。从渲染层面来说，关系图存在两个最重要的难点：布局和聚类。布局意即如何分布要展现的数据，关系图、流程图、树图等，都只是布局不同；聚类则是要将真实的关系进行聚类模拟和可视化呈现出来，比如，哪些实体属于同一类别、相距比较近、或有从属关系等。
2.3 地理空间数据图表
地理空间数据可视化图表有散点图、路径图、热力图、下发图等。地理空间数据图表的特点就是基于地理坐标系。
现在业内对地理空间数据可视化的研究非常多，像高德地图的Loca、Uber联合mapbox推出的kepler.gl等，都是非常优秀的地理空间数据可视化应用案例。
英国某城市间工作跟住宅的通勤地图 运用了方向和颜色的视觉暗示
kepler.gl中展示的某城市地震密度图 运用了位置、时间和颜色的视觉暗示
除以上四种常用的数据可视化图表之外，其实还有很多其他类型的图表，像词云图、时间序列数据图等，这里就不再一一赘述。
三、地图的基本原理
在对地理空间数据进行可视化的实践中，对地图的渲染是非常重要的一步。
地图渲染步骤
上面这张图清晰地呈现了地图渲染的步骤：
· 首先，将地球通过墨卡托投影变成平面地图；
· 然后，将平面地图根据现实场景，分成一层层不同精度的地图，排列成为一个金字塔状；
· 最终，将拼凑起这张地图的细节分割成为一张张地图瓦片。
地图渲染涉及到两个重要名词：地图投影和地图瓦片，下面对这两个名词进行了详细解释：
3.1 地图投影
按照投影形式的不同，地图投影有圆锥投影、圆柱投影、方位投影三种；根据投影方向的位置又可以分为正轴投影、横轴投影、斜轴投影三种。这里要说的是，因为投影，地图就不可能被精准还原，投影展开后的平面地图肯定会有一个变形，根据变形又可以分为等角投影、等面积投影、任意投影等。
根据不同的地图使用场景，需要选择不同的投影算法，现在很多投影算法都是现成的，不需要自己手动写。其中，等角投影是用得比较普遍的一种，其中的墨卡托投影，则是现在地图厂商使用较多的一种地图投影算法。
不同的地图投影方式
3.2 地图瓦片
经过Web墨卡托投影后，地图就变为平面的一张地图。因为有时候我们需要看宏观的地图信息（如世界地图里每个国家的国界），有时候又要看很微观的地图信息（如导航时道路的路况信息）。为此，我们需要对这张地图进行等级切分。
地图瓦片的金字塔坐标体系
在最高级（zoom=0），需要的信息最少，只需保留最重要的宏观信息，因此用一张256x256像素的图片表示即可；在下一级（zoom=1），信息量变多，用一张512x512像素的图片表示；以此类推，级别越低的像素越高，下一级的像素是当前级的4倍。这样，从最高层级往下到最低层级就形成了一个金字塔坐标体系。
对每张图片，我们将其切分为256x256的图片，成为瓦片（Tile）。这样，在最高级（zoom=0）时，只有一个瓦片；在下一级（zoom=1）时，有4个瓦片；在下一级（zoom=2）时，有16个瓦片，以此类推。
四、个推数据可视化实践
个推的数据可视化建设有下发图、热力图等。
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 第四步：飞线层的实现
分线层的实现可以拆开为曲线、动画、光效三部分。
关于飞线层的具体实现，大家可以点击查看：数据可视化之下发图实践，篇幅有限，这里就不再重复叙述啦。
五、遇到的问题
个推在开展数据可视化实践的过程中，也遇到了一些问题。这里主要和大家分享两个问题：跨级别热力图的渲染卡顿问题和样式变形后数据图层的对应问题。
问题1：跨级别热力图的渲染卡顿问题
由于热力图的数据本身很大，当发生视图级别跨越的时候，数据量级成倍增长，这对性能是一个很大的考验，最终数据可视化呈现的效果会有卡顿的问题存在。
为了解决该问题，我们做了几步优化：
请求优化：首先我们将请求分成了6块，根据可视窗口进行切割，类似图片的懒加载。
缓存、防抖：然后是缓存和防抖，我们将转换过的热力图数据缓存了下来，对频繁操作进行了防抖，以避免请求堵塞。
数据聚合：最后，我们还对拿到的数据做了聚合处理。热力图本身就是一个数据融合的过程，那么，我们是否有必要再去做一个聚合？事实证明，我们做了这个聚合之后，对于数据量大或者级别过深的热力图，确实是有效果的。
其中，对于数据聚合，我们研究了四种方案：Kmeans、网格法、距离法、网格距离法。
Kmeans：首先随机选取n个聚类质心点，然后遍历每个点到每个聚类的距离并归类，再不断地迭代再归类。但这个方案对于热力图是不适用的，更适合关系图。
网格法：网格法比较简单，网格法是把屏幕里面的每个区域画成一个个格子，看哪个数据在这个格子里面，把点聚合到格子的中心，有个别点的偏差会比较大。
距离法：距离法是通过迭代每一个点、设置点的外包正方形去碰撞，若相交，则把该点聚合到该聚合点中，所以每次聚合的结果都不一样。
网格距离法：还有一个是网格距离法，顾名思义，就是前面两个方法的结合。首先迭代格子，算出网格质心，再次迭代聚合后的点，通过距离法再算一次质心。相对来讲，网格距离法会比网格法和距离法，在算法时间上多一点，但是它的结果会更准确一点。我们也正是使用该方法，使数据卡顿的问题不那么明显。
问题2：样式变形后数据图层的对应问题
第二个问题是样式变形后数据图层的对应问题。
因为对地图进行渲染的时候，我们用了一个CSS变形，模拟了一个透视效果，根据这个效果，我们渲染出来的效果如下图。
热力图和地图因为是平面效果，可以用样式变形来模拟透视效果；可是飞线和点，却是3D的效果。想象下，看烟花的时候，烟花正对我们视角的时候是不是一条直线，而呈90度角的时候，是不是正好可以看到飞线角度。
This fact confirms the cosine law, so from simulation point of view, this effect has been reached, as long as we curvature of the curve with the cosine law perspective conversion according to the angle of it.
But such an approach is not accurate enough, such as the control points of the curve will not change with the viewing angle conversion conversion?
Look at a map, we have been able to simulate the effect of 3D rendering on the screen, because the eyes can be deceiving. So, just draw a diagram like objects actually see, we are considered to be in 3D.
In the map, we use the modified style, by providing rotate X, rotate Y, rotate Z converts the three parameters, it can be seen, in fact, the rotational transform is a series of trigonometric functions.
Perspective, assuming the distance we must sit in front of the screen, with this value set, you can simulate the CSS style of deformation.
Of course, the algorithm is very complex perspective, a single point perspective, perspective, and two other points of perspective. Here we simply put the model to screen mapping.
VI Conclusion
Data visualization with an intuitive, highly visual impact of the way to reveal data hiding behind the law to the audience to convey the value of data. Behind the visual effects of precipitation, a push data visualization practice of relying on their own core mass data accumulation and data intelligence technology.
Currently, a push thermodynamic diagram being used in the field of smart city, population spatial planning, public services, etc., to provide powerful data support. The future will continue to explore a push application data intelligence technology to various vertical industries, to bring industry to explore the intellectual change data intelligence.