数学之美?编程之美?数学 + 编程= unbelievable 美!

导语

相信大家跟我一样,偶尔会疑惑:曾经年少的时候学习过的那么多的复杂的数学函数,牛逼的化学方程式,各种物理原理、公式,到底有什么用?但事实是,我们所学习过的东西,虽然很多不能够准确地记得全部,但已经潜移默化地影响到我们的思维模式,很多时候给我们解决一些工作、甚至是生活中的问题,提供了建模的方案,比如,在实现某个需求的时候需要做动画衰减,可能就能够通过匀减速运动公式去实现,再比如,本文所要介绍这个案例,整个实现过程其实并没有多么难多么复杂,但从实际问题到模型建立的思维推导过程,笔者认为还是很有意思也很有意义的,所以,也希望能够分享给大家。

一、 背景问题

有个需求是要将每日消费数据以柱状图形式呈现,我们有追求的设计师希望柱子高度在超过某个限额(设为valueNormal)时不再正比增长,而是越来越缓慢地增长,目的是使柱子高度不会出现有些特别高,有些特别矮的情况,那么,要怎么才能够实现这个需求呢?下面将介绍对于这个问题的思路梳理及实现过程。

二、 思路梳理

1. 模型建立:

首先,回到最初目标:使柱子在超过valueNormal之后,高度增长速度越来越慢。也就是说,在消费金额小于等于valueNormal时,柱子高度成正比增长;大于valueNormal时,大于valueNormal的部分,所占高度随着值的增加增长速度越来越慢。其次,整个柱状图的高度是一定的(设为heightMax),毋庸置疑,最大的消费金额值(设为valueMax)的柱子高度就是heightMax。然后我们对于valueNormal值的柱子的高度设定为heightNormal。这样,这个问题最终就转换成这样的模型:

其中rat就是超过valueNormal的部分的高度在heightMax – heightNormal中所占的比例,要求(1)rat值随消费金额值的增加而增加;(2)增加速度逐渐趋缓;(3)rat值的变化区间是0~1;

那么,根据这个模型,我们需要确定的有以下三个值:(1)valueNormal值如何取;(2)heightNormal值如何取;(3)rat值的计算方法如何确定。这里valueNormal和heightNormal值可能需要根据业务不同要求等来具体确定,并且在整个程序的生命周期内,不会发生变化,我们下面主要讨论rat值的计算方法。

2. rat值的函数设计:

根据1中的模型对rat值的要求,最先想到了渐进函数,最简单的渐进函数y = 1/x, 函数图如下:

在x>0时,y值随x值增加而越来越小,并且减小速度逐渐趋缓,最后无限趋近于0

y = -1/x:

在x>0时,y值随x增加而越来越大,并且增长速度逐渐趋缓,最后无限趋近于0。这个函数变化趋势已经跟我们所要的效果很像了,区别在于:我们要求从0开始逐渐趋近于1,继续改造:

y = 1 – 1/x:

y = 1 – 1/(x+1):

当x>0时,y从0开始逐渐增加,并且增长速度逐渐趋缓,最终趋近于1,这就是我们要的效果了。

3. 应用于实际场景:

2中所得函数式运用于1中模型,x就是value-valueNormal,y就是rat,那么,也就是说当value-valueNormal=1是,rat = 1/2; value-valueNormal=2时,rat = 2/3。那么在实际该消费数据的场景下,相当于高于valueNormal值1块的消费金额就占了heightMax-heightNormal部分的一半高度,之后随着value值继续增加,其高度的增加范围只是heightMax-heightNormal部分的一半,显然是不合理的,因此这里函数式要进一步加参数调整,调整为:y = 1- 1/(x/a + 1) = x/(x+a),这样,当value-valueNormal = a时,value的高度就是heightNormal + (heightMax-heightNormal)*1/2。

到这里1中模型就变为:

