阿里双十一大屏六年路

简介:

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

相关文章
|
传感器 新零售 监控
送外卖也要“黑科技”?阿里移动感知技术应用揭秘
送餐路上外卖骑手们所处的位置不仅牵动着大家的心,在本地生活的场景下,也是订单配送和调度系统的重要一环。其中骑手是否已到店取餐看似简单却难以准确观测。针对这一问题,阿里本地生活科技中心建立了基于移动感知的aBeacon系统来准确地观测骑手到店和离店行为。这一工作成果也发表在了网络系统领域的顶级会议NSDI’21上。本文将从实现原理为大家做一个简单介绍。
1946 0
送外卖也要“黑科技”?阿里移动感知技术应用揭秘
|
人工智能 编解码 监控
我在春晚现场护航直播
把春晚直播的信号送到千家万户。
我在春晚现场护航直播
|
算法 视频直播 调度
|
前端开发 小程序 Serverless
今晚19:00!淘系【云+端】开源产品线上发布会
你是否在传统开发和 Serverless 中犹豫不决,对上云抱有怀疑?是否在开发项目的前端代码和后端代码中切换觉得特别繁琐?是否在开发中后台时觉得能力不足,需要申请服务器配合?是否在小程序开发中碰到资源调用,管理繁琐的问题? 9月23日淘系技术特此举办【云+端】开源产品线上发布会!和大咖连线,共同探索云+端的未来。
963 0
今晚19:00!淘系【云+端】开源产品线上发布会
|
Kubernetes Cloud Native Serverless
这个 14 万人参与过的云原生线下沙龙,即将在线开播
Alibaba Cloud Native Day 将于 4 月 18 日全天进行线上直播!
这个 14 万人参与过的云原生线下沙龙,即将在线开播
|
存储 移动开发 JavaScript
揭秘 vivo 如何打造千万级 DAU 活动中台 - 启航篇
悟空活动中台作为vivo移动互联网首选的在线制作活动平台,有哪些关键能力支撑了它?本文作为开篇将为大家揭晓vivo活动中台的能力与创新。
2035 0
企业复工季遇上阿里云采购季,云市场主播带你了解线上业务怎么玩
当企业复工季遇上阿里云采购季,3月19日晚上19:00,云市场主播带你了解线上业务怎么玩:运营流量、转化商机、促进成交三步走,还有千元天猫超市卡+电子合同免费试用+线上化运营白皮书+老客续费双倍抽奖......
567 0
企业复工季遇上阿里云采购季,云市场主播带你了解线上业务怎么玩
|
新零售 双11 云计算
备战双十一 找阿里云的不光天猫淘宝
本文讲的是备战双十一 找阿里云的不光天猫淘宝【IT168 云计算】一年一度的双11在各大电商的暴风雨般的宣传阵仗下如期而至,记者昨日的朋友圈已被天猫双十一的交易量与双十一晚会一度刷屏。据天猫方面透露,零点钟声一过,短短的12分零28秒,天猫的销售额就突破了百亿人民币。
2780 0
在线直播平台建设必备之物,斗鱼虎牙有同款,它就是……
要说在线直播平台哪家强,还真不能一概而论,毕竟现在平台真是挺多的,大的平台有斗鱼直播平台、虎牙直播平台等,刚起步的甚至正在进行直播平台建设的小平台也各有各的优点,面对的客户群体也不同,直播用户们萝卜白菜各有所爱,谁都觉得自己在看的比别家的强。
|
缓存 供应链 Java
【Java开发者专场】阿里专家梁笑:2018双十一下单成功率99.9%!供应链服务平台如何迎接大促
2018年双十一平稳度过,海量订单、零点流量高峰,阿里是如何实现供应链99.9%的下单成功率?本次分享中,阿里2018年双十一大促供应链服务保障平台负责人向大家详细阐述大促前4个月的全程经历。面对大促第一步需要做什么,流量峰值如何评估,性能优化从何处着手,一套有条不紊的供应链服务平台迎接大促的解决方案至关重要。
5059 0