前言
在数据埋点时,业务上总是趋向于越完整,数据量越充实,数据的价值就越高,所以往往会在一段时间内有很多的数据点需要展示,亦或是本来在一小时的时间段内采集的数据是一个合理的量,但是一旦遇到了用户拉取三十天的数据来进行展示的时候,就会出现大量数据点展示的需求。
并不是说展示所有的数据点不好,但是因为浏览器/电脑性能限制,亦或是移动端显示的限制,前端应该有一种保护机制来对过量数据展示导致的UI性能卡顿有一定的预防和优化。
我们通常采用downsample(降采样)的类似方法来对数据进行优化,它是信号与系统中的一个概念,与插值相反,他是通过一定的方法来降低波形中的采样频率来提高数据传输的速率,降低数据传输的消耗。
基于维度的简单聚合
对于业务数据而言,我们首先需要清楚的是,我们该从哪一个角度进行数据的聚合,比如如果采集的是一个有时序性的数据(大部分的业务数据实际上也是时序性的),那么我们就应该根据时间段来进行优化,将时间分段进行降采样。
接下来就是常规的聚合方法,我们需要将一段时间的点数据进行相关的聚合。常用的保持数据分析特征的方法有:最大值聚合,最小值聚合,中位数聚合,平均数聚合,按百分比聚合,线性聚合等;我们也有一些丢失数据特征但是从更高维度进行分析的聚合:求和聚合,计次聚合,方差聚合等。
我们可以根据目的性来进行有效的降采样,就例如你得到的数据点是按分钟采集的数据,但是你需要展示的数据是一个月三十天纬度的数据,那么你将会有30x24x60 = 43200个点,如果你的数据里面有3个series,那么就是43200 x 3 = 129600个点,在性能一般的设备上,这样的数量级可能会导致页面的卡顿或者渲染过程的资源大量占用。
简单降采样
如果我们采用合适的聚合,比如一小时聚合一次,那么数据量就是原来的60分之一,可以按照目的来采用不同的聚合方法,下面我们用一组示范数据来进行简单降采样:
原数据(3003points)
最大值聚合后(1001points)
最小值聚合后(1001points)
虽然这组数据在最大值后基本还保持了原来数据的特征,但是在经过最小值聚合之后已经彻底失去了数据特征,这样的情况对于没有特殊目的的数据分析是不可忍受的,所以我们可以尝试复合采样。
复合采样
我们将一次性采用多种采样指标来保留数据特征的方法称之为复合采样,根据研究目的可以进行多种点的采样,例如对于上述数据,我们想要保持他的基本浮动趋势,那么我们可以对其进行最大+最小+中值采样,这样能简单的保留一段时间内的数据特征。
复合采样后(1008points)
在我们进行复合采样后,数据周期内的部分细节虽然丢失了,但是他的总体趋势也更加接近原来的整个数据,效果也符合在分析趋势时候的大部分场景。最后我们用一张图总结一下基于维度的简单聚合的降采样效果,为了方便查看数据我们本次采用同一个series的数据来对比。
基于视觉图形效果的挑选
算法来自「Downsampling Time Series for Visual Representation」By Sveinn Steinarsson
单桶最大三角算法
如果说维度聚合是基于数据的特征进行的降采样,那么算法进行采样是兼顾了视觉上的效果保存,通过几何上的近似来进行了点的选取。我们选取部分数据来看一下怎样在视觉上剔除点。
上图标注点几个点都是这组数据中的关键点,他们分别在自己所在的段落和上一个关键点形成了一个大的三角形,这些三角形是形成我们视觉上判断数据趋势的重要元素,可以说在折线图中,三角形的夹角和高基本就代表了这组数据相应的视觉效果,所以在这里,我们提出第一个算法:
「单桶最大三角算法」(Largest-Triangle-One-Bucket):
- 计算出每个点所影响的三角形范围,根据这个点前后数据三角形的变化量来作为这个点的影响量
- 将数据分为同样的大小的桶(点数量相同的桶)
- 对每个桶,保留一个桶里影响量最大的点
- 最终保证成功取样,并且数据的头和尾都被保留 (通常认为第一个点和最后一个点都是必须保留的)
大家可能会对影响量感到困惑,该怎么获取这个影响量呢,在实践中,我们通常采用三角形的特征来作为影响量即:面积,夹角,边长,来衡量这个三角形的影响量。
采用边长作为影响量来采样(1015points)
从上面的结果不难看出,这个算法在采样后视觉上曲线进一步保留了趋势中尖锐的地方,并且去除了近1/3的平滑边上的点,并且随着桶宽度的增加,整体趋势保留效果也比较好,但是缺点也是,图会变得越来越强调尖锐的地方,而没有了过渡的趋势:
分别以 2、3、4、5 作为桶宽来进行降采样(从下到上递增)
对桶和三角形选取的优化
同样基于三角形,我们在上一个算法中是对前后点进行了三角形的构成,我们进一步扩大这个三角形的定义,如果这个三角形的范围不是n-1 n n+1 三个点,而是桶1,桶2,桶3中的三个点呢,我们可以进一步拓展选点的范围,来找到影响量更大的三角形,作为一种延伸现在不再做赘述,在原论文中,这个算法称为:「三桶最大三角算法」(Largest-Triangle-Three-Buckets)。
同样,进一步的,我们将分桶的过程也纳入优化的范围,因为在一个图上,视觉重心不一定的平均分布的,例如我们这个图,与其对他进行平均分桶,根据数据变化的量来进行分桶显得更加合理,这里就引入了动态规划,「动态最大三角算法」(Largest-Triangle-Dynamic)。
根据数据的变化趋势进行分桶
What's More
折线图表降采样进一步可以作为信号与系统的降采样去研究,就比如,可以对二维的数据进行傅立叶卷积,并且适当进行滤波,最简单的就是 Anti-aliasing filter 抗混叠滤波器,可以有效的在视觉效果上对数据进行一个有效过滤的动作,不过对于数据可视化来说,本文的两种降采样思路已经是在不影响数据的准确性的基础上,进行的有效数据简化,并且实践上也易于实现,对性能要求不高。
使用工具: G2 Plot
参考资料:
「Downsampling Time Series for Visual Representation」