又炫又酷又炸的數(shù)據(jù)可視化前端開發(fā)揭秘

隨著互聯(lián)網(wǎng)在各行各業(yè)的影響不斷深入，數(shù)據(jù)規(guī)模越來越大，各企業(yè)也越來越重視數(shù)據(jù)的價(jià)值。作為一家專業(yè)的數(shù)據(jù)智能公司，個(gè)推從消息推送服務(wù)起家，經(jīng)過多年的持續(xù)耕耘，積累沉淀了海量數(shù)據(jù)，在數(shù)據(jù)可視化領(lǐng)域也開展了深入的探索和實(shí)踐。

個(gè)推的數(shù)據(jù)可視化探索和應(yīng)用由需求出發(fā)，從基于開源平臺到結(jié)合個(gè)性化需求進(jìn)行定制化開發(fā)，打造出個(gè)推實(shí)時(shí)消息推送下發(fā)圖，人群分布熱力圖等優(yōu)秀數(shù)據(jù)可視化作品。這一過程中，個(gè)推積累沉淀了大量的數(shù)據(jù)可視化組件，打磨了自己的數(shù)據(jù)可視化技術(shù)能力。其中，個(gè)推熱力圖正應(yīng)用在智慧城市、人口空間規(guī)劃、公共服務(wù)等領(lǐng)域，為其提供強(qiáng)大的數(shù)據(jù)支撐。

個(gè)推消息下發(fā)圖

個(gè)推打造的湖濱商圈區(qū)域人口熱力圖

本文就和大家分享一下個(gè)推的數(shù)據(jù)可視化實(shí)踐、遇到的問題及解決思路，希望大家能從中有所受益。

一、數(shù)據(jù)可視化的構(gòu)成

數(shù)據(jù)可視化由四類可視化元素構(gòu)成：背景信息、標(biāo)尺、坐標(biāo)系、視覺暗示。

1.1 背景信息

背景信息就是標(biāo)題、度量單位、注釋等附加類的信息。主要是為了幫助大屏受眾更好地理解相關(guān)背景信息，即5W信息：何人（who）、何事（what）、何時(shí)（when）、何地（where）、為何（why）。

1.2 標(biāo)尺

標(biāo)尺主要用來衡量不同方向和維度上的數(shù)據(jù)大小，常用的有數(shù)字標(biāo)尺、分類標(biāo)尺、時(shí)間標(biāo)尺等，類似我們熟悉的刻度。

1.3 坐標(biāo)系

坐標(biāo)系有一個(gè)結(jié)構(gòu)化的空間，還有指定圖形和顏色畫在哪里的規(guī)則，用于編碼數(shù)據(jù)的時(shí)候，將物體放到該空間中的某一特定位置，它賦予X、Y坐標(biāo)或經(jīng)緯度以意義。常見的坐標(biāo)系有直角坐標(biāo)系、極坐標(biāo)系、地理坐標(biāo)系。餅圖里面用的是極坐標(biāo)系；柱狀圖里面有X軸、Y軸，就是直角坐標(biāo)系；熱力圖里面用的則是地理坐標(biāo)圖。

1.4 視覺暗示

視覺暗示則是用來編碼數(shù)據(jù)的元素，如位置、長度、大小、方向等。1985年，貝爾實(shí)驗(yàn)室發(fā)布了視覺元素的暗示排序清單。如清單所示，從上往下，大腦感知系統(tǒng)對這些符號、位置感知有不同的敏感程度，從最高到最低依次是：位置、長度、角度、方向、形狀、面積/體積、色相與飽和度。

貝爾實(shí)驗(yàn)室于1985年發(fā)布的視覺元素暗示排序清單

二、數(shù)據(jù)可視化的應(yīng)用

根據(jù)不同的數(shù)據(jù)結(jié)構(gòu)類型，數(shù)據(jù)可視化的應(yīng)用也不同，常用的有統(tǒng)計(jì)數(shù)據(jù)圖表、關(guān)系數(shù)據(jù)圖表、地理空間數(shù)據(jù)圖表。

2.1 統(tǒng)計(jì)數(shù)據(jù)圖表

