從 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ù)體感。

早期 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 應用的過程。

經(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 的重心主要是可視化生態(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，注明“前端之巔投稿”。