11月16日晚八點，大數(shù)據(jù)百人會沙龍第六期主講嘉賓——“2016阿里巴巴天池數(shù)據(jù)可視化大賽”專業(yè)組媒體特別獎獲得者郭偉，分享其獲獎作品“最熟悉的陌生人”交互可視化項目“智慧物流”的制作全過程。想要炫到?jīng)]朋友，或許你該學(xué)學(xué)這個↓↓↓

(以下是沙龍實錄，以嘉賓第一人稱講述)

　　今天給大家分享的是我參加阿里巴巴天池數(shù)據(jù)可視化大賽的一個項目，主題是關(guān)于物流的 可視化 。這個項目用到的可視化技術(shù)：有現(xiàn)在比較流行的webGL、可視化比較常見的D3.js;專門用于地理信息可視化leaflet.js技術(shù)以及原生的canvas。

在前端框架的選擇上，為了支持不同模塊之間的交互選用了vue.js，鑒于用戶在本地查看及分享能更加方便，在這里使用了electron框架。

　　 1基于Web的可視化技術(shù)選型

可視化項目最開始要考慮的一個問題就是用什么可視化技術(shù)來實現(xiàn)效果?

　 CSS

通常最簡單的方式是選擇CSS對作品進行美化，不僅簡單成本也最低。CSS的優(yōu)勢就是體積非常小，而且一下子就可以加載起來。

　 ECharts

如果常規(guī)的CSS不能滿足普通的效果，就要考慮用圖表庫。國內(nèi)比較流行的echart，比國外都會好很多，有非常多的文檔，而且還有在線可以調(diào)試的工具網(wǎng)頁版，如果對可視化控制的技術(shù)不是很強的話，可以選擇echart等這些成熟的圖表庫。

　　 D3、canvas

D3是基于SVG格式，它的一個優(yōu)點就是可以支持矢量縮放。比如你要做一個可視化的效果，但是客戶的需求是在縮放過程中不能出現(xiàn)鋸齒，那么你就可以選擇D3。如果需要做比較多的動畫，或者數(shù)據(jù)節(jié)點比較多，那你就可以選擇基于canvas的可視化效果。因為D3瀏覽器的框架是基于dom節(jié)點，如果你的數(shù)據(jù)節(jié)點比較多，比如超過幾千個幾萬個甚至十萬個那就沒辦法運行起來，那么就需要用canvas來寫一些圖表。

　　 webGL

如果有一些場景需要有非常多的數(shù)據(jù)源，可能一下子要帶動十萬個點，計算非常密集的時候，二維的數(shù)據(jù)的數(shù)據(jù)圖表不能滿足要求，這種情況下基于webGL的可視化是最符合要求的，因為webGL是通過GPU來進行計算，這樣能極大提升可視化作品運行速度。另外很多三維的展示場景只能選用webGL，目前三維用于數(shù)據(jù)可視化也是一種趨勢。

最終一個項目選擇什么樣的可視化技術(shù)還是需要根據(jù)項目的需求來看，如果這個項目比較簡單，最后如果用webGL做肯定相當(dāng)不劃算，可視化技術(shù)選型并沒有優(yōu)劣之分，具體看適用場景。甚至說，往往簡單的技術(shù)更實用一些，相同的時間和精力投入下去能產(chǎn)生更大的效果。

　　 2可視化作品概念草圖繪制

　　 草圖主要解決兩個問題：1.用戶的交互模式;2.數(shù)據(jù)流動的問題。 在這一階段你可以最大程度發(fā)揮個人的想象空間，把各類天馬行空的想法都寫下來，最后剔除成本較高和實現(xiàn)不了的部分。

① 總體界面

② 訂單調(diào)度甘特圖

草圖畫完后就是需求的分解，因為草圖是非常概念化的狀態(tài)，只能進行概念上的指示，最終的落實還需要對項目需求進行分解。

概念草圖：需求分解