常用的統(tǒng)計(jì)數(shù)據(jù)圖表有線形圖、柱狀圖、餅圖、雷達(dá)圖。其中，線形圖中的視覺元素為方向，我們從中感知到的是變化趨勢；柱狀圖中的視覺元素為長度，我們從中感知到的是數(shù)據(jù)所代表的值的大小；而餅圖和雷達(dá)圖中的視覺元素則分別是角度和面積。

2.2 關(guān)系數(shù)據(jù)圖表

常用的關(guān)系數(shù)據(jù)圖表有關(guān)系圖、流程圖、樹圖和?；鶊D。關(guān)系數(shù)據(jù)圖表最重要的就是關(guān)系。從渲染層面來說，關(guān)系圖存在兩個(gè)最重要的難點(diǎn)：布局和聚類。布局意即如何分布要展現(xiàn)的數(shù)據(jù)，關(guān)系圖、流程圖、樹圖等，都只是布局不同；聚類則是要將真實(shí)的關(guān)系進(jìn)行聚類模擬和可視化呈現(xiàn)出來，比如，哪些實(shí)體屬于同一類別、相距比較近、或有從屬關(guān)系等。

2.3 地理空間數(shù)據(jù)圖表

地理空間數(shù)據(jù)可視化圖表有散點(diǎn)圖、路徑圖、熱力圖、下發(fā)圖等。地理空間數(shù)據(jù)圖表的特點(diǎn)就是基于地理坐標(biāo)系。

現(xiàn)在業(yè)內(nèi)對地理空間數(shù)據(jù)可視化的研究非常多，像高德地圖的Loca、Uber聯(lián)合mapbox推出的kepler.gl等，都是非常優(yōu)秀的地理空間數(shù)據(jù)可視化應(yīng)用案例。

英國某城市間工作跟住宅的通勤地圖 運(yùn)用了方向和顏色的視覺暗示

kepler.gl中展示的某城市地震密度圖 運(yùn)用了位置、時(shí)間和顏色的視覺暗示

除以上四種常用的數(shù)據(jù)可視化圖表之外，其實(shí)還有很多其他類型的圖表，像詞云圖、時(shí)間序列數(shù)據(jù)圖等，這里就不再一一贅述。

三、地圖的基本原理

在對地理空間數(shù)據(jù)進(jìn)行可視化的實(shí)踐中，對地圖的渲染是非常重要的一步。

地圖渲染步驟

上面這張圖清晰地呈現(xiàn)了地圖渲染的步驟：

· 首先，將地球通過墨卡托投影變成平面地圖；

· 然后，將平面地圖根據(jù)現(xiàn)實(shí)場景，分成一層層不同精度的地圖，排列成為一個(gè)金字塔狀；

· 最終，將拼湊起這張地圖的細(xì)節(jié)分割成為一張張地圖瓦片。

地圖渲染涉及到兩個(gè)重要名詞：地圖投影和地圖瓦片，下面對這兩個(gè)名詞進(jìn)行了詳細(xì)解釋：

3.1 地圖投影

按照投影形式的不同，地圖投影有圓錐投影、圓柱投影、方位投影三種；根據(jù)投影方向的位置又可以分為正軸投影、橫軸投影、斜軸投影三種。這里要說的是，因?yàn)橥队?，地圖就不可能被精準(zhǔn)還原，投影展開后的平面地圖肯定會有一個(gè)變形，根據(jù)變形又可以分為等角投影、等面積投影、任意投影等。

根據(jù)不同的地圖使用場景，需要選擇不同的投影算法，現(xiàn)在很多投影算法都是現(xiàn)成的，不需要自己手動寫。其中，等角投影是用得比較普遍的一種，其中的墨卡托投影，則是現(xiàn)在地圖廠商使用較多的一種地圖投影算法。

不同的地圖投影方式

3.2 地圖瓦片

