作者：劉小超

背景

大數(shù)據(jù)可視化做為科技與藝術(shù)的交叉點(diǎn)，研究他可以更好的為業(yè)務(wù)和發(fā)展帶來(lái)持續(xù)的推進(jìn)力。而通過(guò)具體的案例，可以更深入的理解和使用大數(shù)據(jù)可視化。大數(shù)據(jù)可視化中數(shù)據(jù)處理、流程、工具等要點(diǎn)都可以在案例中得到一個(gè)很好的研究和學(xué)習(xí)。我們?cè)谑占罅繑?shù)據(jù)分析比較后，確定使用成都地鐵三號(hào)線流量數(shù)據(jù)做為案例的數(shù)據(jù)源。

分析數(shù)據(jù)

成都地鐵三號(hào)線流量數(shù)據(jù)拿到時(shí)的數(shù)據(jù)是一個(gè)二維表格，記錄了各個(gè)站點(diǎn)在不同時(shí)間點(diǎn)的流量。但直接來(lái)看這個(gè)數(shù)據(jù)表格的話，還有以下問題：

• 數(shù)據(jù)過(guò)多，難以閱讀和理解
• 數(shù)據(jù)之間對(duì)應(yīng)關(guān)系無(wú)法直接看到
• 無(wú)法與現(xiàn)有地鐵站直接對(duì)應(yīng)

在分析數(shù)據(jù)后，我們發(fā)現(xiàn)，他是隨時(shí)間而變化的連續(xù)數(shù)據(jù)，所以使用折線圖非常適用。折線圖可以很方便顯示在相等時(shí)間間隔下數(shù)據(jù)的趨勢(shì)。先直接使用 Excel 的圖表功能來(lái)生成一下。

從上圖來(lái)看，會(huì)比之前的數(shù)據(jù)要容易理解。但從大數(shù)據(jù)可視化設(shè)計(jì)角度來(lái)看，還有以下不足：

• 辨識(shí)度不高，除去變化特別強(qiáng)烈的站點(diǎn)，其它站點(diǎn)線條混在一起
• 無(wú)法產(chǎn)生與真實(shí)站點(diǎn)的關(guān)聯(lián)
• 視覺效果還不夠有沖擊力
• 如果能有動(dòng)效就更好了

數(shù)據(jù)展示方案

為解決以上問題，經(jīng)過(guò)大家腦暴決定引入真實(shí)地鐵地圖，在地鐵線路上來(lái)動(dòng)態(tài)展示流量變化。然后我們按這套方案設(shè)計(jì)出交互稿與視覺稿。引入地鐵地圖后我們解決了辨識(shí)度不夠的問題，每個(gè)站點(diǎn)都會(huì)有對(duì)應(yīng)的光圈和線條來(lái)展示流量，這些數(shù)據(jù)與真實(shí)站點(diǎn)的關(guān)聯(lián)性也更強(qiáng)。專業(yè)視覺設(shè)計(jì)過(guò)后地圖效果在視覺沖擊力也可以給人一個(gè)驚艷的感覺。再通過(guò)H5技術(shù)增加了各種動(dòng)效，讓整個(gè)效果更大生動(dòng)和有交互性，產(chǎn)生更佳的用戶體驗(yàn)。

（交互稿）

（視覺稿）

因?yàn)闀r(shí)間關(guān)系，制作案例的時(shí)間比較緊，在對(duì)業(yè)內(nèi)開源地圖的相關(guān)項(xiàng)目比較后，我們確定基于百度地圖 API 和 Mapv （地理信息可視化開源庫(kù)）來(lái)實(shí)現(xiàn)整個(gè)大數(shù)據(jù)可視化的設(shè)計(jì)思想。

方案開發(fā)實(shí)現(xiàn)

在分析數(shù)據(jù)源、視覺稿和基本框架后，在實(shí)現(xiàn)上分為以下三層來(lái)實(shí)現(xiàn)。

其中，動(dòng)態(tài)圖表展示層的線條、圓圈動(dòng)態(tài)效果，是開發(fā)的中重點(diǎn)和難點(diǎn)。

