阿里双十一大屏六年路

  1. 云栖社区>
  2. 博客>
  3. 正文

阿里双十一大屏六年路

袋鼠云大屏 2018-11-12 18:24:39 浏览3039
展开阅读全文

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

网友评论

登录后评论
0/500
评论
袋鼠云大屏
+ 关注