我做這個項目的主題是物流可視化，在構(gòu)思四個模塊后，每個模塊分別表現(xiàn)什么樣的功能?每個功能用什么可視化手段支撐?都需要做一個詳細(xì)的分解。

比如其中一個模塊是績效考核層次的模塊，物流行業(yè)包括快遞員、物流站點，在分解的時候，就要對這兩個展示主體做各自不同的績效可視化展示。

再比如地理信息的展示，不同的物流站點、配送目的地，分析的需求就要把地理位置展現(xiàn)出來，然后用不同的可視化手段把不同的目的地，種類區(qū)分出來。

所以需求分解的目的是在概念草圖畫完后，細(xì)化這些想法然后固定下來，針對每個想法具體采用什么手段實現(xiàn)這些需求。

3原型設(shè)計

草圖離最后可視化效果可能非常遠(yuǎn)，這時候你需要用到原型繪制以驗證最終視覺效果是否滿意。繪制原型的專業(yè)軟件非常多，我個人偏向AI、PS這樣的繪圖軟件。

一般原型繪制是從低保真原型到高保真原型，我這里兩步變成一步了。能在有限的時間和資源下，以最快的速度查看原型能否達(dá)到最佳效果，而圖片處理軟件的速度無疑是最快的。

這個就是用Photoshop做的高保真原型。當(dāng)然中間實時的canvas立體化效果圖肯定不是用Photoshop畫的，而是用程序生成的。但是可以用Photoshop把它貼過來，邊上可以用Photoshop畫一個左側(cè)的控制面板，這樣兩塊兒拼起來就可以看到第二個模塊的視覺效果是不是達(dá)到了自己的預(yù)期。

這是一個靜態(tài)效果的高保真原型，左側(cè)和右側(cè)的交互模塊可以在圖片繪制軟件中直接畫，如果覺得最終效果還可以的話，編程實現(xiàn)可以用這個尺寸和顏色來操作。

中間的三維效果可以有兩種解決辦法：第一個最簡單，可以在網(wǎng)上找到現(xiàn)有的案例，把圖片扣進來放進去看是不是滿意;另外，如果平時有差不多類似的項目可以生成后放進去也是一樣。

4數(shù)據(jù)處理及開發(fā)環(huán)境配置

數(shù)據(jù)處理是為了提升最終程序的性能，避免跨文件查詢、計算，避免網(wǎng)頁加載多個csv文件導(dǎo)致載入時間變長。

為了提升可視化項目的交互效果，如果是有多個文件需要讀取，實時計算交互，建議合并成一個文件，特別是需要重新計算一個新的數(shù)據(jù)，預(yù)先計算好，就能大幅度提升效率。

開發(fā)環(huán)境配置

涉及到開發(fā)效率問題，開發(fā)環(huán)境需要考慮編輯器、打包&編譯的環(huán)境、第三方庫的管理這幾個因素。避免跨文件查詢、計算，避免網(wǎng)頁加載多個csv文件導(dǎo)致載入時間變長。

很多人剛開始接觸可視化或者前端開發(fā)的時候習(xí)慣直接開一個頁面，在head里面直接引入一個獨立的庫文件。這樣的缺點在于，每次都要拷貝一個第三方的庫文件，不太好管理，第二如果庫文件更新了這個不能自動更新，第三，程序?qū)懲旰笠矝]有壓縮，直接部署速度很慢。

如果預(yù)先配置好打包編輯環(huán)境，相對比較方便，每次直接引入一個像d3,這樣的第三方庫就可以。如果它更新，我的也會自動更新。網(wǎng)頁做完后也會自動壓縮，這樣分享效率提高很多。

　 5編碼開發(fā)

底層框架設(shè)計圖

我們配置好開發(fā)環(huán)境后根據(jù)前面的草圖構(gòu)思包括原型繪制，我們就形成了一個認(rèn)識，整個項目我是分4個模塊實現(xiàn)，每個模塊采用的技術(shù)心里都有底了。