線條

首先，線條數(shù)據(jù)是只能通過(guò)站點(diǎn)的流量來(lái)影射，但每一條的線條的路徑數(shù)據(jù)我們目前并沒有。所以只能先做一個(gè)小工具來(lái)手工繪制線條路徑。

（折線生成器）

折線生成器主要記錄生成線條數(shù)據(jù)的折點(diǎn)，但 Mapv 還不能創(chuàng)建補(bǔ)間點(diǎn)，在拼命喚醒各種三角函數(shù)知識(shí)后，寫出以下函數(shù)來(lái)生成相關(guān)補(bǔ)間點(diǎn)。

/***
 * 構(gòu)建補(bǔ)間點(diǎn)
 * @param {Array} p1 點(diǎn)1，要有X，Y值
 * @param {Array} p2 點(diǎn)1，要有X，Y值
 * @return {Array} 返回兩點(diǎn)間的點(diǎn)集合數(shù)組
 */
function getPoint(p1, p2) {
//      JS Math對(duì)象中的三角函數(shù)介紹  //blog.sina.com.cn/s/blog_760e9df90101mtab.html
//        三角形斜邊分段長(zhǎng)
    var f = 0.0001;
//        要返回的數(shù)據(jù)
    var arr = [];
//        console.log('p1:' + p1[0] + ',' + p1[1]);
//        console.log('p2:' + p2[0] + ',' + p2[1]);
//        對(duì)邊
    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);
//        分段斜邊 對(duì)應(yīng)的 對(duì)邊
    var Xn = f * Math.sin(Ca);
//        console.log('Xn :' + Xn);
//        分段斜邊 對(duì)應(yīng)的 臨邊
    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;
}

通過(guò)這種方式來(lái)生成從站點(diǎn)流出的線條，可以更直觀的表現(xiàn)流量情況，但因?yàn)?Mapv 的限制，不能控制單個(gè)線條的顯示隱藏，所以線條數(shù)量還未能與流量做成映射關(guān)系。

定時(shí)器

而圓圈的大小則可以與流量做到映射關(guān)系。但這里還要與時(shí)間軸關(guān)聯(lián)起來(lái)，所以要使用定時(shí)器。以前定時(shí)器都是使用 setInterval() 來(lái)實(shí)現(xiàn)，現(xiàn)在可以用 requestAnimationFrame() 來(lái)實(shí)現(xiàn)，但還要對(duì)他做一改功能加強(qiáng)，來(lái)實(shí)現(xiàn)每秒循環(huán)次數(shù)的可配置。

/***
 * 定時(shí)執(zhí)行器
 */
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) {
        // 這里不能簡(jiǎn)單then=now，否則還會(huì)出現(xiàn)上邊簡(jiǎn)單做法的細(xì)微時(shí)間差問題。例如fps=10，每幀100ms，而現(xiàn)在每16ms（60fps）執(zhí)行一次draw。16*7=112>100，需要7次才實(shí)際繪制一次。這個(gè)情況下，實(shí)際10幀需要112*10=1120ms>1000ms才繪制完成。
        then = now - (delta % interval);
        draw(); // 要定時(shí)執(zhí)行的方法
    }
}

另外，文字?jǐn)?shù)據(jù)展示層的數(shù)據(jù)變化也對(duì)應(yīng)到定時(shí)器中。

地圖定制

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

坑

當(dāng)然還遇到了不少坑，走了不少?gòu)澛贰Ｖ饕龅揭韵聨讉€(gè)坑：

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

總結(jié)

數(shù)據(jù)可視化的定義在不同人眼中是不一樣的。我們通過(guò)這次成都地鐵三號(hào)線流量數(shù)據(jù)案例的演練，對(duì)整個(gè)流程中數(shù)據(jù)挖掘、提取、表現(xiàn)、動(dòng)效等都有了進(jìn)一步的研究和學(xué)習(xí)。

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

本文轉(zhuǎn)載自：36大數(shù)據(jù)