接着,就剩下确定valueNormal, heightNormal, a的取值如何确定的问题了,通过实验,最终选用了valueNormal是某个月份的消费日均值(设为Average),heightNormal是整个柱状图高度的1/2,a是Average的一半。这样,这个模型就具体化为:

化解为:

将一个实际例子套用到该模型中,9月份总消费金额是121669元,该月日均消费金额是4055.63元,假定HeightMax = 5000,整体函数示意图如下所示:

可以看出这是完全符合我们最初设计要求的:在消费金额小于等于日均消费金额值时,柱子高度随金额值增加成正比增长;之后,随着消费金额值的增加,柱子高度仍然不断增长,但增高幅度越来越缓慢,最终无限趋近于柱状图总高度。

三、 实现效果:

最终实现效果如下:

完美!

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

Rusu的专栏

1 篇文章1 人订阅

我来说两句

1 条评论
登录 后参与评论

相关文章

来自专栏华章科技

数据可视化的七大秘密

数据可视化, 特别是基于Web的数据可视化的时代已经到来了。类似JavaScript的可视化库如D3.js, Raphaël, 以及Paper.js, 以及最新...

492
来自专栏AI科技大本营的专栏

移动应用AI化成新战场?详解苹果最新Core ML模型构建基于机器学习的智能应用

Google刚刚息鼓,苹果又燃战火!这一战,来自移动应用的AI化之争。 近日,苹果发布专为移动端优化的Core ML后,移动开发者对此的需求到底有多强烈?去年大...

3427
来自专栏AI科技评论

学界 |「眼」来助听:谷歌视觉-音频分离模型解决「鸡尾酒会效应」

Google Research 软件工程师发表了可解决「鸡尾酒会效应」视觉-音频语音识别分离模型。 AI 科技评论按:人类很擅长在嘈杂的环境下将其他非重点的声...

3807
来自专栏大数据挖掘DT机器学习

用R语言作社群关系分析

在反映大量人群或事物之间的关系时,社交网络图可以清晰的展示’群体’的内含和外延。例如,群体的规模、核心、与其他群体的交叠情况。 社交关系图来表示应用人数和之间的...

3918
来自专栏华章科技

好文丨数据挖掘界领军人物谢邦昌:深度剖析Data Mining

谢邦昌教授,是台北医学大学医务管理学系研究所暨大数据研究中心及管理学院主任,也是数据挖掘界领军人物及世界知名统计学家,他对数据挖掘的定义是:Data Minin...

681
来自专栏iOSDevLog

ARKit示例 - 第2部分:平面检测+可视化

在我们的第一个hello world ARKit应用程序中,我们设置了我们的项目并渲染了一个虚拟3D立方体,可以在现实世界中渲染并在您移动时进行跟踪。

492
来自专栏机器之心

观点 | TensorFlow sucks,有人吐槽TensorFlow晦涩难用

选自nicodjimenez 机器之心编译 参与:李泽南、刘晓坤 作为当今最流行的深度学习框架,TensorFlow 已经出现了两年之久。尽管其背后有着谷歌这样...

28410
来自专栏数据科学与人工智能

【经验】数据可视化专家的七个秘密

数据可视化的道路上充满了不可见的陷阱和迷宫,最近ClearStory Data的两位数据可视化开发人员分享了他们总结出来的数据可视化开发的7个不宣之秘,普通开发...

18810
来自专栏AI科技评论

动态|99.80%!腾讯优图刷新人脸识别新高度

AI科技评论消息,在国际权威人脸识别数据库LFW上,腾讯优图实验室在无限制条件下人脸验证测试(unrestricted labeled outside data...

3027
来自专栏钱塘大数据

【干货】数据可视化的七大秘密

【导读】 数据可视化, 特别是基于Web的数据可视化的时代已经到来了。类似JavaScript的可视化库如D3.js, Raphaël, 以及Paper.js,...

3478

扫码关注云+社区