個推數據可視化之人群熱力圖、消息下發圖前端開發實踐

• 2019 年 10 月 5 日
• 筆記

隨著互聯網在各行各業的影響不斷深入，數據規模越來越大，各企業也越來越重視數據的價值。作為一家專業的數據智慧公司，個推從消息推送服務起家，經過多年的持續耕耘，積累沉澱了海量數據，在數據可視化領域也開展了深入的探索和實踐。

個推的數據可視化探索和應用由需求出發，從基於開源平台到結合個性化需求進行訂製化開發，打造出個推實時消息推送下發圖，人群分布熱力圖等優秀數據可視化作品。這一過程中，個推積累沉澱了大量的數據可視化組件，打磨了自己的數據可視化技術能力。其中，個推熱力圖正應用在智慧城市、人口空間規劃、公共服務等領域，為其提供強大的數據支撐。

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

一、數據可視化的構成

數據可視化由四類可視化元素構成：背景資訊、標尺、坐標系、視覺暗示。

1.1 背景資訊

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

1.2 標尺

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

1.3 坐標系

坐標系有一個結構化的空間，還有指定圖形和顏色畫在哪裡的規則，用於編碼數據的時候，將物體放到該空間中的某一特定位置，它賦予X、Y坐標或經緯度以意義。常見的坐標系有直角坐標系、極坐標系、地理坐標系。餅圖裡面用的是極坐標系；柱狀圖裡面有X軸、Y軸，就是直角坐標系；熱力圖裡面用的則是地理坐標圖。

1.4 視覺暗示

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

二、數據可視化的應用

根據不同的數據結構類型，數據可視化的應用也不同，常用的有統計數據圖表、關係數據圖表、地理空間數據圖表。

2.1 統計數據圖表

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

2.2 關係數據圖表

常用的關係數據圖表有關係圖、流程圖、樹圖和桑基圖。關係數據圖表最重要的就是關係。從渲染層面來說，關係圖存在兩個最重要的難點：布局和聚類。布局意即如何分布要展現的數據，關係圖、流程圖、樹圖等，都只是布局不同；聚類則是要將真實的關係進行聚類模擬和可視化呈現出來，比如，哪些實體屬於同一類別、相距比較近、或有從屬關係等。

2.3 地理空間數據圖表

地理空間數據可視化圖表有散點圖、路徑圖、熱力圖、下發圖等。地理空間數據圖表的特點就是基於地理坐標系。

現在業內對地理空間數據可視化的研究非常多，像高德地圖的Loca、Uber聯合mapbox推出的kepler.gl等，都是非常優秀的地理空間數據可視化應用案例。

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

三、地圖的基本原理

在對地理空間數據進行可視化的實踐中，對地圖的渲染是非常重要的一步。

上面這張圖清晰地呈現了地圖渲染的步驟：

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

· 然後，將平面地圖根據現實場景，分成一層層不同精度的地圖，排列成為一個金字塔狀；

· 最終，將拼湊起這張地圖的細節分割成為一張張地圖瓦片。

地圖渲染涉及到兩個重要名詞：地圖投影和地圖瓦片，下面對這兩個名詞進行了詳細解釋：

3.1 地圖投影

按照投影形式的不同，地圖投影有圓錐投影、圓柱投影、方位投影三種；根據投影方向的位置又可以分為正軸投影、橫軸投影、斜軸投影三種。這裡要說的是，因為投影，地圖就不可能被精準還原，投影展開後的平面地圖肯定會有一個變形，根據變形又可以分為等角投影、等面積投影、任意投影等。

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

3.2 地圖瓦片

經過Web墨卡托投影后，地圖就變為平面的一張地圖。因為有時候我們需要看宏觀的地圖資訊（如世界地圖裡每個國家的國界），有時候又要看很微觀的地圖資訊（如導航時道路的路況資訊）。為此，我們需要對這張地圖進行等級切分。

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

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

四、個推數據可視化實踐

個推的數據可視化建設有下發圖、熱力圖等。

1) 個推消息下發圖 實時展現了個推當天累計消息下發量、應用下發群體畫像（包括性別比例、年齡段分布、當日應用下發城市Top5等）。

2) 個推區域人口熱力圖 則對區域人口分布、人口性別比例、人口年齡段等進行了數據可視化呈現。

接下來，就以下發圖和熱力圖為例，來為大家剖析下個推的數據可視化實踐過程。

4.1 前期技術選型

從效率和經濟角度考慮，我們首先調研了一下現成的方案是否能滿足需求。

方案一：地圖應用 前面講過，地圖是以地圖瓦片的形式渲染出來的，地圖應用不能實現設計稿中的效果，所以該方案不可行。

方案二：圖表應用 ECharts這類綜合的圖表庫，能基本實現一些地圖的效果，並且能切換視角，配置簡單；但ECharts中線的效果非常有限，達不到設計稿中想要的漸變以及落地效果，也只能被忍痛放棄。

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

這裡，我們將SVG和Canvas進行了性能對比：當飛行數量達到100時，SVG的動畫幀數FPS只有12-43，CPU佔用很高；Canvas則好很多，基本上是42-60FPS，CPU佔用率是20%-30%，在記憶體佔用等各方面都完勝。

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