經(jīng)過Web墨卡托投影后，地圖就變?yōu)槠矫娴囊粡埖貓D。因?yàn)橛袝r(shí)候我們需要看宏觀的地圖信息（如世界地圖里每個(gè)國家的國界），有時(shí)候又要看很微觀的地圖信息（如導(dǎo)航時(shí)道路的路況信息）。為此，我們需要對這張地圖進(jìn)行等級切分。

地圖瓦片的金字塔坐標(biāo)體系

在最高級（zoom=0），需要的信息最少，只需保留最重要的宏觀信息，因此用一張256x256像素的圖片表示即可；在下一級（zoom=1），信息量變多，用一張512x512像素的圖片表示；以此類推，級別越低的像素越高，下一級的像素是當(dāng)前級的4倍。這樣，從最高層級往下到最低層級就形成了一個(gè)金字塔坐標(biāo)體系。

對每張圖片，我們將其切分為256x256的圖片，成為瓦片（Tile）。這樣，在最高級（zoom=0）時(shí)，只有一個(gè)瓦片；在下一級（zoom=1）時(shí)，有4個(gè)瓦片；在下一級（zoom=2）時(shí)，有16個(gè)瓦片，以此類推。

四、個(gè)推數(shù)據(jù)可視化實(shí)踐

個(gè)推的數(shù)據(jù)可視化建設(shè)有下發(fā)圖、熱力圖等。

1)?個(gè)推消息下發(fā)圖?實(shí)時(shí)展現(xiàn)了個(gè)推當(dāng)天累計(jì)消息下發(fā)量、應(yīng)用下發(fā)群體畫像（包括性別比例、年齡段分布、當(dāng)日應(yīng)用下發(fā)城市Top5等）。

個(gè)推消息下發(fā)圖

2)?個(gè)推區(qū)域人口熱力圖?則對區(qū)域人口分布、人口性別比例、人口年齡段等進(jìn)行了數(shù)據(jù)可視化呈現(xiàn)。

個(gè)推打造的湖濱商圈區(qū)域人口熱力圖

接下來，就以下發(fā)圖和熱力圖為例，來為大家剖析下個(gè)推的數(shù)據(jù)可視化實(shí)踐過程。

4.1 前期技術(shù)選型

從效率和經(jīng)濟(jì)角度考慮，我們首先調(diào)研了一下現(xiàn)成的方案是否能滿足需求。

方案一：地圖應(yīng)用
前面講過，地圖是以地圖瓦片的形式渲染出來的，地圖應(yīng)用不能實(shí)現(xiàn)設(shè)計(jì)稿中的效果，所以該方案不可行。

方案二：圖表應(yīng)用
ECharts這類綜合的圖表庫，能基本實(shí)現(xiàn)一些地圖的效果，并且能切換視角，配置簡單；但ECharts中線的效果非常有限，達(dá)不到設(shè)計(jì)稿中想要的漸變以及落地效果，也只能被忍痛放棄。

方案三：D3.js
D3.js非常優(yōu)秀，我們稱它是圖表界的jQuery，基本能實(shí)現(xiàn)我們想要的效果。但是，它也存在一個(gè)問題，即它是使用SVG的。SVG是一種矢量圖格式，可以保護(hù)圖片呈現(xiàn)時(shí)不失真，但是如果用來實(shí)現(xiàn)動畫效果，則存在性能問題。

這里，我們將SVG和Canvas進(jìn)行了性能對比：當(dāng)飛行數(shù)量達(dá)到100時(shí)，SVG的動畫幀數(shù)FPS只有12-43，CPU占用很高；Canvas則好很多，基本上是42-60FPS，CPU占用率是20%-30%，在內(nèi)存占用等各方面都完勝。

飛行數(shù)量達(dá)100時(shí)SVG和Canvas性能對比

綜合來看，以上三種方案都不完美。所以，最終，我們決定用自己的方式來實(shí)現(xiàn)。

4.2 第一步：分層

首先，如下圖，在對地理數(shù)據(jù)進(jìn)行渲染之前，我們先根據(jù)數(shù)據(jù)類型進(jìn)行了分層：

1) 地圖底層；

2) 熱力圖層；

3) 飛線層；

4) 其他任何地理空間數(shù)據(jù)層，比如柱狀圖、交通圖等。

