阿里双十一大屏六年路

简介:

2012年

据说天猫双十一的大屏起源于2012年,仅仅呈现了实时的交易额折线图和部分省份的实时交易动态。用Processing绘制中国地图,用HighCharts绘制交易额折线图,Raphael绘制了其他小图表,完成了一个简单的页面,通过投影仪的方式投到了当年媒体中心的小会议室中。
有趣的小插曲是当时仅有的一个前端小哥哥因为写死了折线图的最大值,让这个折线图一度存在误差。谁又能想到短短一年过去,双11购物狂欢节的交易额就翻了367%多呢。
可惜当时小编还在备战高考,连个旁观者都算不上。
_1

2013年

5张屏,SVG做的平面地图,3D地球,Canvas离屏技术绘制的呼吸动效,2013年的双11大屏接入了更多实时的数据,例如港澳台的交易动态、分省份/宝贝/店铺的排行、菜鸟物流的繁忙程度。
又是小插曲,由于刚过零点的交易峰值,左上角的飞线图由于过于密集变得模糊卡顿,好在通过增加飞线池,在有限的范围内控制飞线的数量。
这一年小编第一次因为购物而在网吧包夜。
_12

2014年

2014年的大屏做了现场直播,当时的数据技术与产品部团队开始承担双11的数据工作。同样是5个小屏拼成的大屏,智能几小时刷新一次。也是在这一年,全球交易的飞线热度首次出现,Raphael技术绘成了这些海内外的交易路径和热度,Canvas技术模仿了雪花屏的效果,CSS3技术实现了一些简单的旋转动画。
不出意外的小插曲还是存在,一来还是两个。10号23点50分的时候,前端展示的趋势图突然显示异常了,赶在最后的5分钟,前端工程师紧急将这个bug修改完成。谢天谢地。尽管进行了压测,飞线数目还是超过了预估值,动画效果和Raphael源代码本身也让内存泄漏几乎毁掉这场直播,好在利用飞线池机制,在零点峰值过后的五六个小时后刷新了一次,勉强撑过了那一天。
小编就算翻了账单也不记得那天究竟是怎么度过的了,只记得被当年最后大屏上停留的数字震撼到的感动和振奋。
_3

2015年

水立方那天成了双十一大屏的主场,21米宽10米高的LED大屏上迎来了27张大屏的集体亮相,全球狂欢节的主题。这一年WebGL大爆发,倒计时、3D地图、真实的地图飞线、3D城市数据纷至沓来。新技术将数据从抽象世界还原到人们熟悉的3D城市,让数据和观众的联系感更强。那一年真是全民的大狂欢,销售额在12号零点停留在了912亿,移动端占比68%。
大量的数据还是小插曲的元凶。ExtrudeGeometry+EdgesGeometry几何体绘制,150M的geojson,几乎崩溃了浏览器。
阵容强大的双十一晚会也是从这一年开始,没办法作为粉丝,我要任性的在这里占位为TFBOY打call。
_4

2016年

随着不停闪变跳跃的总体成交总额,这一年的天猫双十一大屏终于将视觉效果和高性能的相互平衡,完美。0点顶峰计算性能高达数十万订单/秒,多条链路流计算备份确保万无一失。
花呗还款还到了怀疑人生,还好当天败来的那么多零食取代了接下来一个多月的早中晚餐。
_5

2017年

闪电,全国上亿买家订单沿着真实的消费路线涌向卖家,当天超过500家中外媒体以此作为现场直播。
这一年数据可视化也成了我的主业,想法设法的通过可视化去帮助分析和解决业务问题,在兼顾展示层面的酷炫的同时启发观者从中获得insghts成了我每时每刻的思考和实践。(不得不纪念一下这些年脱下的头发)。
_6

2018年

双十一十周年,最终2135亿元。这一年双11大屏首次在商场的屏幕上同步,在杭州城西银泰的大屏上小编看着当天的销售总金额不断跳动的时候,矫情的决定搞出这么篇文章出来,从双十一大屏聊聊可视化技术和内容上的发展进化。
_7

回顾之后总要有点废话(正经总结)在这里

我们认为可视化大屏应该在最短的时间内用最具冲击力的视觉语言,将企业最重要的数据/信息传递给最重要的人。
例如看到双十一的大屏,你可能会觉得阿里巴巴真厉害、马爸爸的红包给的有点少、今天又花了好多钱,明年剁手不能再这么冲动了等等,而这种想法一定不是隐藏在数据库,而是可视化的技术带给你的对这个数据的感知,而这个感知又激发了你的想法和行动,败光了你的钱包。

