從 2012 年起,阿里每年的雙 11 大促都會推出一個大屏,以多種生動的展示方式實時地顯示交易情況。實時數(shù)據(jù)大屏,它的特點是各種大:屏幕大、數(shù)據(jù)量大、展示信息量大,可以說是數(shù)據(jù)可視化的圣杯。
作為雙 11 數(shù)據(jù)大屏的幕后功臣,DataV 在經(jīng)歷數(shù)個大型項目后幾乎試遍技術沉淀的所有路徑:開源代碼、產(chǎn)品化、打包解決方案、平臺化……應用場景也從雙 11 電商作戰(zhàn),擴展到智慧城市、智慧交通等諸多領域。他們一路走來的歷程和思索,值得后來者借鑒參考。
DataV 的誕生伴隨著阿里集團對數(shù)據(jù)驅(qū)動運營的探索。
2011 年,淘寶孵化出第一款數(shù)據(jù)產(chǎn)品——數(shù)據(jù)魔方,旨在透過生動的數(shù)據(jù)圖表,降低平臺上中小賣家理解數(shù)據(jù)的成本,繼而結(jié)合圖表交互等功能讓賣家在實際運營中借力于店鋪數(shù)據(jù)。數(shù)據(jù)魔方的出現(xiàn),對內(nèi)對外都普及了數(shù)據(jù)化運營的價值,當時負責數(shù)據(jù)魔方可視化開發(fā)的正是現(xiàn)在的 DataV 團隊,他們很快承擔起阿里內(nèi)部數(shù)據(jù)大屏的技術升級改造,在這過程中,也連帶推動阿里實時數(shù)據(jù)指標體系的構(gòu)建。
2012 年,雙 11 第一次有自己的媒體中心——一個培訓教室改造成的臨時指揮中心,媒體大屏的硬件全靠兩臺投影儀和兩臺筆記本撐起來,這樣的設備在今天看起來非常簡單粗暴。當年因為對交易金額預估過低,還鬧出了烏龍,12 年的雙 11 剛開始沒多久,實際成交金額超過了圖表預設的最大值,GMV 實時折線圖一上來就爆表了。盡管當時沒有對指標做特別的梳理、可視化圖表開發(fā)經(jīng)驗也不足,首次亮相的雙 11 大屏還是給人帶來了巨大的視覺沖擊和真切的數(shù)據(jù)體感。
直到今年雙 11,DataV 團隊負責雙 11 媒體數(shù)據(jù)大屏的可視化開發(fā)已經(jīng) 6 年,大屏分辨率從 1024*768 到了 12K,屏幕面積直逼 400 平方米,展示數(shù)據(jù)的復雜程度和實時的數(shù)據(jù)鏈路更是發(fā)生了天翻地覆的變化。
一邊是技術能力升級,另一邊 DataV 團隊定位也從對內(nèi)服務的角色切換到可視化產(chǎn)品與方案的提供者,正在將自身實時數(shù)據(jù)可視化的能力對外輸出。同時 DataV 也正在 從單純的數(shù)據(jù)可視化,向數(shù)據(jù)可視分析轉(zhuǎn)型。
目前,DataV 正在全力配合阿里云的 ET 城市大腦項目實踐城市級多維數(shù)據(jù)的可視分析平臺,一期的數(shù)據(jù)指揮大屏已經(jīng)成為杭州交警日常工作中的一環(huán),也已經(jīng)結(jié)合機器智能的圖像識別等 AI 場景開始進行新一輪的技術解決方案升級。
除此之外,DataV 也和很多正在著手技術轉(zhuǎn)型的政府企業(yè)進行數(shù)據(jù)指揮大屏的升級改造工作,幫助他們在數(shù)據(jù)化運營管理的起步階段快速找到數(shù)據(jù)體感。
從開源到產(chǎn)品化早期 DataV 沉淀出 datav.js 組件庫并進行了開源,但后來,DataV 放棄了這個開源項目,并將其產(chǎn)品化提供出來,為什么呢?
開源的初衷是想把可視化技術賦能給更多的數(shù)據(jù)展現(xiàn)場景,但在推廣過程中卻遇到大量定制化的 issue,開發(fā)者在處理數(shù)據(jù)和圖表對接上遇到大量問題(諸如 D3 豐富的 demo 庫對于數(shù)據(jù)開發(fā)者來說還是門檻略高),因此開源并沒能達成當初的愿景。另外當時 datav.js 組件庫架構(gòu)還考慮到對低版本 IE 瀏覽器的支持,但后來這方面需求變?nèi)?,所以這個庫也就慢慢棄用了。
在這個過程中,DataV 團隊觀察到,提供可視化組件庫不等于打通數(shù)據(jù)看板制作的全鏈路,對于那些直接面對數(shù)據(jù)、或者希望與數(shù)據(jù)產(chǎn)生交互的人而言,組件庫降低了一部分門檻,但除此之外,高性能的數(shù)據(jù)可視化還涉及到樣式設計、數(shù)據(jù)連接、組件架構(gòu)設計等多方技能,這些基于一個產(chǎn)品來輸出會更加完整。于是 DataV 團隊開始琢磨起產(chǎn)品化的路徑。
首先,數(shù)據(jù)可視化在大公司體系下雖然偏前端崗,但其實是業(yè)務理解、數(shù)據(jù)理解、視覺表達的綜合體現(xiàn),需要業(yè)務、數(shù)據(jù)、前端、設計共同完成。從純技術來講,前端組件只是一部分,數(shù)據(jù)如何加工、如何對接其實是可視化在業(yè)務落地更為關鍵的一步。相比耳熟能詳?shù)?ECharts 的發(fā)展途徑,DataV 更希望通過產(chǎn)品化的方式把數(shù)據(jù)、業(yè)務、前端、設計串接在一起,真正做到降低門檻。
這樣,數(shù)據(jù)開發(fā)可以很容易地實現(xiàn)專業(yè)圖表前端的工作,設計師和業(yè)務也很容易地做出“會動的”數(shù)據(jù)看板,大幅度降低了可視化多棧之間的工程和溝通成本。
其次,一個商業(yè)化的產(chǎn)品,通過和客戶的交流反饋,開發(fā)者能更準確地摸清用戶的真實需求。而開源前端組件盡管被廣泛使用,開發(fā)者自己完全不知道他人用于什么樣的場景,就很難摸到痛點與訴求。而僅僅從前端來看,基礎的圖表開發(fā)完成之后,也會遇到方向上的瓶頸。
DataV 目前的定位還是在大屏端可視化展示分析的工具。
在功能上,最主要的就是提供可拖拽的大屏界面配置工具,以及各種各樣的模版,像做 PPT 套模版的方式很容易就可以實現(xiàn)雙 11 大屏般的效果。另外還包括了各種各樣的數(shù)據(jù)連接的能力,包括常見的各類數(shù)據(jù)庫,API 接口等。
在特色上,除了常規(guī)的長得比較酷炫的基礎圖表組件,DataV 在 WebGIS 領域下了很大的功夫,整合了各種各樣的 WebGIS 能力。對 d3.js, leaflet.js, mapbox.js, 原生的 canvas,SVG,傳統(tǒng)后端繪圖地圖瓦片,各種地理數(shù)據(jù)的映射、投影,以及地圖多圖層的事件響應等做了非常完善的整合。一般的 BI 或者可視化工具在基礎圖表上還都比較容易實現(xiàn),但 GIS 部分就相對弱很多。DataV 可以通過界面化的配置很容易的實現(xiàn)多圖層多繪圖技術以及地理相關數(shù)據(jù)整合的融合。
2016 年,DataV 前端開發(fā)工程師米爾分享了《雙 11 數(shù)據(jù)大屏技術演進》,以歷年雙十一為例,介紹了 DataV 從最初的一個 exe 程序發(fā)展到大規(guī)模 WebGL 應用的過程。
DataV.gl:基于 WebGL 的智慧城市可視化解決方案經(jīng)過過去幾年對 WebGL 的研究和實踐,DataV 推出了 DataV.gl 組件,大規(guī)模提升繪制性能,實現(xiàn) 3D 數(shù)字城市的自定義。從這一點來講,目前已經(jīng)做到了世界領先的水準。
DataV 把三維可視化能力打包成一個易用的組件,用戶導入 3D 模型文件,就可以像編輯其他圖表一樣,通過圖形化的菜單配數(shù)據(jù)、調(diào)樣式,而在實現(xiàn)效果上,DataV.gl 支持十萬量級的建筑物渲染,支持城市內(nèi)管道線路和自然景觀的呈現(xiàn),用戶還可以自定義鏡頭運動軌跡、實現(xiàn)城市畫面自由探索。
從技術層面來看,DataV.gl 極大地提升了三維城市地理可視化的計算效率和工程效率。采用基于瀏覽器的經(jīng)典 GPGPU 技術,利用顯卡的計算能力,DataV.gl 支持流場、力導圖等計算密集型可視化方案的海量數(shù)據(jù)流暢渲染。和傳統(tǒng)的基于 CPU 的 Canvas 力導圖繪制方案相比,DataV.gl 的 GPU 加速力導圖繪制方案性能提升 30 倍以上。
與此同時,DataV.gl 支持城市數(shù)據(jù)規(guī)劃文件(CAD 等格式)、標準矢量地理數(shù)據(jù)作為輸入數(shù)據(jù),通過地理數(shù)據(jù)可視化映射服務,直接進行三維城市建筑模型,比傳統(tǒng)設計師用三維軟件建模動輒耗時數(shù)周相比,效率大幅提升。
近兩年,Uber 在地理信息三維可視化領域頗有建樹,發(fā)布的 deck.gl 前端庫成為了業(yè)界標桿。但是單靠一個來源可視化技術框架無法提供跨行業(yè)多種場景的大數(shù)據(jù)可視化解決方案,同時 deck.gl 在滿足個性化需求、前端技術棧選擇方面也存在很多局限性。
Uber deck.gl 是一個可視化前端庫,能解決數(shù)據(jù)可視化開發(fā)環(huán)節(jié)的需求,其他環(huán)節(jié)需要用戶自己尋找解決辦法,而 datav.gl 是一整套海量數(shù)據(jù)高性能可視化解決方案,用戶可以“一站式”完成數(shù)據(jù)可視化業(yè)務。
如果用汽車打比方的話,Uber deck.gl 好比是一臺汽車發(fā)動機,datav.gl 就是一輛整車;只買了發(fā)動機無法上路,還需要其他零件進行裝配。
除此之外 datav.gl 和 deck.gl 的區(qū)別還有:
(1)從功能定位上,datav.gl 比 deck.gl 覆蓋更廣,不僅僅提供一個可視化庫的功能,而是提供一整套大數(shù)據(jù)可視化解決方案
(2)從目標用戶群體上區(qū)分,deck.gl 偏向開發(fā)者群體,datav.gl 偏向企業(yè)、政府用戶;
(3)從用戶需求適配性對比看,deck.gl 與 React 深度綁定,基礎的官方可視化組件在前端開發(fā)使用比較方便,但是一些個性化需求需要深入剖析 deck 和 React 框架才能開發(fā),相對成本較高。datav.gl 提供開發(fā)者版,用戶既可用使用官方組件,也可以完全按自己的技術棧和開發(fā)習慣研制自定義組件;
(4)單純從渲染效率上看,datav.gl 和 deck.gl 都是基于 WebGL,基礎性能類似,datav.gl 在一些具體的海量數(shù)據(jù)可視化場景方面較有優(yōu)勢,如上文所述。
(5)從可視化素材資源整合方面看,datav.gl 接入一些如直播流媒體、三維建模等資源,提供了傻瓜式組件;deck.gl 相對比較復雜。
DataV 的未來關于未來的方向,DataV 的重心主要是可視化生態(tài)和技術探索兩塊。
雖說數(shù)據(jù)大屏可以服務各行各業(yè)、市場潛力巨大,但無論是從大屏落地各個環(huán)節(jié)、還是從最終切入行業(yè)所需的領域知識來看,這個市場都需要更多的生態(tài)伙伴加入,玩出不一樣的火花。例如,在 ET 城市大腦的項目里,不少生態(tài)力量和 DataV 合力形成了一套完整的城市級數(shù)據(jù)可視分析大屏的方案 。
當然,作為技術團隊,DataV 也十分看重平臺上的可視化開發(fā)者,為此他們推出開發(fā)者版,能夠讓開發(fā)者進行二次的定制開發(fā),遵循一定的開發(fā)規(guī)范,就可以把自制的組件融入到產(chǎn)品當中,像使用原生組件一樣可以進行圖形化的配置。以及,支持開發(fā)者把自己的組件發(fā)布到阿里云市場當中,實現(xiàn)可視化的能力變現(xiàn)——這也是 DataV 團隊推動數(shù)據(jù)可視化落地發(fā)展、為可視化找到商業(yè)化出路 這個初心的延續(xù)。
同時,DataV 也將自己的技術思路通過技術文檔潛移默化地分享給外部的開發(fā)者,并依托平臺沉淀下的大量使用數(shù)據(jù)為開發(fā)者真實準確的改進方向。不但希望最終用戶能感受到數(shù)據(jù)可視化的價值,也希望能將這份價值傳遞給千千萬萬在為可視化奮斗的開發(fā)者。
DataV 另一個大方向是,會持續(xù)在可視分析的研究探索方向上加強投入,在技術上優(yōu)化產(chǎn)品框架支持更為強大的數(shù)據(jù)交互功能,在可視化理論基礎上加強和高校等科研機構(gòu)的合作,保證自身在數(shù)據(jù)可視化方向上有更為強勁持久的動力支撐。
受訪嘉賓介紹:
寧朗,DataV 數(shù)據(jù)可視化技術負責人,阿里巴巴前端委員會數(shù)據(jù)可視化小組商業(yè)化方向負責人。2010 年加入淘寶數(shù)據(jù)團隊,支持團隊數(shù)據(jù)產(chǎn)品數(shù)據(jù)魔方、淘寶指數(shù)、全景洞察中的可視化組件開發(fā),從 2012 年開始負責歷年雙 11 媒體數(shù)據(jù)大屏以及阿里巴巴集團數(shù)據(jù)大屏的數(shù)據(jù)可視化技術研發(fā),datav.js 組件庫開發(fā)成員。
永翎,DataV 產(chǎn)品經(jīng)理,同時兼任阿里云城市大腦產(chǎn)品負責人??梢暬I域的早期探索者,2012 年通過 Processing 制作的北京短信基站可視化作品參展北京國際設計周智慧城市主展,國內(nèi)數(shù)據(jù)可視化與新聞傳播領域的早期布道人,創(chuàng)辦數(shù)據(jù)新聞網(wǎng),翻譯數(shù)據(jù)新聞手冊。2013 年加入阿里巴巴數(shù)據(jù)平臺事業(yè)部,任數(shù)據(jù)魔方、淘寶指數(shù)、全景洞察等阿里電商數(shù)據(jù)產(chǎn)品經(jīng)理。后整個部門并入阿里云,開始正式啟動將 DataV 做成商業(yè)化產(chǎn)品。
前端之巔
「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群,加入前端之巔學習群請關注「前端之巔」公眾號后回復“加群”。投稿請發(fā)郵件到 editors@cn.infoq.com,注明“前端之巔投稿”。