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