4.2 第一步：分層

首先，如下圖，在對地理數據進行渲染之前，我們先根據數據類型進行了分層：

1) 地圖底層；

2) 熱力圖層；

3) 飛線層；

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

4.3 第二步：地圖底層的實現

1) 數據&配置：從阿里雲DataV拿到中國地圖的數據，再通過墨卡托投影演算法得到轉換後的數據。

2) Canvas渲染：把數據渲染到Canvas上，這裡用的是D3.js的墨卡托轉換函數，再用.context方法渲染到Canvas上。

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

4.4 第三步：熱力圖的實現

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

熱力圖有兩個重要的參數：Max（閾值）和Radius（半徑）。

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

· Radius：即半徑，代表數據的有效範圍和影響力。

而熱力圖的具體實現過程，大家可參考個推之前推送的一篇文章：數據可視化：淺談熱力圖如何在前端實現。

4.5 第四步：飛線層的實現

分線層的實現可以拆開為曲線、動畫、光效三部分。

關於飛線層的具體實現，大家可以點擊查看：數據可視化之下發圖實踐，篇幅有限，這裡就不再重複敘述啦。

五、遇到的問題

個推在開展數據可視化實踐的過程中，也遇到了一些問題。這裡主要和大家分享兩個問題：跨級別熱力圖的渲染卡頓問題和樣式變形後數據圖層的對應問題。

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

由於熱力圖的數據本身很大，當發生視圖級別跨越的時候，數據量級成倍增長，這對性能是一個很大的考驗，最終數據可視化呈現的效果會有卡頓的問題存在。

為了解決該問題，我們做了幾步優化：

• 請求優化：首先我們將請求分成了6塊，根據可視窗口進行切割，類似圖片的懶載入。
• 快取、防抖：然後是快取和防抖，我們將轉換過的熱力圖數據快取了下來，對頻繁操作進行了防抖，以避免請求堵塞。
• 數據聚合：最後，我們還對拿到的數據做了聚合處理。熱力圖本身就是一個數據融合的過程，那麼，我們是否有必要再去做一個聚合？事實證明，我們做了這個聚合之後，對於數據量大或者級別過深的熱力圖，確實是有效果的。

其中，對於數據聚合，我們研究了四種方案：Kmeans、網格法、距離法、網格距離法。

• Kmeans：首先隨機選取n個聚類質心點，然後遍歷每個點到每個聚類的距離並歸類，再不斷地迭代再歸類。但這個方案對於熱力圖是不適用的，更適合關係圖。
• 網格法：網格法比較簡單，網格法是把螢幕裡面的每個區域畫成一個個格子，看哪個數據在這個格子裡面，把點聚合到格子的中心，有個別點的偏差會比較大。
• 距離法：距離法是通過迭代每一個點、設置點的外包正方形去碰撞，若相交，則把該點聚合到該聚合點中，所以每次聚合的結果都不一樣。
• 網格距離法：還有一個是網格距離法，顧名思義，就是前面兩個方法的結合。首先迭代格子，算出網格質心，再次迭代聚合後的點，通過距離法再算一次質心。相對來講，網格距離法會比網格法和距離法，在演算法時間上多一點，但是它的結果會更準確一點。我們也正是使用該方法，使數據卡頓的問題不那麼明顯。

問題2：樣式變形後數據圖層的對應問題

第二個問題是樣式變形後數據圖層的對應問題。

因為對地圖進行渲染的時候，我們用了一個CSS變形，模擬了一個透視效果，根據這個效果，我們渲染出來的效果如下圖。

熱力圖和地圖因為是平面效果，可以用樣式變形來模擬透視效果；可是飛線和點，卻是3D的效果。想像下，看煙花的時候，煙花正對我們視角的時候是不是一條直線，而呈90度角的時候，是不是正好可以看到飛線角度。

這其實正好印證了餘弦定律，所以從模擬的角度來講，這個效果已經達到了，只要我們把曲線的曲率根據視角的角度配合餘弦定律轉換一下。

但是這樣的辦法不夠準確，比如曲線的控制點會不會隨視角的轉換而轉換？

再來看一張圖，我們之所以能模擬3D的效果渲染在螢幕上，是因為眼睛會騙人。所以，只要畫出一張圖跟實際看到的物體一樣，我們就認為是3D的。

在地圖中，我們則用樣式變形，通過設置rotate X、rotate Y、rotate Z等三個參數進行轉換，可以看出，旋轉其實就是一系列的三角函數變換。

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

當然，透視的演算法非常複雜，有單點透視、兩點透視以及散點透視等。這裡我們只是簡單地把模型映射到螢幕。

六、結語

數據可視化以直觀、高度視覺衝擊力的方式向受眾揭示數據背後隱藏的規律，傳達數據價值。視覺效果的背後，個推數據可視化實踐的核心依託於自身海量數據的積累和數據智慧技術的沉澱。

目前，個推熱力圖正應用於智慧城市、人口空間規劃、公共服務等領域，為其提供強大的數據支撐。未來，個推還將持續探索將數據智慧的技術應用到各垂直行業中，探索用數據智慧帶來產業智變。