阿里双十一大屏六年路

简介:

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

相关文章
|
2月前
|
分布式计算 API 调度
【2023总结】天猫国际自营贴纸系统的焕新之路
【2023总结】天猫国际自营贴纸系统的焕新之路
42 3
|
11月前
|
算法 架构师 双11
案例酷 | 经此一“疫”,Givenchy线下门店迈开“云”步伐
编者按: 对企业来说,如何以货品满足消费者的消费需求,并提供附加优质服务,其实是一个亘古不变的话题。目前,纪梵希在中国内地已经开出113家线下门店,成为纪梵希品牌在中国内地市场与消费者保持高效沟通的强有力纽带。
161 0
|
弹性计算 算法 Serverless
serverless 案例 | 广告传媒 分众传媒
serverless 案例 | 广告传媒 分众传媒
129 0
serverless 案例 | 广告传媒 分众传媒
|
新零售 搜索推荐 算法
这个天猫618消费季,一众品牌背后的阿里云数据中台三大解决方案究竟是什么?
众多品牌通过阿里云数据中台的系列解决方案,从精细化洞察会员需求并提供运营能力、户外广告智能投放及曝光回流、GMV拆解及全链路策略指导等三大核心场景切入,实现具体业务问题解决和业绩强势增长。
356 0
这个天猫618消费季,一众品牌背后的阿里云数据中台三大解决方案究竟是什么?
|
算法 视频直播 调度
|
前端开发 小程序 Serverless
今晚19:00!淘系【云+端】开源产品线上发布会
你是否在传统开发和 Serverless 中犹豫不决,对上云抱有怀疑?是否在开发项目的前端代码和后端代码中切换觉得特别繁琐?是否在开发中后台时觉得能力不足,需要申请服务器配合?是否在小程序开发中碰到资源调用,管理繁琐的问题? 9月23日淘系技术特此举办【云+端】开源产品线上发布会!和大咖连线,共同探索云+端的未来。
940 0
今晚19:00!淘系【云+端】开源产品线上发布会
|
存储 移动开发 JavaScript
揭秘 vivo 如何打造千万级 DAU 活动中台 - 启航篇
悟空活动中台作为vivo移动互联网首选的在线制作活动平台,有哪些关键能力支撑了它?本文作为开篇将为大家揭晓vivo活动中台的能力与创新。
1948 0
在线直播平台建设必备之物,斗鱼虎牙有同款,它就是……
要说在线直播平台哪家强,还真不能一概而论,毕竟现在平台真是挺多的,大的平台有斗鱼直播平台、虎牙直播平台等,刚起步的甚至正在进行直播平台建设的小平台也各有各的优点,面对的客户群体也不同,直播用户们萝卜白菜各有所爱,谁都觉得自己在看的比别家的强。
|
缓存 供应链 Java
【Java开发者专场】阿里专家梁笑:2018双十一下单成功率99.9%!供应链服务平台如何迎接大促
2018年双十一平稳度过,海量订单、零点流量高峰,阿里是如何实现供应链99.9%的下单成功率?本次分享中,阿里2018年双十一大促供应链服务保障平台负责人向大家详细阐述大促前4个月的全程经历。面对大促第一步需要做什么,流量峰值如何评估,性能优化从何处着手,一套有条不紊的供应链服务平台迎接大促的解决方案至关重要。
5013 0
|
算法 前端开发 双11
第一期优酷技术沙龙——双十一背后的技术实践
欢迎来到由优酷技术主办,LiveVideoStack联合出品的优酷技术沙龙——双十一背后的技术实践。本沙龙将从多维度分享优酷技术在保障和提升双十一及双十一晚会体验方面的经验,期待与业界同仁进行碰撞交流。
2642 0