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

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

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

個推消息下發圖

 

個推打造的湖濱商圈區域人口熱力圖

 

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

1、數據可視化的構成

數據可視化由四類可視化元素構成：背景信息、標尺、座標系、視覺暗示。

1.1 背景信息

背景信息就是標題、度量單位、註釋等附加類的信息。主要是爲了幫助大屏受衆更好地理解相關背景信息，即5W信息：何人（who）、何事（what）、什麼時候（when）、何地（where）、爲什麼（why）。

1.2 標尺

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

1.3 座標系

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

1.4 視覺暗示

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

貝爾實驗室於1985年發佈的視覺元素暗示排序清單

 

2、數據可視化的應用

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

2.1 統計數據圖表

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

2.2 關係數據圖表

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

2.3 地理空間數據圖表

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

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

 

英國某城市間工做跟住宅的通勤地圖 運用了方向和顏色的視覺暗示

 

kepler.gl中展現的某城市地震密度圖 運用了位置、時間和顏色的視覺暗示

 

除以上四種經常使用的數據可視化圖表以外，其實還有不少其餘類型的圖表，像詞雲圖、時間序列數據圖等，這裏就再也不一一贅述。

3、地圖的基本原理

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

 

地圖渲染步驟

 

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

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

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

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

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

 

3.1 地圖投影

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

根據不一樣的地圖使用場景，須要選擇不一樣的投影算法，如今不少投影算法都是現成的，不須要本身手動寫。其中，等角投影是用得比較廣泛的一種，其中的墨卡託投影，則是如今地圖廠商使用較多的一種地圖投影算法。

 

不一樣的地圖投影方式

 

3.2 地圖瓦片

通過Web墨卡託投影后，地圖就變爲平面的一張地圖。由於有時候咱們須要看宏觀的地圖信息（如世界地圖裏每一個國家的國界），有時候又要看很微觀的地圖信息（如導航時道路的路況信息）。爲此，咱們須要對這張地圖進行等級切分。

地圖瓦片的金字塔座標體系

 

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

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

4、個推數據可視化實踐

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

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%，在內存佔用等各方面都完勝。

飛行數量達100時SVG和Canvas性能對比

 

綜合來看，以上三種方案都不完美。因此，最終，咱們決定用本身的方式來實現。

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 第四步：飛線層的實現

分線層的實現能夠拆開爲曲線、動畫、光效三部分。

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

5、遇到的問題

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

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

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

爲了解決該問題，咱們作了幾步優化：

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

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

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

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

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

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

熱力圖和地圖由於是平面效果，能夠用樣式變形來模擬透視效果；但是飛線和點，倒是3D的效果。想象下，看煙花的時候，煙花正對咱們視角的時候是否是一條直線，而呈90度角的時候，是否是正好能夠看到飛線角度。

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

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

再來看一張圖，咱們之因此能模擬3D的效果渲染在屏幕上，是由於眼睛會騙人。因此，只要畫出一張圖跟實際看到的物體同樣，咱們就認爲是3D的。

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

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

固然，透視的算法很是複雜，有單點透視、兩點透視以及散點透視等。這裏咱們只是簡單地把模型映射到屏幕。

6、結語

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

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