2017-8-5 藍(lán)藍(lán)設(shè)計(jì)的小編
今年在多個(gè)部門(mén)共同努力下，阿里集團(tuán)在2015水立方雙十一媒體中心立起了一塊寬21米，高10米的LED大屏。DataV 數(shù)據(jù)可視化小組有幸在這么大一塊畫(huà)布上盡興創(chuàng)作，并且在這個(gè)項(xiàng)目中小組第一次嘗試使用了DataV數(shù)據(jù)可視化引擎來(lái)搭建所負(fù)責(zé)場(chǎng)景，這樣的機(jī)會(huì)實(shí)屬不易，所以想把其中的點(diǎn)點(diǎn)滴滴和大家分享。
先呈上現(xiàn)場(chǎng)效果的幾段視頻，熱個(gè)身。
今年的媒體大屏幕分為三大板塊，分別是總覽大屏，全球大屏，城市大屏。每一個(gè)大屏幕都有自己的主題，總覽大屏保留了2014年基本的信息點(diǎn)，全球屏是對(duì)于今年全球狂歡這一主題的數(shù)據(jù)展示，而城市大屏是今年在信息點(diǎn)上的一大創(chuàng)新，我們希望通過(guò)從地理維度的下探，讓來(lái)訪者對(duì)于阿里雙十一數(shù)據(jù)有更多個(gè)性化的認(rèn)識(shí)和解讀，也讓數(shù)據(jù)和大家更加有貼近感。
而在展現(xiàn)形式上，本次數(shù)據(jù)大屏最受關(guān)注的兩個(gè)形式是：3D實(shí)時(shí)交易地球和3D北京市交易圖。這兩種形式都將數(shù)據(jù)從抽象世界還原到了人們所熟悉的3D世界，并且直接轉(zhuǎn)換回了產(chǎn)生這些數(shù)據(jù)的行為。例如北京3D城市中的一條條飛線正想一件件快遞包裹向滿心期待的買(mǎi)家們飛奔而去的景象。而看到3D地球的時(shí)候，即使是事先不太了解今年全球狂歡主題的來(lái)訪者，也留下了今年雙十一已經(jīng)影響全球的感受。
總覽大屏
全球大屏
城市大屏
在技術(shù)上，所有的媒體大屏都是基于web端技術(shù)實(shí)現(xiàn)的，這樣的選擇是因?yàn)閿?shù)據(jù)大屏幕只是數(shù)據(jù)可視化在我們?nèi)粘９ぷ髦械囊粋€(gè)運(yùn)用場(chǎng)景，我們需要能讓數(shù)據(jù)可視化的技術(shù)能在日常工作中得到最廣泛的落地運(yùn)用，web端當(dāng)然就是我們的主戰(zhàn)場(chǎng)。當(dāng)然。拋開(kāi)這一點(diǎn)，我們認(rèn)為web端的相關(guān)技術(shù)也是大家落地相關(guān)數(shù)據(jù)可視化開(kāi)發(fā)的良好平臺(tái)，為什么這么說(shuō)呢？這基于以下幾點(diǎn)：功能全，前端技術(shù)svg，canvas，webgl三者的相互補(bǔ)充，已經(jīng)讓我們?cè)诮换ィ?D&3D以及大規(guī)模數(shù)據(jù)量繪制有了充足的發(fā)揮空間，其次我們團(tuán)隊(duì)在以前開(kāi)發(fā)數(shù)據(jù)產(chǎn)品的過(guò)程中已經(jīng)用Nodejs建立了良好的中間件來(lái)連接各種數(shù)據(jù)源，這讓目前接入各種數(shù)據(jù)庫(kù)變得非常便捷。最后就是便于分享，在任何硬件設(shè)備上只要打開(kāi)瀏覽器就能看到最終的數(shù)據(jù)可視化作品，在當(dāng)今這個(gè)注重信息分享的時(shí)代，這一點(diǎn)非常關(guān)鍵。
另外這也是第一次我們?cè)诠敬笮晚?xiàng)目上使用DataV數(shù)據(jù)可視化引擎搭建數(shù)據(jù)大屏。DataV數(shù)據(jù)可視化引擎是以我們?nèi)粘D表組件庫(kù)d.chart以及地理相關(guān)組件庫(kù)d.map為基礎(chǔ)，專(zhuān)業(yè)數(shù)據(jù)可視化模板設(shè)計(jì)為視覺(jué)框架，依托cube前端框架搭建起來(lái)的web服務(wù)。通過(guò)該引擎可以利用已有組件低成本還原設(shè)計(jì)師產(chǎn)出的原型圖，快速完成多種數(shù)據(jù)源的綁定，并通過(guò)最終的可視化配置調(diào)整系統(tǒng)完成所見(jiàn)即所得的視覺(jué)調(diào)試，最終產(chǎn)出數(shù)據(jù)大屏。
DataV數(shù)據(jù)可視化引擎大屏管理界面
之前我們做了幾年的展示類(lèi)可視化項(xiàng)目，有些坑有些不足。十月走進(jìn)項(xiàng)目室的時(shí)候，我們有這些期許:
1、高性能，告別內(nèi)存泄露
內(nèi)存泄露一直是我們揮之不去的心病，想象幾百個(gè)鏡頭對(duì)著馬總講話的時(shí)候，運(yùn)行了10個(gè)小時(shí)的大屏忽然崩潰是何情景。
過(guò)去的幾年里，在展示性很強(qiáng)的場(chǎng)合，我們常用svg去表現(xiàn)復(fù)雜的圖形，還記得去年為了snap.js里存在的內(nèi)存泄露問(wèn)題而徹夜不眠（庫(kù)本身有坑，除此還會(huì)有性能問(wèn)題），而且svg和普通canvas，性能有限，不能使我們能表達(dá)萬(wàn)級(jí)數(shù)量實(shí)時(shí)更新的圖形，我們希望以更高性能的方式，去還原數(shù)據(jù)的海量。所以，今年大部分的屏幕都是基于webgl的，我們又嘗試了許多方法，使得性能更好，且看下文。
2、走向城市級(jí)別
全球和全境的展示，如中國(guó)的物流網(wǎng)絡(luò)，全球的飛線圖，已在歷年的大屏考驗(yàn)里愈發(fā)成熟。
更有意思的方向在哪里？我們覺(jué)得走向城市尺度有挑戰(zhàn)，如何表現(xiàn)城市錯(cuò)綜復(fù)雜的建筑和街道結(jié)構(gòu)、以及人類(lèi)交易活動(dòng)混沌而有序的空間分布。
3、從飛線到軌跡
飛來(lái)飛去圖，展示了很多年，我們?nèi)绾胃M(jìn)一步，更有意思地展現(xiàn)數(shù)據(jù)。
我們想到的一個(gè)點(diǎn)，是讓交易沿著物流的方向行走，營(yíng)造一個(gè)更真實(shí)的交易場(chǎng)景。
4、全面3d
2014年雙十一媒體大會(huì)里，3d的可視化場(chǎng)景小試牛刀，今年覆蓋更廣。
3d之于2d，有GPU加速性能上的好處，也為可視化增加了一個(gè)空間的維度，還讓某些場(chǎng)景更接近感官（如城市建筑的展現(xiàn)）
5、工程化
第一次高規(guī)格的首都雙十一晚會(huì)，鞭策我們推陳出新，也把大屏開(kāi)發(fā)的數(shù)量，提到了去年的4-5倍，時(shí)間非常短，調(diào)整也很多，如何標(biāo)準(zhǔn)化地去做形態(tài)各異的不同大屏？
今年的雙十一盛況空前，海量的訂單和支付數(shù)據(jù)，經(jīng)由客戶(hù)端和大后端的處理、公共數(shù)據(jù)平臺(tái)及產(chǎn)品部同學(xué)的合并和清洗，到了可視化大屏前，面對(duì)數(shù)百媒體以及媒體背后的觀眾。首先從我們?nèi)绾翁幚砗驼宫F(xiàn)這些數(shù)據(jù)來(lái)開(kāi)始我們的技術(shù)分享。
目前任何一種繪圖技術(shù)，都很難完整的去反映雙十一的海量交易，但我們盡力還原最真實(shí)的情況。
數(shù)據(jù)在數(shù)據(jù)部門(mén)清理之后，進(jìn)入了我們的流程。
總體，我們今年把所有的屏，運(yùn)行在阿里云的數(shù)據(jù)產(chǎn)品DataV數(shù)據(jù)可視化引擎上。DataV數(shù)據(jù)可視化引擎是一個(gè)集屏幕管理、多屏通訊、發(fā)布打包等功能為一體的大屏生產(chǎn)工具，除了可以集中管理屏幕，并通過(guò)頁(yè)面遙控大屏，還可以通過(guò)配置頁(yè)面，實(shí)時(shí)調(diào)整已經(jīng)發(fā)布上線的大屏的一些參數(shù)。
我們的架構(gòu)防止3種情況：
1、防網(wǎng)絡(luò)延遲/斷網(wǎng)
2、內(nèi)存泄露
3、數(shù)據(jù)量過(guò)大
我們想表現(xiàn)2點(diǎn)：
1、海量的數(shù)據(jù)展現(xiàn)
2、飛線群和交易情況一起漲落，比如10日凌晨海量飛線，11日早晨數(shù)量變少。
我們的原則是數(shù)據(jù)上層層緩存，層層緩沖，組件上利用好GPU通信，架構(gòu)如下圖。
幾乎所有的屏都以一定地頻率請(qǐng)求服務(wù)端。接收到數(shù)據(jù)后還要有處理的策略.
以我們的飛線和軌跡的處理策略為例，講講我們處理的流程。
飛線的數(shù)據(jù)，接口返回一般都如下格式:
[{
from: { lat: xxx, lng: xxx
}, to: { lat: yyy, lng: yyy
},
count: zzz
},
......
]
最簡(jiǎn)單的動(dòng)畫(huà)模型是有啥畫(huà)啥。
不可能來(lái)什么畫(huà)什么。頁(yè)面刷新率1/60秒，要維持交易動(dòng)畫(huà)的綿綿不斷，高頻請(qǐng)求服務(wù)器，請(qǐng)求很可能無(wú)法及時(shí)返回造成積累，最后內(nèi)存爆缸，何況如果下一次數(shù)據(jù)返回網(wǎng)絡(luò)不暢，會(huì)造成延時(shí)，體驗(yàn)很差。
因此我們的接口以5s左右的速度去請(qǐng)求服務(wù)器，拿到數(shù)據(jù)的時(shí)候，也不合適直接畫(huà)出來(lái)。而是在ajax請(qǐng)求和繪制之間，建立一個(gè)先進(jìn)先出，后進(jìn)后出的數(shù)據(jù)緩存。數(shù)據(jù)緩存要具有一定的長(zhǎng)度（否則在反復(fù)輪詢(xún)一組飛線，視覺(jué)上很明顯）。
每一次數(shù)據(jù)到達(dá)的時(shí)候，后端會(huì)計(jì)算好此刻飛線的繁忙程度(可以理解為0-1的數(shù)字)，我們通過(guò)這個(gè)繁忙度，去控制繪制的speed（即瀏覽器的每一幀刷新，從數(shù)據(jù)池提取幾條飛線數(shù)據(jù)），這直接決定了此刻飛線的密集度。
在繪制層面，維護(hù)一個(gè)數(shù)量固定的飛線對(duì)象池，建立回收機(jī)制。每個(gè)飛線有一定的生命周期，當(dāng)飛線生命結(jié)束（飛到了盡頭）的時(shí)候，會(huì)被回收到unusing的隊(duì)列里去，當(dāng)新數(shù)據(jù)到來(lái)的時(shí)候，會(huì)從unsing的池子里取出飛線復(fù)活，放回到using的隊(duì)列里去。有一種情況是數(shù)據(jù)量太大，根本沒(méi)有空閑的飛線時(shí)候，新的數(shù)據(jù)就發(fā)過(guò)來(lái)了，這種情況下，我們拒絕繪制。
在這個(gè)繪制控制器里，我們維護(hù)一個(gè)requestAnimationFrame的線程，這比每個(gè)飛線獨(dú)自起requestAnimationFrame更新自己的生命周期更節(jié)約性能。
今年組件和去年組件的變化，在于數(shù)量，組件除了兼容回收機(jī)制，最大的改觀是所有的組件共享一個(gè)線幾何體。也就是，幾千條飛線其實(shí)是一條線，只是我們?cè)谝曈X(jué)上隱藏了線和線之間的連接，在threejs里，建一個(gè)100000個(gè)點(diǎn)的線，要比 1000條100個(gè)點(diǎn)的線要節(jié)約大量的cpu資源，而我們把這種虛擬的飛線幾何體和一整根線的點(diǎn)，建立了虛擬的映射關(guān)系，最后通過(guò)shader給線附著顏色。通過(guò)顏色和透明度的控制，我們可以繪制出飛線。這種飛線本質(zhì)是線幾何體，形態(tài)上沒(méi)有三角的strip精細(xì)，但為了海量，我們選擇了平衡（由于錯(cuò)覺(jué)，我們覺(jué)得有透明度的線比沒(méi)有的更細(xì)，因此有流星拖尾的效果）。
本質(zhì)上，飛線就是一個(gè)有生命周期的線，全球交易圖里，飛線是一根類(lèi)似于拋物線的曲線，而軌跡圖里，飛線沿著經(jīng)緯度數(shù)據(jù)的軌跡一步步往前挪動(dòng)。
其實(shí)我們可以更推廣，任何線產(chǎn)生的動(dòng)畫(huà)，我們都可以用這個(gè)組件去管理和表達(dá)，只是一小部分函數(shù)發(fā)生變化.
因此，做了雙十一前10億交易額的彩蛋。我們的主要想法是，雙十一海量的成交額如雨點(diǎn)般落在了地面上，像焊槍一樣焊接出11.11幾個(gè)大字，每300多萬(wàn)訂單完成，就生成一個(gè)cube，到10億元完成的時(shí)候，模型旋轉(zhuǎn)并消失。
一方面我們可以看出成交量在不斷累加，一方面，在這個(gè)時(shí)間里，折線圖這種更的圖表，可以有個(gè)緩沖時(shí)間檢查是否有誤。
1、smooth step函數(shù)， 這是一個(gè)有意思的函數(shù)，詳見(jiàn) https://en.wikipedia.org/wiki/Smoothstep
我們對(duì) smooth step做一些改進(jìn)，整體開(kāi)n次方， 讓線條的形態(tài)更可控
function smoothStep(t){// t的取值 0 - 1 var n = 2; var k = 2 * t * t * t - 3 * t * t;
return Math.pow(k, n);
}
我們可以利用這個(gè)函數(shù)，繪制出空間任意兩點(diǎn)的流動(dòng)關(guān)系，這比繪制貝塞爾線要率很多，我們用這個(gè)函數(shù)模擬了訂單雨。
1、sketchup 和模數(shù)系統(tǒng)。
建筑的模數(shù)系統(tǒng)，設(shè)計(jì)的柵格模式，都是為了產(chǎn)生可控制的比例，讓設(shè)計(jì)更好看更易控制。
為了在短時(shí)間內(nèi)建出可控的11.11的模型，我用了sketchup建模，并打了個(gè)柵格的布局，并在模型軟件rhino中提取出每個(gè)cube的中心點(diǎn)。
為了完成動(dòng)畫(huà)從下而上的變化，我們還需將每個(gè)cube的中心點(diǎn)按照z軸排序，但為了讓同一層的立方體繪制順序更有機(jī)，我們對(duì)同一層的點(diǎn)進(jìn)行了隨機(jī)排序。
2、一筆畫(huà)問(wèn)題。
我們用連續(xù)的動(dòng)畫(huà)生成一個(gè)的方塊，需要遍歷方塊上所有的點(diǎn)。
可惜，不能完美地一筆畫(huà)方塊，讓每個(gè)頂點(diǎn)出現(xiàn)一次，這正是哈密爾頓問(wèn)題。
我們最后的路徑是 0 -> 1 -> 2 -> 6 -> 5 -> 4 -> 7 -> 3 -> 0 -> 4 -> 7 -> 6 -> 5 -> 1 -> 2 -> 3。
效果：
其中還有很多細(xì)節(jié)，如用web worker進(jìn)行數(shù)據(jù)處理，尤其是對(duì)軌跡數(shù)據(jù)的前端數(shù)據(jù)實(shí)時(shí)簡(jiǎn)化等。
首先，在繪制3D建筑時(shí)，Three.js中的ExtrudeGeometry函數(shù)提供了非常簡(jiǎn)便的方法來(lái)繪制3D的幾何圖形。通過(guò)繪制城市輪廓并將其擠出到對(duì)應(yīng)建筑數(shù)據(jù)的高度，來(lái)達(dá)到建筑的效果。但這只允許繪制大概規(guī)模在幾百數(shù)量的建筑。
針對(duì)城市規(guī)模的繪制，其中包括建筑，道路，及河流，通過(guò)合并幾何圖形的方法，通常將上述所有幾何圖形合并成唯一的幾何圖形，來(lái)節(jié)省CPU與GPU的計(jì)算，并減少兩者間的通信，從而實(shí)現(xiàn)大規(guī)模城市的繪制。
同時(shí)，根據(jù)城市規(guī)劃的不同，有些城市中存在大量高度為一層的建筑。盡管通過(guò)3D繪制方法來(lái)繪制，這類(lèi)建筑的高度仍是微乎其微甚至不可見(jiàn)的，在這種情況下，將此類(lèi)建筑歸為2D建筑，2D建筑的好處是僅通過(guò)單一的面就可以展現(xiàn)出建筑的形狀，這樣可節(jié)省大量的計(jì)算，同時(shí)保證性能的優(yōu)化。
最后，如果希望展示城市中某一或幾個(gè)建筑的細(xì)節(jié)，需要建立obj格式或dae格式的3D模型，通過(guò)Three.js將這些3D模型導(dǎo)入原本這些建筑所在地圖上的位置。
在處理建筑的陰影時(shí)，可以通過(guò)在城市底部建立新的平面圖層，來(lái)接收建筑的陰影，同時(shí)可以在Three.js中選擇讓建筑也同時(shí)接收陰影，這樣，根據(jù)燈光的位置，就可以模擬出愈發(fā)真實(shí)的城市。在有些情況下，旋轉(zhuǎn)燈光的位置，來(lái)觀測(cè)建筑陰影的變換，可以模擬出城市中一天的陰影變化。
數(shù)據(jù)層面
數(shù)據(jù)內(nèi)容為建筑的輪廓數(shù)據(jù)，在導(dǎo)入前在nodejs里進(jìn)行后端優(yōu)化，通過(guò)減少距離太近的點(diǎn)（可直接使用 Leaflet 作者在github分享的simplify.js）從而減少對(duì)建筑面的繪制。
通常城市的建筑大概在幾十萬(wàn)左右的數(shù)量，首先根據(jù)重點(diǎn)區(qū)域進(jìn)行抽析，減少所繪制的建筑數(shù)量，但即使這樣城市的輪廓集合數(shù)據(jù)依然非常大，前端一次性讀取如此龐大的數(shù)據(jù)，等待時(shí)間過(guò)長(zhǎng)，在此解決方式是，需要按照建筑數(shù)據(jù)id隨機(jī)的方式切成若干個(gè)小的文件，減少每次請(qǐng)求的大小，這樣就可以以一種符合視覺(jué)的方式載入地圖。
飛線層面上，通常使用飛線的效果來(lái)表現(xiàn)城市中的物流。在實(shí)時(shí)數(shù)據(jù)中由于物流是不斷增加的，所以飛線理所應(yīng)當(dāng)?shù)脑诓粩嗟脑黾?，但是不斷?chuàng)建新的飛線會(huì)導(dǎo)致內(nèi)存泄漏，這就需要對(duì)消失的飛線進(jìn)行復(fù)用。由于飛線的數(shù)量同樣會(huì)增加CPU與GPU的通信，而影響性能，所以我們會(huì)將所有線段合并成唯一的線段。之后，將這根線段分散成成需要的飛線數(shù)量，每一個(gè)小的線段進(jìn)行更新位置，來(lái)達(dá)到飛線的效果。
數(shù)據(jù)可視化，開(kāi)發(fā)不一定能夠還原設(shè)計(jì)師的美學(xué)理想。而開(kāi)發(fā)有時(shí)能創(chuàng)造設(shè)計(jì)難用ps和ai表達(dá)的圖形，如何協(xié)作？
這次，我們利用dat-gui等控制組件，根據(jù)設(shè)計(jì)稿，做出了大致的demo界面，讓設(shè)計(jì)師根據(jù)拖動(dòng)條，像操作軟件一樣進(jìn)行調(diào)整，而我們通過(guò)console中打印出來(lái)的配置，返到代碼里去。
這么做還有個(gè)好處，我們現(xiàn)場(chǎng)接入的都是預(yù)發(fā)和線上的頁(yè)面，代碼不易修改，而大屏和我們電腦的屏幕有很大的色差，所以我們可以通過(guò)這種slider，針對(duì)大屏的顯示，再進(jìn)行微調(diào)，非常方便。
在大屏開(kāi)發(fā)中，我們著重解決了以下創(chuàng)新
首先還是要感謝一下公共數(shù)據(jù)平臺(tái)及產(chǎn)品部團(tuán)隊(duì)、小馬VMAX團(tuán)隊(duì)、阿云PR團(tuán)隊(duì)、共享業(yè)務(wù)事業(yè)部LBS團(tuán)隊(duì)和IT技術(shù)團(tuán)隊(duì)的通力合作，才有了最后的媒體數(shù)據(jù)大屏。最后說(shuō)說(shuō)這次項(xiàng)目在數(shù)據(jù)可視化專(zhuān)業(yè)方向上的感受。
這次數(shù)據(jù)大屏只是向受眾面最廣人群來(lái)普及數(shù)據(jù)概念以及增強(qiáng)大眾數(shù)據(jù)感受的一種方式。可能大家會(huì)覺(jué)得這種形式太偏向于視覺(jué)展示，但是從我們團(tuán)隊(duì)日常接觸到的案例可以看出，很多事情在阿里是做得超前了，特別是數(shù)據(jù)方面，其實(shí)社會(huì)上有太多的政府部門(mén)以及各種公司組織對(duì)于自己有什么的數(shù)據(jù)都還不了解，更不用說(shuō)從什么維度來(lái)挖掘數(shù)據(jù)的價(jià)值。而數(shù)據(jù)可視化是幫助大家降低理解感受數(shù)據(jù)門(mén)檻一種非常有效的方式。隨著越來(lái)越多的數(shù)據(jù)被更容易地采集、存儲(chǔ)、查詢(xún)，人們一下子沒(méi)有從中得到便利，反而因?yàn)閿?shù)據(jù)量的激增和數(shù)據(jù)維度的復(fù)雜化迷失了方向，數(shù)據(jù)成為了一種門(mén)檻，這和我們的初衷是相悖的。通過(guò)這次雙十一媒體大屏項(xiàng)目，我們看到了更多的媒體從數(shù)據(jù)維度對(duì)雙十一進(jìn)行報(bào)道，也看到了媒體對(duì)于城市屏這種個(gè)性化數(shù)據(jù)大屏的歡迎。從某種程度上來(lái)說(shuō)，數(shù)據(jù)大屏成為了一種讓大家可以拋開(kāi)知識(shí)背景公平閱讀理解數(shù)據(jù)的平臺(tái)，這讓我們更為興奮的想將數(shù)據(jù)可視化能力輸出給更多人。在雙十一之前，其實(shí)我們已經(jīng)邁出了第一步。DataV數(shù)據(jù)可視化引擎已經(jīng)幫助數(shù)夢(mèng)工廠和貨車(chē)幫分別搭建了政務(wù)云平臺(tái)數(shù)據(jù)大屏和貨車(chē)幫業(yè)務(wù)數(shù)據(jù)大屏，并在云棲大會(huì)上得以展示。我們也希望能有更多有相同愿望或者對(duì)于數(shù)據(jù)可視化有興趣愛(ài)好的朋友能加入我們！
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、大屏設(shè)計(jì)、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、大平面設(shè)計(jì)服務(wù)
相關(guān)文章
大屏ui設(shè)計(jì)系列之十：ui界面設(shè)計(jì)公司分享可視化大屏界面設(shè)計(jì)三十例
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn