随着互联网对各行各业的影响越来越深，数据规模越来越大，企业越来越重视到数据的价值。作为一家专业的数据智能公司，个推起步于消息推送服务。经过多年的不断努力，积累了大量的数据，也在数据可视化领域进行了深入的探索和实践。格推的数据可视化探索与应用以需求为导向，从开源平台到结合个性化需求定制化开发，打造格推实时消息推送图、人群分布热力图等优秀的数据可视化作品。在这个过程中，格推积累了大量的数据可视化组件，打磨了自身的数据可视化技术能力。其中，个推热图正在应用于智慧城市、人口空间规划、公共服务等领域，为其提供强大的数据支持。在这篇文章中，我想和大家分享一下数据可视化的实践、遇到的问题和解决方法，希望你能从中受益。1.数据可视化的构成数据可视化由四种视觉元素组成：背景信息、尺度、坐标系和视觉提示。1.1背景信息背景信息是指标题、计量单位、注释等附加信息。主要目的是帮助大屏幕观众更好地理解相关背景信息，即5W信息：who（谁）、what（什么）、when（何时）、where（哪里）、why（为什么）。1.2比例尺比例尺主要用于衡量数据在不同方向和维度上的大小。常用的有数字标尺、分类标尺、时间标尺等，类似于我们熟悉的标尺。1.3坐标系坐标系具有结构化的空间，有规定图形和颜色在何处绘制的规则。编码数据时，对象被放置在空间中的特定位置，它给出了X和Y坐标或意义上的经纬度。常用的坐标系有直角坐标系、极坐标系和地理坐标系。饼图采用极坐标系；直方图中使用X轴和Y轴，为直角坐标系；地理坐标系用于热图中。1.4视觉线索视觉线索是用于编码数据的元素，例如位置、长度、大小、方向等。1985年，贝尔实验室发布了一个暗示性的视觉元素排序列表。如列表所示，从上到下，大脑感知系统对这些符号和位置感知的敏感度不同，从高到低依次为：位置、长度、角度、方向、形状、面积/体积、色调和饱和度。2、数据可视化的应用根据不同的数据结构类型，数据可视化的应用也不同。常用的有统计数据图表、关系数据图表和地理空间数据图表。2.1统计数据图表常用的统计数据图表有折线图、直方图、饼图、雷达图等。其中，折线图中的视觉元素是方向，我们从中感知变化的趋势；直方图中的视觉元素是长度，从中我们感知数据所代表的值的大小；而饼图和雷达图的视觉元素分别是角度和面积。2.2关系数据图常用的关系数据图包括关系图、流程图、树形图和桑基图。关系数据图最重要的是关系。从渲染的角度来看，关系图有两个最重要的难点：布局和聚类。布局是指如何分配要显示的数据。关系图、流程图、树状图等都是不同的布局；聚类是模拟和可视化真实的关系，例如，哪些实体属于同一类别，彼此之间比较接近，或者具有从属关系等。2.3地理空间数据图表地理空间数据可视化图表包括散点图，路径图，热力图地图、分布图等。地理空间数据图表的特点是基于地理坐标系。目前业界对地理空间数据可视化的研究较多，如高德地图的Loca、Uber推出的kepler.gl、mapbox等，都是地理空间数据可视化的优秀应用案例。除了以上四种常用的数据可视化图表外，其实还有很多其他类型的图表，比如词云图、时间序列数据图表等，这里不再赘述。3.地图的基本原理在地理空间数据可视化实践中，地图的绘制是非常重要的一步。上图清楚地展示了地图渲染的步骤：首先，通过墨卡托投影将地球变成平面地图；然后，将平面地图根据实际场景划分成不同精??度的图层，排列成金字塔形；最后，拼凑这张地图的细节被分成地图图块。地图绘制涉及到两个重要的术语：地图投影和地图瓦片。下面对这两个术语进行详细解释：3.1地图投影根据投影形式的不同，地图投影有圆锥投影、圆柱投影和方位投影。;根据投影方向的位置，可分为正轴投影、横轴投影、斜轴投影三种。这里要说的是因为投影的关系，无法准确还原地图。投影展开后，平面图肯定会有变形。根据变形可分为等角投影、等面积投影和任意投影。根据不同的地图使用场景，需要选择不同的投影算法。现在很多投影算法都是现成的，不需要手动写。其中等距柱状投影是比较常用的一种，其中墨卡托投影是现在地图厂商使用较多的一种地图投影算法。3.2地图瓦片经Web墨卡托投影后，地图变为平面地图。因为有时候我们需要看宏观的地图信息（比如世界地图上各个国家的边界??），有时候我们需要看非常微观的地图信息（比如导航时的路况信息）。为此，我们需要对这张地图进行分类。在最高级别（zoom=0），需要的信息最少，只需要保留最重要的宏观信息，所以可以用256x256像素的图像来表示；在下一级（zoom=1），信息量增加，表示一张512x512像素的图片；以此类推，层级越低，像素越高，下一层的像素是当前层的4倍。这样就形成了一个从最高层到最低层的金字塔坐标系。对于每张图片，我们将其分成256x256张图片，这些图片就变成了瓦片（Tile）。这样，在最高层（zoom=0），只有一个tile；在下一级（缩放=1），有4个图块；在下一层（zoom=2），有16个tile，以此类推。4.格推数据可视化实践格推的数据可视化构建包括分布图、热力图等1）Getweet消息分布图实时展示格推当天累计发布的消息数和应用分发人群画像（含性别）占比、年龄段分布、当日申请分布前5城市等）。2）格推区域人口热力图呈现了区域人口分布、人口性别比、人口年龄段等数据可视化，下面我们以下一篇文章和热力图为例，分析一下下一篇的数据可视化实践过程推。4.1初步技术选择从效率和经济性的角度出发，我们首先考察了现有的解决方案是否能够满足需求。方案一：地图应用前面提到，地图是以地图瓦片的形式呈现的，地图应用达不到设计稿中的效果，所以这个方案是不可行的。方案二：图表应用ECharts这样的综合图表库，基本可以实现一些地图效果，并且可以切换视角，配置简单；但是ECharts中线的效果非常有限，无法实现设计稿中想要的渐变和落地效果，只能无奈放弃。方案三：D3.jsD3.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第四步：飞线层的实现飞线层的实现分为曲线、动画、光效三个部分。关于飞线层的具体实现，可以点击查看：数据可视化下发布图片的实践，限于篇幅，这里不再赘述。五、遇到的问题在进行数据可视化实践的过程中，我也遇到了一些问题。这里主要跟大家分享两个问题：跨层级热力图的渲染卡顿问题和样式变形后数据层对应的问题。问题一：跨层热图的渲染卡顿问题由于热图本身的数据量非常大，当发生视图层级交叉时，数据量级会呈指数级增长，对性能是一个很大的考验，而最终的数据可视化会呈现效果会有卡顿的问题。为了解决这个问题，我们做了几个步骤的优化：请求优化：首先，我们把请求分成6块，按照可见窗口切，类似于图片的懒加载。缓存和防抖：然后就是缓存和防抖。我们缓存转换后的热图数据，并对频繁操作进行防抖，避免请求阻塞。数据聚合：最后，我们还聚合了获得的数据。热力图本身就是一个数据融合的过程，那么我们有必要再做一次聚合吗？事实证明，我们做了这个聚合之后，对于数据量大或者层次太深的热图确实有效。其中，对于数据聚合，我们研究了四种方案：Kmeans、网格法、距离法和网格距离法。Kmeans：先随机选取n个簇质心点，然后遍历每个点到每个簇的距离并分类，然后不断迭代分类。但是这种方案不适用于热图，更适合关系图。网格法：网格法比较简单。网格法就是把屏幕中的各个区域画成一个网格，看这个网格里有哪些数据，把点聚合到网格的中心。将比较各个点的偏差。大的。距离法：距离法是对每个点进行迭代，并设置该点周围的方块碰撞。如果它们相交，则该点被聚合成聚合点，所以每次聚合的结果都是不同的。格距法：还有一种格距法，顾名思义，就是前面两种方法的结合。先迭代网格计算出网格的质心，然后再次迭代聚合点，通过距离法再次计算质心。相对而言，网格距离法会比网格法和距离法花费更多的算法时间，但其结果会更准确。我们也通过这种方式让数据滞后的问题不那么明显。问题二：样式变形后数据层对应的问题第二个问题是样式变形后数据层对应的问题。因为在渲染地图的时候，我们使用了一个CSS变形来模拟透视效果。根据这个效果，我们渲染出来的效果如下图所示。因为热力图和贴图是平面效果，所以可以通过样式变形来模拟透视效果；但飞线和飞点是3D效果。想象一下，看烟花的时候，烟花正对着我们的视角是不是一条直线，成90度角的时候能不能看到飞线的角度。其实这正好印证了余弦定律，所以从仿真的角度来说，已经达到了这个效果，只要我们根据视角和余弦定律来转换曲线的曲率即可。但是这个方法不够准确，比如曲线的控制点会随着视角的转换而转换吗？我们再看一张图。我们之所以能在屏幕上模拟3D渲染，是因为眼睛会骗人。因此，只要画出来的图和我们实际看到的物体是一样的，我们就认为是3D的。在地图中，我们通过设置rotateX、rotateY、rotateZ三个参数，使用styledeformation来进行转换。可以看出，rotation其实就是一系列的三角函数变换。透视，即假设我们坐在屏幕前一定距离处，通过这个设置值，可以模拟CSS的样式变形。当然，透视的算法非常复杂，有单点透视、两点透视、散点透视等。这里我们简单地将模型映射到屏幕上。6.结论数据可视化以直观、极具视觉冲击力的方式向受众揭示数据背后隐藏的规律，传达数据的价值。在视觉效果的背后，格推数据可视化实践的核心依赖于自身海量数据的积累和数据智能技术的沉淀。目前，个推热力图正在应用于智慧城市、人口空间规划、公共服务等领域，为其提供强大的数据支持。未来，格推将继续探索数据智能技术在各垂直行业的应用，探索利用数据智能为行业带来智能化变革。