根據(jù)數(shù)據(jù)類型進(jìn)行分層

4.3 第二步：地圖底層的實(shí)現(xiàn)

1) 數(shù)據(jù)&配置：從阿里云DataV拿到中國地圖的數(shù)據(jù)，再通過墨卡托投影算法得到轉(zhuǎn)換后的數(shù)據(jù)。

2) Canvas渲染：把數(shù)據(jù)渲染到Canvas上，這里用的是D3.js的墨卡托轉(zhuǎn)換函數(shù)，再用.context方法渲染到Canvas上。

3) 調(diào)整效果：渲染完地圖后，調(diào)整效果，比如陰影、邊框、變形等。

4.4 第三步：熱力圖的實(shí)現(xiàn)

熱力圖以特殊高亮的形式顯示訪客熱衷的頁面區(qū)域和訪客所在的地理區(qū)域。

熱力圖有兩個(gè)重要的參數(shù)：Max（閾值）和Radius（半徑）。

·?Max：即閾值，就是剛才講到的標(biāo)尺，告訴我們某個(gè)顏色段的含義。這張圖里面0表示透明度值最低，顏色最淺；然后100則表示透明度值為1，顏色最深。

·?Radius：即半徑，代表數(shù)據(jù)的有效范圍和影響力。

而熱力圖的具體實(shí)現(xiàn)過程，大家可參考個(gè)推之前推送的一篇文章：數(shù)據(jù)可視化：淺談熱力圖如何在前端實(shí)現(xiàn)。

4.5 第四步：飛線層的實(shí)現(xiàn)

分線層的實(shí)現(xiàn)可以拆開為曲線、動畫、光效三部分。

關(guān)于飛線層的具體實(shí)現(xiàn)，大家可以點(diǎn)擊查看：數(shù)據(jù)可視化之下發(fā)圖實(shí)踐，篇幅有限，這里就不再重復(fù)敘述啦。

五、遇到的問題

個(gè)推在開展數(shù)據(jù)可視化實(shí)踐的過程中，也遇到了一些問題。這里主要和大家分享兩個(gè)問題：跨級別熱力圖的渲染卡頓問題和樣式變形后數(shù)據(jù)圖層的對應(yīng)問題。

問題1：跨級別熱力圖的渲染卡頓問題

由于熱力圖的數(shù)據(jù)本身很大，當(dāng)發(fā)生視圖級別跨越的時(shí)候，數(shù)據(jù)量級成倍增長，這對性能是一個(gè)很大的考驗(yàn)，最終數(shù)據(jù)可視化呈現(xiàn)的效果會有卡頓的問題存在。

為了解決該問題，我們做了幾步優(yōu)化：

• 請求優(yōu)化：首先我們將請求分成了6塊，根據(jù)可視窗口進(jìn)行切割，類似圖片的懶加載。

• 緩存、防抖：然后是緩存和防抖，我們將轉(zhuǎn)換過的熱力圖數(shù)據(jù)緩存了下來，對頻繁操作進(jìn)行了防抖，以避免請求堵塞。

• 數(shù)據(jù)聚合：最后，我們還對拿到的數(shù)據(jù)做了聚合處理。熱力圖本身就是一個(gè)數(shù)據(jù)融合的過程，那么，我們是否有必要再去做一個(gè)聚合？事實(shí)證明，我們做了這個(gè)聚合之后，對于數(shù)據(jù)量大或者級別過深的熱力圖，確實(shí)是有效果的。

其中，對于數(shù)據(jù)聚合，我們研究了四種方案：Kmeans、網(wǎng)格法、距離法、網(wǎng)格距離法。

• Kmeans：首先隨機(jī)選取n個(gè)聚類質(zhì)心點(diǎn)，然后遍歷每個(gè)點(diǎn)到每個(gè)聚類的距離并歸類，再不斷地迭代再歸類。但這個(gè)方案對于熱力圖是不適用的，更適合關(guān)系圖。

