科技獵親述：阿里天池數(shù)據可視化大賽特別獎作品制作全程
11月16日晚八點，大數(shù)據百人會沙龍第六期主講嘉賓——“2016阿里巴巴天池數(shù)據可視化大賽”專業(yè)組媒體特別獎獲得者郭偉，分享其獲獎作品“最熟悉的陌生人”交互可視化項目“智慧物流”的制作全過程。想要炫到沒朋友，或許你該學學這個↓↓↓
(以下是沙龍實錄，以嘉賓第一人稱講述)
今天給大家分享的是我參加阿里巴巴天池數(shù)據可視化大賽的一個項目，主題是關于物流的 可視化 。這個項目用到的可視化技術：有現(xiàn)在比較流行的webGL、可視化比較常見的D3.js;專門用于地理信息可視化leaflet.js技術以及原生的canvas。
在前端框架的選擇上，為了支持不同模塊之間的交互選用了vue.js，鑒于用戶在本地查看及分享能更加方便，在這里使用了electron框架。
1基于Web的可視化技術選型
可視化項目最開始要考慮的一個問題就是用什么可視化技術來實現(xiàn)效果?
CSS
通常最簡單的方式是選擇CSS對作品進行美化，不僅簡單成本也最低。CSS的優(yōu)勢就是體積非常小，而且一下子就可以加載起來。
ECharts
如果常規(guī)的CSS不能滿足普通的效果，就要考慮用圖表庫。國內比較流行的echart，比國外都會好很多，有非常多的文檔，而且還有在線可以調試的工具網頁版，如果對可視化控制的技術不是很強的話，可以選擇echart等這些成熟的圖表庫。
D3、canvas
D3是基于SVG格式，它的一個優(yōu)點就是可以支持矢量縮放。比如你要做一個可視化的效果，但是客戶的需求是在縮放過程中不能出現(xiàn)鋸齒，那么你就可以選擇D3。如果需要做比較多的動畫，或者數(shù)據節(jié)點比較多，那你就可以選擇基于canvas的可視化效果。因為D3瀏覽器的框架是基于dom節(jié)點，如果你的數(shù)據節(jié)點比較多，比如超過幾千個幾萬個甚至十萬個那就沒辦法運行起來，那么就需要用canvas來寫一些圖表。
webGL
如果有一些場景需要有非常多的數(shù)據源，可能一下子要帶動十萬個點，計算非常密集的時候，二維的數(shù)據的數(shù)據圖表不能滿足要求，這種情況下基于webGL的可視化是最符合要求的，因為webGL是通過GPU來進行計算，這樣能極大提升可視化作品運行速度。另外很多三維的展示場景只能選用webGL，目前三維用于數(shù)據可視化也是一種趨勢。
最終一個項目選擇什么樣的可視化技術還是需要根據項目的需求來看，如果這個項目比較簡單，最后如果用webGL做肯定相當不劃算，可視化技術選型并沒有優(yōu)劣之分，具體看適用場景。甚至說，往往簡單的技術更實用一些，相同的時間和精力投入下去能產生更大的效果。
2可視化作品概念草圖繪制
草圖主要解決兩個問題：1.用戶的交互模式;2.數(shù)據流動的問題。 在這一階段你可以最大程度發(fā)揮個人的想象空間，把各類天馬行空的想法都寫下來，最后剔除成本較高和實現(xiàn)不了的部分。
① 總體界面
② 訂單調度甘特圖
草圖畫完后就是需求的分解，因為草圖是非常概念化的狀態(tài)，只能進行概念上的指示，最終的落實還需要對項目需求進行分解。
概念草圖：需求分解
我做這個項目的主題是物流可視化，在構思四個模塊后，每個模塊分別表現(xiàn)什么樣的功能?每個功能用什么可視化手段支撐?都需要做一個詳細的分解。
比如其中一個模塊是績效考核層次的模塊，物流行業(yè)包括快遞員、物流站點，在分解的時候，就要對這兩個展示主體做各自不同的績效可視化展示。
再比如地理信息的展示，不同的物流站點、配送目的地，分析的需求就要把地理位置展現(xiàn)出來，然后用不同的可視化手段把不同的目的地，種類區(qū)分出來。
所以需求分解的目的是在概念草圖畫完后，細化這些想法然后固定下來，針對每個想法具體采用什么手段實現(xiàn)這些需求。
3原型設計
草圖離最后可視化效果可能非常遠，這時候你需要用到原型繪制以驗證最終視覺效果是否滿意。繪制原型的專業(yè)軟件非常多，我個人偏向AI、PS這樣的繪圖軟件。
一般原型繪制是從低保真原型到高保真原型，我這里兩步變成一步了。能在有限的時間和資源下，以最快的速度查看原型能否達到最佳效果，而圖片處理軟件的速度無疑是最快的。
這個就是用Photoshop做的高保真原型。當然中間實時的canvas立體化效果圖肯定不是用Photoshop畫的，而是用程序生成的。但是可以用Photoshop把它貼過來，邊上可以用Photoshop畫一個左側的控制面板，這樣兩塊兒拼起來就可以看到第二個模塊的視覺效果是不是達到了自己的預期。
這是一個靜態(tài)效果的高保真原型，左側和右側的交互模塊可以在圖片繪制軟件中直接畫，如果覺得最終效果還可以的話，編程實現(xiàn)可以用這個尺寸和顏色來操作。
中間的三維效果可以有兩種解決辦法：第一個最簡單，可以在網上找到現(xiàn)有的案例，把圖片扣進來放進去看是不是滿意;另外，如果平時有差不多類似的項目可以生成后放進去也是一樣。
4數(shù)據處理及開發(fā)環(huán)境配置
數(shù)據處理是為了提升最終程序的性能，避免跨文件查詢、計算，避免網頁加載多個csv文件導致載入時間變長。
為了提升可視化項目的交互效果，如果是有多個文件需要讀取，實時計算交互，建議合并成一個文件，特別是需要重新計算一個新的數(shù)據，預先計算好，就能大幅度提升效率。
開發(fā)環(huán)境配置
涉及到開發(fā)效率問題，開發(fā)環(huán)境需要考慮編輯器、打包&編譯的環(huán)境、第三方庫的管理這幾個因素。避免跨文件查詢、計算，避免網頁加載多個csv文件導致載入時間變長。
很多人剛開始接觸可視化或者前端開發(fā)的時候習慣直接開一個頁面，在head里面直接引入一個獨立的庫文件。這樣的缺點在于，每次都要拷貝一個第三方的庫文件，不太好管理，第二如果庫文件更新了這個不能自動更新，第三，程序寫完后也沒有壓縮，直接部署速度很慢。
如果預先配置好打包編輯環(huán)境，相對比較方便，每次直接引入一個像d3,這樣的第三方庫就可以。如果它更新，我的也會自動更新。網頁做完后也會自動壓縮，這樣分享效率提高很多。
5編碼開發(fā)
底層框架設計圖
我們配置好開發(fā)環(huán)境后根據前面的草圖構思包括原型繪制，我們就形成了一個認識，整個項目我是分4個模塊實現(xiàn)，每個模塊采用的技術心里都有底了。
第一個模塊概況透視需求，就是把所有物流分支點配送目的地，商家、以及快遞員路徑全部展示出來。最好還能提供用戶交互效果。最好的實現(xiàn)方式就是采用WebGL他可以提供三維的數(shù)據展示，同時帶動幾萬個點非常輕松。
第二個模塊我們要展示實時物流狀況，把每個快遞員實時地理位置展示出來，最好有一個C線拖影的效果。canvas最符合我們的需求，因為可以做二維的動畫，因為要展示地理信息，還需要用到D3地理投影功能。要實現(xiàn)這樣的效果我們可以分層繪制動畫。
可以把底圖邊界或者靜態(tài)地理位置分另外的層繪制，不需要刷新他，運動的部分用專門用一層canvas繪制他，每次更新運動部分，不更新靜止部分，這樣可以提升效率。
第三個模塊績效分析，績效分析模塊基于地圖做一個三維柱狀圖，解決了地圖底圖問題。可以用D3把現(xiàn)有地圖文件通過繪制成SVG再傳入three.js再拉伸，這樣操作可以支持分地區(qū)展示不同的高度。
基于地理位置的網點監(jiān)控模塊解決主要的難點是leaflet.js插件本身有事件捕獲值，它會重寫覆蓋掉現(xiàn)有事件，如果要在上面添加自定義交互需要覆蓋掉本身事件捕獲值。
網點監(jiān)控功能需求是展示地圖上各個網點，最好實現(xiàn)乘積的縮放功能，因為不能所有的點全部展示在可視范圍之內，這樣當視圖縮小的時候點的密集程度會覆蓋掉地圖，最好是能實現(xiàn)聚合分散效果。即地圖放大的時候點分散開來，地圖縮小的時候點能聚攏在一起。在一定范圍內控制點的數(shù)量，用戶體驗會好點。
針對這個需求，地理展示的框架leaflet.js會是一個比較好的選擇，因為它是一個比較成熟的框架，能提供點的聚合分離效果，也能在每個點上做視頻加載效果都可以坐上去。
為了支撐4個模塊之間來回切換以及數(shù)據管理，我在vue.js框架里面引入數(shù)據狀態(tài)管理和路由的插件。現(xiàn)在這種單頁應用，每次訪問都會跳到同一個頁面，為了支持不同模塊都可以進行瀏覽器展示，其中需要用路由插件來支持。
還有個比較關鍵的地方，由于每個模塊都用了動畫的效果，那么模塊之間在切換的時候就需要把動畫停掉，否則動畫之間會沖突導致瀏覽器崩潰。
6作品部署
作品做完后就剩下作品的部署和分享，最簡單的方式是放到github上，不用另外購買域名和服務器，github支持個人靜態(tài)網頁的部署。如果沒有用過github的同學可以先注冊一個賬號，網上搜索一下“怎么用github做一個blog”，操作過程非常簡單。
如果可視化作品數(shù)據量非常大，用網絡分享就不太現(xiàn)實，可以用electron打個包，在本地即可運行，然后發(fā)給想要欣賞作品的人。我已經把代碼放到了github上，有興趣的同學可以下載看一下。
責任編輯：湯德正
本文被轉載1次
首發(fā)媒體
| 轉發(fā)媒體
