從 2012 年起，阿里每年的雙 11 大促都會推出一個大屏，以多種生動的展示方式實時地顯示交易情況。實時數據大屏，它的特點是各種大：屏幕大、數據量大、展示信息量大，可以說是數據可視化的圣杯。

作為雙 11 數據大屏的幕后功臣，DataV 在經歷數個大型項目后幾乎試遍技術沉淀的所有路徑：開源代碼、產品化、打包解決方案、平臺化……應用場景也從雙 11 電商作戰，擴展到智慧城市、智慧交通等諸多領域。他們一路走來的歷程和思索，值得后來者借鑒參考。

DataV 的誕生伴隨著阿里集團對數據驅動運營的探索。

2011 年，淘寶孵化出第一款數據產品——數據魔方，旨在透過生動的數據圖表，降低平臺上中小賣家理解數據的成本，繼而結合圖表交互等功能讓賣家在實際運營中借力于店鋪數據。數據魔方的出現，對內對外都普及了數據化運營的價值，當時負責數據魔方可視化開發的正是現在的 DataV 團隊，他們很快承擔起阿里內部數據大屏的技術升級改造，在這過程中，也連帶推動阿里實時數據指標體系的構建。

2012 年，雙 11 第一次有自己的媒體中心——一個培訓教室改造成的臨時指揮中心，媒體大屏的硬件全靠兩臺投影儀和兩臺筆記本撐起來，這樣的設備在今天看起來非常簡單粗暴。當年因為對交易金額預估過低，還鬧出了烏龍，12 年的雙 11 剛開始沒多久，實際成交金額超過了圖表預設的最大值，GMV 實時折線圖一上來就爆表了。盡管當時沒有對指標做特別的梳理、可視化圖表開發經驗也不足，首次亮相的雙 11 大屏還是給人帶來了巨大的視覺沖擊和真切的數據體感。

直到今年雙 11，DataV 團隊負責雙 11 媒體數據大屏的可視化開發已經 6 年，大屏分辨率從 1024*768 到了 12K，屏幕面積直逼 400 平方米，展示數據的復雜程度和實時的數據鏈路更是發生了天翻地覆的變化。

一邊是技術能力升級，另一邊 DataV 團隊定位也從對內服務的角色切換到可視化產品與方案的提供者，正在將自身實時數據可視化的能力對外輸出。同時 DataV 也正在 從單純的數據可視化，向數據可視分析轉型。

目前，DataV 正在全力配合阿里云的 ET 城市大腦項目實踐城市級多維數據的可視分析平臺，一期的數據指揮大屏已經成為杭州交警日常工作中的一環，也已經結合機器智能的圖像識別等 AI 場景開始進行新一輪的技術解決方案升級。

除此之外，DataV 也和很多正在著手技術轉型的政府企業進行數據指揮大屏的升級改造工作，幫助他們在數據化運營管理的起步階段快速找到數據體感。

從開源到產品化

早期 DataV 沉淀出 datav.js 組件庫并進行了開源，但后來，DataV 放棄了這個開源項目，并將其產品化提供出來，為什么呢？

開源的初衷是想把可視化技術賦能給更多的數據展現場景，但在推廣過程中卻遇到大量定制化的 issue，開發者在處理數據和圖表對接上遇到大量問題（諸如 D3 豐富的 demo 庫對于數據開發者來說還是門檻略高），因此開源并沒能達成當初的愿景。另外當時 datav.js 組件庫架構還考慮到對低版本 IE 瀏覽器的支持，但后來這方面需求變弱，所以這個庫也就慢慢棄用了。

在這個過程中，DataV 團隊觀察到，提供可視化組件庫不等于打通數據看板制作的全鏈路，對于那些直接面對數據、或者希望與數據產生交互的人而言，組件庫降低了一部分門檻，但除此之外，高性能的數據可視化還涉及到樣式設計、數據連接、組件架構設計等多方技能，這些基于一個產品來輸出會更加完整。于是 DataV 團隊開始琢磨起產品化的路徑。