通过可视化的方式去直观的展示数据,让大量的数据转化成一眼能读懂的指标,让观者更好的抓住主题、记住想传达的信息,来探寻数据的背后发生了什么。数据的可视化不是让你看了就走,而是传递给你信息,让你看完之后,产生一定想法,一定的行动。

以上内容是小编根据自身亲身经历结合相关参考资料汇编而成,权侵删~~

参考资料

https://baijiahao.baidu.com/s?id=1564991102406360&wfr=spider&for=pc

https://yq.aliyun.com/articles/73724

相关文章
|
监控 前端开发 rax
SSR在天猫优品大促会场的探索实践
BBC 发现其网站加载时间每增加一秒,用户便会流失 10%。为提高页面的秒开率,我们不断探索着优化策略,仅仅在浏览器领域下的优化已经满足不了我们的极致要求,开始往服务端方向不断探索。本文将讨论业务接入SSR的几个问题: 1.SSR究竟适合哪些业务? 2.接入SSR后,性能带来了哪些提升? 3.业务接入SSR有哪些成本?
174 0
|
测试技术 双11
2022年双十一告商家白皮书
2022年双十一即将到来,为给您提供强有力的保障,管易已安排双十一专项保障工作,请了解并关注各项注意事项。
122 0
2022年双十一告商家白皮书
|
缓存 监控 安全
天猫淘宝卡券包演进史
卡券包整体分为PC端以及无线端两大部分,最开始的卡券包是PC版,随着PC向无线化转型的大潮,无线端卡券包也同步产生。
272 0
天猫淘宝卡券包演进史
|
新零售 搜索推荐 算法
这个天猫618消费季,一众品牌背后的阿里云数据中台三大解决方案究竟是什么?
众多品牌通过阿里云数据中台的系列解决方案,从精细化洞察会员需求并提供运营能力、户外广告智能投放及曝光回流、GMV拆解及全链路策略指导等三大核心场景切入,实现具体业务问题解决和业绩强势增长。
391 0
这个天猫618消费季,一众品牌背后的阿里云数据中台三大解决方案究竟是什么?
|
算法 视频直播 调度
|
前端开发 小程序 Serverless
今晚19:00!淘系【云+端】开源产品线上发布会
你是否在传统开发和 Serverless 中犹豫不决,对上云抱有怀疑?是否在开发项目的前端代码和后端代码中切换觉得特别繁琐?是否在开发中后台时觉得能力不足,需要申请服务器配合?是否在小程序开发中碰到资源调用,管理繁琐的问题? 9月23日淘系技术特此举办【云+端】开源产品线上发布会!和大咖连线,共同探索云+端的未来。
959 0
今晚19:00!淘系【云+端】开源产品线上发布会
|
Kubernetes Cloud Native Serverless
这个 14 万人参与过的云原生线下沙龙,即将在线开播
Alibaba Cloud Native Day 将于 4 月 18 日全天进行线上直播!
这个 14 万人参与过的云原生线下沙龙,即将在线开播
|
存储 移动开发 JavaScript
揭秘 vivo 如何打造千万级 DAU 活动中台 - 启航篇
悟空活动中台作为vivo移动互联网首选的在线制作活动平台,有哪些关键能力支撑了它?本文作为开篇将为大家揭晓vivo活动中台的能力与创新。
2003 0
|
新零售 双11 云计算
备战双十一 找阿里云的不光天猫淘宝
本文讲的是备战双十一 找阿里云的不光天猫淘宝【IT168 云计算】一年一度的双11在各大电商的暴风雨般的宣传阵仗下如期而至,记者昨日的朋友圈已被天猫双十一的交易量与双十一晚会一度刷屏。据天猫方面透露,零点钟声一过,短短的12分零28秒,天猫的销售额就突破了百亿人民币。
2759 0
在线直播平台建设必备之物,斗鱼虎牙有同款,它就是……
要说在线直播平台哪家强,还真不能一概而论,毕竟现在平台真是挺多的,大的平台有斗鱼直播平台、虎牙直播平台等,刚起步的甚至正在进行直播平台建设的小平台也各有各的优点,面对的客户群体也不同,直播用户们萝卜白菜各有所爱,谁都觉得自己在看的比别家的强。