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