首先，數據可視化在大公司體系下雖然偏前端崗，但其實是業務理解、數據理解、視覺表達的綜合體現，需要業務、數據、前端、設計共同完成。從純技術來講，前端組件只是一部分，數據如何加工、如何對接其實是可視化在業務落地更為關鍵的一步。相比耳熟能詳的 ECharts 的發展途徑，DataV 更希望通過產品化的方式把數據、業務、前端、設計串接在一起，真正做到降低門檻。

這樣，數據開發可以很容易地實現專業圖表前端的工作，設計師和業務也很容易地做出“會動的”數據看板，大幅度降低了可視化多棧之間的工程和溝通成本。

其次，一個商業化的產品，通過和客戶的交流反饋，開發者能更準確地摸清用戶的真實需求。而開源前端組件盡管被廣泛使用，開發者自己完全不知道他人用于什么樣的場景，就很難摸到痛點與訴求。而僅僅從前端來看，基礎的圖表開發完成之后，也會遇到方向上的瓶頸。

DataV 目前的定位還是在大屏端可視化展示分析的工具。

在功能上，最主要的就是提供可拖拽的大屏界面配置工具，以及各種各樣的模版，像做 PPT 套模版的方式很容易就可以實現雙 11 大屏般的效果。另外還包括了各種各樣的數據連接的能力，包括常見的各類數據庫，API 接口等。

在特色上，除了常規的長得比較酷炫的基礎圖表組件，DataV 在 WebGIS 領域下了很大的功夫，整合了各種各樣的 WebGIS 能力。對 d3.js, leaflet.js, mapbox.js, 原生的 canvas，SVG，傳統后端繪圖地圖瓦片，各種地理數據的映射、投影，以及地圖多圖層的事件響應等做了非常完善的整合。一般的 BI 或者可視化工具在基礎圖表上還都比較容易實現，但 GIS 部分就相對弱很多。DataV 可以通過界面化的配置很容易的實現多圖層多繪圖技術以及地理相關數據整合的融合。

2016 年，DataV 前端開發工程師米爾分享了《雙 11 數據大屏技術演進》，以歷年雙十一為例，介紹了 DataV 從最初的一個 exe 程序發展到大規模 WebGL 應用的過程。

DataV.gl：基于 WebGL 的智慧城市可視化解決方案

經過過去幾年對 WebGL 的研究和實踐，DataV 推出了 DataV.gl 組件，大規模提升繪制性能，實現 3D 數字城市的自定義。從這一點來講，目前已經做到了世界領先的水準。

DataV 把三維可視化能力打包成一個易用的組件，用戶導入 3D 模型文件，就可以像編輯其他圖表一樣，通過圖形化的菜單配數據、調樣式，而在實現效果上，DataV.gl 支持十萬量級的建筑物渲染，支持城市內管道線路和自然景觀的呈現，用戶還可以自定義鏡頭運動軌跡、實現城市畫面自由探索。

從技術層面來看，DataV.gl 極大地提升了三維城市地理可視化的計算效率和工程效率。采用基于瀏覽器的經典 GPGPU 技術，利用顯卡的計算能力，DataV.gl 支持流場、力導圖等計算密集型可視化方案的海量數據流暢渲染。和傳統的基于 CPU 的 Canvas 力導圖繪制方案相比，DataV.gl 的 GPU 加速力導圖繪制方案性能提升 30 倍以上。

與此同時，DataV.gl 支持城市數據規劃文件（CAD 等格式）、標準矢量地理數據作為輸入數據，通過地理數據可視化映射服務，直接進行三維城市建筑模型，比傳統設計師用三維軟件建模動輒耗時數周相比，效率大幅提升。

近兩年，Uber 在地理信息三維可視化領域頗有建樹，發布的 deck.gl 前端庫成為了業界標桿。但是單靠一個來源可視化技術框架無法提供跨行業多種場景的大數據可視化解決方案，同時 deck.gl 在滿足個性化需求、前端技術棧選擇方面也存在很多局限性。

Uber deck.gl 是一個可視化前端庫，能解決數據可視化開發環節的需求，其他環節需要用戶自己尋找解決辦法，而 datav.gl 是一整套海量數據高性能可視化解決方案，用戶可以“一站式”完成數據可視化業務。