• 網(wǎng)格法：網(wǎng)格法比較簡單，網(wǎng)格法是把屏幕里面的每個(gè)區(qū)域畫成一個(gè)個(gè)格子，看哪個(gè)數(shù)據(jù)在這個(gè)格子里面，把點(diǎn)聚合到格子的中心，有個(gè)別點(diǎn)的偏差會比較大。

• 距離法：距離法是通過迭代每一個(gè)點(diǎn)、設(shè)置點(diǎn)的外包正方形去碰撞，若相交，則把該點(diǎn)聚合到該聚合點(diǎn)中，所以每次聚合的結(jié)果都不一樣。

• 網(wǎng)格距離法：還有一個(gè)是網(wǎng)格距離法，顧名思義，就是前面兩個(gè)方法的結(jié)合。首先迭代格子，算出網(wǎng)格質(zhì)心，再次迭代聚合后的點(diǎn)，通過距離法再算一次質(zhì)心。相對來講，網(wǎng)格距離法會比網(wǎng)格法和距離法，在算法時(shí)間上多一點(diǎn)，但是它的結(jié)果會更準(zhǔn)確一點(diǎn)。我們也正是使用該方法，使數(shù)據(jù)卡頓的問題不那么明顯。

問題2：樣式變形后數(shù)據(jù)圖層的對應(yīng)問題

第二個(gè)問題是樣式變形后數(shù)據(jù)圖層的對應(yīng)問題。

因?yàn)閷Φ貓D進(jìn)行渲染的時(shí)候，我們用了一個(gè)CSS變形，模擬了一個(gè)透視效果，根據(jù)這個(gè)效果，我們渲染出來的效果如下圖。

熱力圖和地圖因?yàn)槭瞧矫嫘Ч?，可以用樣式變形來模擬透視效果；可是飛線和點(diǎn)，卻是3D的效果。想象下，看煙花的時(shí)候，煙花正對我們視角的時(shí)候是不是一條直線，而呈90度角的時(shí)候，是不是正好可以看到飛線角度。

這其實(shí)正好印證了余弦定律，所以從模擬的角度來講，這個(gè)效果已經(jīng)達(dá)到了，只要我們把曲線的曲率根據(jù)視角的角度配合余弦定律轉(zhuǎn)換一下。

但是這樣的辦法不夠準(zhǔn)確，比如曲線的控制點(diǎn)會不會隨視角的轉(zhuǎn)換而轉(zhuǎn)換？

再來看一張圖，我們之所以能模擬3D的效果渲染在屏幕上，是因?yàn)檠劬_人。所以，只要畫出一張圖跟實(shí)際看到的物體一樣，我們就認(rèn)為是3D的。

在地圖中，我們則用樣式變形，通過設(shè)置rotate X、rotate Y、rotate Z等三個(gè)參數(shù)進(jìn)行轉(zhuǎn)換，可以看出，旋轉(zhuǎn)其實(shí)就是一系列的三角函數(shù)變換。

Perspective，即假定我們坐在屏幕前面的距離一定，有了這個(gè)設(shè)定的值，就能模擬出CSS的樣式變形。

當(dāng)然，透視的算法非常復(fù)雜，有單點(diǎn)透視、兩點(diǎn)透視以及散點(diǎn)透視等。這里我們只是簡單地把模型映射到屏幕。

六、結(jié)語

數(shù)據(jù)可視化以直觀、高度視覺沖擊力的方式向受眾揭示數(shù)據(jù)背后隱藏的規(guī)律，傳達(dá)數(shù)據(jù)價(jià)值。視覺效果的背后，個(gè)推數(shù)據(jù)可視化實(shí)踐的核心依托于自身海量數(shù)據(jù)的積累和數(shù)據(jù)智能技術(shù)的沉淀。

目前，個(gè)推熱力圖正應(yīng)用于智慧城市、人口空間規(guī)劃、公共服務(wù)等領(lǐng)域，為其提供強(qiáng)大的數(shù)據(jù)支撐。未來，個(gè)推還將持續(xù)探索將數(shù)據(jù)智能的技術(shù)應(yīng)用到各垂直行業(yè)中，探索用數(shù)據(jù)智能帶來產(chǎn)業(yè)智變。