数据可视化之下发图实践
作者:个推前端工程师 东风
随着互联网的快速发展,数据维度越来越广,呈现形式也越发丰富,具有多维度数据特点的相关业务实践都能通过可视化图表来展示,比如个推的下发图,从时间和区域两个维度,可以即时、直观地展现个推数据下发的过程。
一、下发图的由来
个推下发图主要用于呈现个推为APP提供推送服务时数据的下发过程,可以直观显示个推推送触达到的城市,有利于开发者对下发数据进行分析。
个推下发图运用了迁徙图的原理,再通过自主设计开发出的一套可视化展示图像。这一类型的可视化可以广泛应用于拥有地理位置信息和数据转移特征的数据展示。
二、下发图的构成
下发图主要由地图、地理位置信息,以及飞线组成。如下图所示:
三、下发图的技术要点
1.地图
地图可以利用第三方地图服务,也可以自主绘制地图,本文以后者为例。自主绘制的地图主要利用了墨卡托投影原理,将地球正轴圆柱投影,由经纬度信息转化到画布上对应的位置。
本文案例中用了 d3.js 中的 geoMercator 进行墨卡托投影转换。
然后我们可以在阿里云的 datav 中获取地图的 geojson 数据,具体地址可参见括号内链接,(https://datav.aliyun.com/tools/atlas )再通过 canvas 原生 Api,添加背景色、边框等,就可以画出想要的地图了。
注意:下图中的地图角度透视主要应用了 css 中的 transform,perspective、rotateX、rotateY、rotateZ 等。
遵循上述步骤,一个透视角度的静态地图就绘制完成了。
2.贝塞尔曲线
贝塞尔曲线是计算机图形学中相当重要的参数曲线,它通过一个方程来描述一条曲线,根据方程的最高阶数,又分为线性贝塞尔曲线、二次贝塞尔曲线、三次贝塞尔曲线和更高阶的贝塞尔曲线。
本案例中主要应用了二次贝塞尔曲线,二次贝塞尔曲线的函数如下:
B(t) = (1-t) ²P0 + 2t(1-t)P1 + t²P2, t ∈ [0,1]
上图为本文案例中飞线的贝塞尔曲线应用,其中 from 为起点,to 为终点,curveness 为曲线的曲率,取值-1 ~ 1,曲率的绝对值越大,曲线越弯曲,percent为飞线位置占比。
3.动画
在 canvas 中,动画效果的实现通常是由 window.requestAnimationFrame 循环执行,因此,飞线需要算出每一帧中飞线的状态,以及飞线的入场和离场形态。
4.发光效果
那么下发图的特效具体如何实现呢?首先我们来介绍一下头部发光效果的实现过程:
我们以工业中的HSL色彩模式为颜色标准,通过对色相(H)、饱和度(S)、明度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色,HSL即代表色相、饱和度、明度三个通道的颜色,这一标准几乎包括了人类视力所能感知的所有颜色。以此为依据,可以发现光源的发光规律,即光源中心的明亮度最高,由内向外,明亮度依次递减。
所以根据配置的基础颜色,就能获取到顶点发光处颜色的明亮度,大致方法如下:
完成头部发光步骤后,接下来需要打造一个酷炫的形状。发光的头部是一个类似棉签棒的形状,该形状可以用一个半圆和一个三角形来绘制,再根据曲线的切线,获取三角形以及半圆的旋转角度。
完成下发图头部制作后,接下来需要进行尾部的操作,因为canvas自带线性渐变,所以具体代码如下:
canvas 的落地效果呈圆形渐变样式,当飞线到达终点后,完整的落地效果就开始展示,整个画面类似雨滴降落到地面。
5.透视
如果不调整透视角度,贝塞尔曲线的样式如下图所示:
当曲线与下发方向的角度呈90度时,曲率最大;角度为0度或者180度时,曲率最小,与余弦定律相似。
其中 from 是起始位置,to 是终止位置,curveness 是曲线的曲率,angel 是视线的角度。
最终效果如下:
四、技术选型
在进行下发图的技术选型时,个推技术团队对比了 svg 和 canvas 两种技术栈,最后选择了 canvas,然后配合 requestAnimationFrame 画出下发轨迹的帧动画。两款技术栈的具体性能对比如下:
五、总结
随着数据维度的扩展和丰富,数据可视化的形态日渐丰富。作为地理位置信息和数据转移特征的数据可视化图表,下发图可以更直观地展现个推为APP提供推送服务时的下发量、下发区域等数据,对APP的行业分析以及战略调整有着指导性意义。
转载于:https://www.cnblogs.com/evakang/p/10728040.html
数据可视化之下发图实践相关推荐
- python饼状图教程_Python数据可视化:饼状图的实例讲解
使用python实现论文里面的饼状图: 原图: python代码实现: # # 饼状图 # plot.figure(figsize=(8,8)) labels = [u'Canteen', u'Sup ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-line线图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- Echarts数据可视化series-graph关系图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- R 数据可视化 02 | 火山图
R 数据可视化 02 | 火山图 文章目录 R 数据可视化 02 | 火山图 一. 示例数据准备 二. 环境需求 三. 绘制火山图 1. 火山图 2. 标记基因的火山图 四. 保存为图片 五. 详细参 ...
- 数据可视化--饼状图
数据可视化–饼状图 功能:模拟从后台获取数据,将数据绘制成饼状图,效果如下: <canvas height="500px" width="800px"&g ...
- 数据可视化之雷达图:自助数据集处理,完美演绎球员数据可视化
数据可视化,不只应用于工作或者财务报告,在某些场合通过使用图表展示数据,进行信息可视化表达,不仅可以省去繁冗的文字,还能更为清晰直观地展示,化平庸为神奇,让任何人有认真看的欲望. 当今世界人们越来越崇 ...
- Python数据可视化之折线图
Python数据可视化之折线图 提示:前言 Python数据可视化之折线图 提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 Python数据可视化之折线图 前言 一.导入包 ...
- 性感的数据可视化 —— 桑基图、气泡图、南丁格尔玫瑰图
阿里云数据中台官网 https://dp.alibaba.com/index (作者:常成) 2019年的"凯度信息之美奖"揭晓了,有很多很有意思的信息可视化作品.很多作品看到的时 ...
最新文章
- 利用XSLT把ADO记录集转换成XML
- 第五周项目二-游戏中的角色类(2)
- 【Java自顶向下】面试官:HashMap源码看过吗?我:看过!面试官:好极了,那么来扒一扒吧!
- leetcode701. 二叉搜索树中的插入操作(dfs)
- (王道408考研数据结构)第七章查找-第二节1:顺序查找及其优化
- 【Android 应用开发】Android资源文件 - 使用资源存储字符串 颜色 尺寸 整型 布尔值 数组...
- pytorch学习率衰减
- 怎样更改itunes备份位置_正确修改itunes备份文件路径方法
- 蓝兔子现在有一个字符串,如果一个字符串从左向右看和从右向左看是一样的,则称为回文串。请编写程序,帮助蓝兔子判断输入的字符串是否是回文串。
- 阿里网盘官网网页,怎么隐藏的这么深
- mac快捷键:轻松提升mac使用效率
- 虚幻引擎图文笔记:The emitter is GPU but the fixed bounds checkbox is not set警告的解决
- OpenCL Programming Cases and Optimization Methods, Pinned Memory
- 复旦大学邱锡鹏教授:语言模型即服务,走向大模型的未来
- Android~获取WiFi MAC地址和IP方法汇总
- C语言怎样判断乘法越界,c语言算术运算符越界问题解决方案
- 线性表的创建和基本操作
- windows无法启动windows defender service服务(位于本地计算机上) 错误577
- 编程语言的主要类型,声明式编程,命令式编程()和函数式编程的区别
- 《超时空要塞》与《太空堡垒》之缘——同样伟大的硬币两面