如果用汽車打比方的話，Uber deck.gl 好比是一臺汽車發動機，datav.gl 就是一輛整車；只買了發動機無法上路，還需要其他零件進行裝配。
除此之外 datav.gl 和 deck.gl 的區別還有：

（1）從功能定位上，datav.gl 比 deck.gl 覆蓋更廣，不僅僅提供一個可視化庫的功能，而是提供一整套大數據可視化解決方案

（2）從目標用戶群體上區分，deck.gl 偏向開發者群體，datav.gl 偏向企業、政府用戶；

（3）從用戶需求適配性對比看，deck.gl 與 React 深度綁定，基礎的官方可視化組件在前端開發使用比較方便，但是一些個性化需求需要深入剖析 deck 和 React 框架才能開發，相對成本較高。datav.gl 提供開發者版，用戶既可用使用官方組件，也可以完全按自己的技術棧和開發習慣研制自定義組件；

（4）單純從渲染效率上看，datav.gl 和 deck.gl 都是基于 WebGL，基礎性能類似，datav.gl 在一些具體的海量數據可視化場景方面較有優勢，如上文所述。

（5）從可視化素材資源整合方面看，datav.gl 接入一些如直播流媒體、三維建模等資源，提供了傻瓜式組件；deck.gl 相對比較復雜。

DataV 的未來

關于未來的方向，DataV 的重心主要是可視化生態和技術探索兩塊。
雖說數據大屏可以服務各行各業、市場潛力巨大，但無論是從大屏落地各個環節、還是從最終切入行業所需的領域知識來看，這個市場都需要更多的生態伙伴加入，玩出不一樣的火花。例如，在 ET 城市大腦的項目里，不少生態力量和 DataV 合力形成了一套完整的城市級數據可視分析大屏的方案 。

當然，作為技術團隊，DataV 也十分看重平臺上的可視化開發者，為此他們推出開發者版，能夠讓開發者進行二次的定制開發，遵循一定的開發規范，就可以把自制的組件融入到產品當中，像使用原生組件一樣可以進行圖形化的配置。以及，支持開發者把自己的組件發布到阿里云市場當中，實現可視化的能力變現——這也是 DataV 團隊推動數據可視化落地發展、為可視化找到商業化出路 這個初心的延續。

同時，DataV 也將自己的技術思路通過技術文檔潛移默化地分享給外部的開發者，并依托平臺沉淀下的大量使用數據為開發者真實準確的改進方向。不但希望最終用戶能感受到數據可視化的價值，也希望能將這份價值傳遞給千千萬萬在為可視化奮斗的開發者。

DataV 另一個大方向是，會持續在可視分析的研究探索方向上加強投入，在技術上優化產品框架支持更為強大的數據交互功能，在可視化理論基礎上加強和高校等科研機構的合作，保證自身在數據可視化方向上有更為強勁持久的動力支撐。

受訪嘉賓介紹：

寧朗，DataV 數據可視化技術負責人，阿里巴巴前端委員會數據可視化小組商業化方向負責人。2010 年加入淘寶數據團隊，支持團隊數據產品數據魔方、淘寶指數、全景洞察中的可視化組件開發，從 2012 年開始負責歷年雙 11 媒體數據大屏以及阿里巴巴集團數據大屏的數據可視化技術研發，datav.js 組件庫開發成員。

永翎，DataV 產品經理，同時兼任阿里云城市大腦產品負責人。可視化領域的早期探索者，2012 年通過 Processing 制作的北京短信基站可視化作品參展北京國際設計周智慧城市主展，國內數據可視化與新聞傳播領域的早期布道人，創辦數據新聞網，翻譯數據新聞手冊。2013 年加入阿里巴巴數據平臺事業部，任數據魔方、淘寶指數、全景洞察等阿里電商數據產品經理。后整個部門并入阿里云，開始正式啟動將 DataV 做成商業化產品。

前端之巔

「前端之巔」是 InfoQ 旗下關注前端技術的垂直社群，加入前端之巔學習群請關注「前端之巔」公眾號后回復“加群”。投稿請發郵件到 [email protected]，注明“前端之巔投稿”。