作者：劉小超

背景

大數據可視化做為科技與藝術的交叉點，研究他可以更好的為業務和發展帶來持續的推進力。而通過具體的案例，可以更深入的理解和使用大數據可視化。大數據可視化中數據處理、流程、工具等要點都可以在案例中得到一個很好的研究和學習。我們在收集大量數據分析比較后，確定使用成都地鐵三號線流量數據做為案例的數據源。

分析數據

成都地鐵三號線流量數據拿到時的數據是一個二維表格，記錄了各個站點在不同時間點的流量。但直接來看這個數據表格的話，還有以下問題：

• 數據過多，難以閱讀和理解
• 數據之間對應關系無法直接看到
• 無法與現有地鐵站直接對應

在分析數據后，我們發現，他是隨時間而變化的連續數據，所以使用折線圖非常適用。折線圖可以很方便顯示在相等時間間隔下數據的趨勢。先直接使用 Excel 的圖表功能來生成一下。

從上圖來看，會比之前的數據要容易理解。但從大數據可視化設計角度來看，還有以下不足：

• 辨識度不高，除去變化特別強烈的站點，其它站點線條混在一起
• 無法產生與真實站點的關聯
• 視覺效果還不夠有沖擊力
• 如果能有動效就更好了

數據展示方案

為解決以上問題，經過大家腦暴決定引入真實地鐵地圖，在地鐵線路上來動態展示流量變化。然后我們按這套方案設計出交互稿與視覺稿。引入地鐵地圖后我們解決了辨識度不夠的問題，每個站點都會有對應的光圈和線條來展示流量，這些數據與真實站點的關聯性也更強。專業視覺設計過后地圖效果在視覺沖擊力也可以給人一個驚艷的感覺。再通過H5技術增加了各種動效，讓整個效果更大生動和有交互性，產生更佳的用戶體驗。

（交互稿）

（視覺稿）

因為時間關系，制作案例的時間比較緊，在對業內開源地圖的相關項目比較后，我們確定基于百度地圖 API 和 Mapv （地理信息可視化開源庫）來實現整個大數據可視化的設計思想。

方案開發實現

在分析數據源、視覺稿和基本框架后，在實現上分為以下三層來實現。

其中，動態圖表展示層的線條、圓圈動態效果，是開發的中重點和難點。

線條

首先，線條數據是只能通過站點的流量來影射，但每一條的線條的路徑數據我們目前并沒有。所以只能先做一個小工具來手工繪制線條路徑。

（折線生成器）

折線生成器主要記錄生成線條數據的折點，但 Mapv 還不能創建補間點，在拼命喚醒各種三角函數知識后，寫出以下函數來生成相關補間點。

/***
 * 構建補間點
 * @param {Array} p1 點1，要有X，Y值
 * @param {Array} p2 點1，要有X，Y值
 * @return {Array} 返回兩點間的點集合數組
 */
function getPoint(p1, p2) {
//      JS Math對象中的三角函數介紹  //blog.sina.com.cn/s/blog_760e9df90101mtab.html
//        三角形斜邊分段長
    var f = 0.0001;
//        要返回的數據
    var arr = [];
//        console.log('p1:' + p1[0] + ',' + p1[1]);
//        console.log('p2:' + p2[0] + ',' + p2[1]);
//        對邊
    var Xz = p2[0] - p1[0];
//        console.log('Xz :' + Xz);
//        臨邊
    var Yz = p2[1] - p1[1];
//        console.log('Yz :' + Yz);
//        A角度
    var Ca = Math.atan(Math.abs(Xz / Yz));
//        console.log('Ca :' + Ca);
//        斜邊
    var Z = Xz / Math.sin(Ca);
//        console.log('Z :' + Z);
//        分段斜邊 對應的 對邊
    var Xn = f * Math.sin(Ca);
//        console.log('Xn :' + Xn);
//        分段斜邊 對應的 臨邊
    var Yn = f * Math.cos(Ca);
//        console.log('Yn :' + Yn);
    var nums = parseInt(Math.abs(Z / f));
//        console.log('nums :' + nums);
    if (Xz < 0) {
        Xn = -Xn;
    }
    if (Yz < 0) {
        Yn = -Yn;
    }
    for (var i = 1; i <= nums; i++) {
        arr.push([(p1[0] + (Xn * i)), (p1[1] + (Yn * i))]);
    }
    return arr;
}

通過這種方式來生成從站點流出的線條，可以更直觀的表現流量情況，但因為 Mapv 的限制，不能控制單個線條的顯示隱藏，所以線條數量還未能與流量做成映射關系。

定時器

而圓圈的大小則可以與流量做到映射關系。但這里還要與時間軸關聯起來，所以要使用定時器。以前定時器都是使用 setInterval() 來實現，現在可以用 requestAnimationFrame() 來實現，但還要對他做一改功能加強，來實現每秒循環次數的可配置。

/***
 * 定時執行器
 */
var fps = 4;
var now;
var then = Date.now();
var interval = 1000 / fps;
var delta;
function tick() {
    requestAnimationFrame(tick);
    now = Date.now();
    delta = now - then;
    if (delta > interval) {
        // 這里不能簡單then=now，否則還會出現上邊簡單做法的細微時間差問題。例如fps=10，每幀100ms，而現在每16ms（60fps）執行一次draw。16*7=112>100，需要7次才實際繪制一次。這個情況下，實際10幀需要112*10=1120ms>1000ms才繪制完成。
        then = now - (delta % interval);
        draw(); // 要定時執行的方法
    }
}

另外，文字數據展示層的數據變化也對應到定時器中。

地圖定制

最后，背景展示層的地圖直接使用百度地圖底圖編輯工具實現即可。只要編輯好地圖樣式，然后獲取樣式 JSON ，然后調用 JSAPI 的 setMapStyle 方法。

坑

當然還遇到了不少坑，走了不少彎路。主要遇到以下幾個坑：

• Mapv 開發文檔不全，作者只給了些 Demo ，具體應用只能自己摸索。
• Mapv 只能把所有線條生成到一個圖層中，無法精確控制線條，如果分不同圖層顯示線條，電腦內存立馬就不夠用了。
• Mapv 畫不出內部漸變的圓圈，只能用模糊邊緣來模擬。

總結

數據可視化的定義在不同人眼中是不一樣的。我們通過這次成都地鐵三號線流量數據案例的演練，對整個流程中數據挖掘、提取、表現、動效等都有了進一步的研究和學習。

同時我們也在思考，有沒有可能在單個案例之上，做出一個通用的數據可視化工具，而不只是專門為單獨的案例做開發。而集合數據處理、流程、工具、展示的整體可視化工具，就是我們的下一下努力方向，敬請期待。

本文轉載自：36大數據