大屏设计系列之十二:DataV 2015双十一媒体大屏回顾&技术分享

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

今年在多个部门共同努力下，阿里集团在2015水立方双十一媒体中心立起了一块宽21米，高10米的LED大屏。DataV 数据可视化小组有幸在这么大一块画布上尽兴创作，并且在这个项目中小组第一次尝试使用了DataV数据可视化引擎来搭建所负责场景，这样的机会实属不易，所以想把其中的点点滴滴和大家分享。

背景简介

先呈上现场效果的几段视频，热个身。

收起视频

收起视频

收起视频

今年的媒体大屏幕分为三大板块，分别是总览大屏，全球大屏，城市大屏。每一个大屏幕都有自己的主题，总览大屏保留了2014年基本的信息点，全球屏是对于今年全球狂欢这一主题的数据展示，而城市大屏是今年在信息点上的一大创新，我们希望通过从地理维度的下探，让来访者对于阿里双十一数据有更多个性化的认识和解读，也让数据和大家更加有贴近感。

而在展现形式上，本次数据大屏最受关注的两个形式是：3D实时交易地球和3D北京市交易图。这两种形式都将数据从抽象世界还原到了人们所熟悉的3D世界，并且直接转换回了产生这些数据的行为。例如北京3D城市中的一条条飞线正想一件件快递包裹向满心期待的买家们飞奔而去的景象。而看到3D地球的时候，即使是事先不太了解今年全球狂欢主题的来访者，也留下了今年双十一已经影响全球的感受。

总览大屏

全球大屏

城市大屏

在技术上，所有的媒体大屏都是基于web端技术实现的，这样的选择是因为数据大屏幕只是数据可视化在我们日常工作中的一个运用场景，我们需要能让数据可视化的技术能在日常工作中得到最广泛的落地运用，web端当然就是我们的主战场。当然。抛开这一点，我们认为web端的相关技术也是大家落地相关数据可视化开发的良好平台，为什么这么说呢？这基于以下几点：功能全，前端技术svg，canvas，webgl三者的相互补充，已经让我们在交互，2D&3D以及大规模数据量绘制有了充足的发挥空间，其次我们团队在以前开发数据产品的过程中已经用Nodejs建立了良好的中间件来连接各种数据源，这让目前接入各种数据库变得非常便捷。最后就是便于分享，在任何硬件设备上只要打开浏览器就能看到最终的数据可视化作品，在当今这个注重信息分享的时代，这一点非常关键。

另外这也是第一次我们在公司大型项目上使用DataV数据可视化引擎搭建数据大屏。DataV数据可视化引擎是以我们日常图表组件库d.chart以及地理相关组件库d.map为基础，专业数据可视化模板设计为视觉框架，依托cube前端框架搭建起来的web服务。通过该引擎可以利用已有组件低成本还原设计师产出的原型图，快速完成多种数据源的绑定，并通过最终的可视化配置调整系统完成所见即所得的视觉调试，最终产出数据大屏。

阅读全文>>