第一個模塊概況透視需求，就是把所有物流分支點配送目的地，商家、以及快遞員路徑全部展示出來。最好還能提供用戶交互效果。最好的實現(xiàn)方式就是采用WebGL他可以提供三維的數(shù)據(jù)展示，同時帶動幾萬個點非常輕松。

第二個模塊我們要展示實時物流狀況，把每個快遞員實時地理位置展示出來，最好有一個C線拖影的效果。canvas最符合我們的需求，因為可以做二維的動畫，因為要展示地理信息，還需要用到D3地理投影功能。要實現(xiàn)這樣的效果我們可以分層繪制動畫。

可以把底圖邊界或者靜態(tài)地理位置分另外的層繪制，不需要刷新他，運動的部分用專門用一層canvas繪制他，每次更新運動部分，不更新靜止部分，這樣可以提升效率。

第三個模塊績效分析，績效分析模塊基于地圖做一個三維柱狀圖，解決了地圖底圖問題。可以用D3把現(xiàn)有地圖文件通過繪制成SVG再傳入three.js再拉伸，這樣操作可以支持分地區(qū)展示不同的高度。

基于地理位置的網(wǎng)點監(jiān)控模塊解決主要的難點是leaflet.js插件本身有事件捕獲值，它會重寫覆蓋掉現(xiàn)有事件，如果要在上面添加自定義交互需要覆蓋掉本身事件捕獲值。

網(wǎng)點監(jiān)控功能需求是展示地圖上各個網(wǎng)點，最好實現(xiàn)乘積的縮放功能，因為不能所有的點全部展示在可視范圍之內(nèi)，這樣當(dāng)視圖縮小的時候點的密集程度會覆蓋掉地圖，最好是能實現(xiàn)聚合分散效果。即地圖放大的時候點分散開來，地圖縮小的時候點能聚攏在一起。在一定范圍內(nèi)控制點的數(shù)量，用戶體驗會好點。

針對這個需求，地理展示的框架leaflet.js會是一個比較好的選擇，因為它是一個比較成熟的框架，能提供點的聚合分離效果，也能在每個點上做視頻加載效果都可以坐上去。

為了支撐4個模塊之間來回切換以及數(shù)據(jù)管理，我在vue.js框架里面引入數(shù)據(jù)狀態(tài)管理和路由的插件。現(xiàn)在這種單頁應(yīng)用，每次訪問都會跳到同一個頁面，為了支持不同模塊都可以進行瀏覽器展示，其中需要用路由插件來支持。

還有個比較關(guān)鍵的地方，由于每個模塊都用了動畫的效果，那么模塊之間在切換的時候就需要把動畫停掉，否則動畫之間會沖突導(dǎo)致瀏覽器崩潰。

6作品部署

作品做完后就剩下作品的部署和分享，最簡單的方式是放到github上，不用另外購買域名和服務(wù)器，github支持個人靜態(tài)網(wǎng)頁的部署。如果沒有用過github的同學(xué)可以先注冊一個賬號，網(wǎng)上搜索一下“怎么用github做一個blog”，操作過程非常簡單。

如果可視化作品數(shù)據(jù)量非常大，用網(wǎng)絡(luò)分享就不太現(xiàn)實，可以用electron打個包，在本地即可運行，然后發(fā)給想要欣賞作品的人。我已經(jīng)把代碼放到了github上，有興趣的同學(xué)可以下載看一下。

注:本文來源自東湖大數(shù)據(jù)交易中心，作者：郭偉，版權(quán)著作權(quán)屬原創(chuàng)者所有。欲了解更多大數(shù)據(jù)行業(yè)相關(guān)資訊，可搜索數(shù)據(jù)觀(中國大數(shù)據(jù)產(chǎn)業(yè)觀察網(wǎng)www.cbdio.com)進入查看。

　　 ?點擊進入 阿里云 在數(shù)據(jù)觀的企業(yè)欄目>>>

責(zé)任編輯：湯德正