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

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

![個推訊息下發圖](https://pic1.zhimg.com/80/v2-37575a09cb3b781fb6717bd986409fcc_hd.jpg "個推訊息下發圖")

![個推打造的湖濱商圈區域人口熱力圖](https://pic1.zhimg.com/80/v2-19dab952f899d4f18c3c2d637ceb3430_hd.jpg "個推打造的湖濱商圈區域人口熱力圖")

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

# 一、資料視覺化的構成

資料視覺化由四類視覺化元素構成：背景資訊、標尺、座標系、視覺暗示。

## 1.1 背景資訊

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

![資料視覺化構成](https://pic1.zhimg.com/80/v2-289eb80c0c07438dbddfc94abbc02390_hd.jpg "資料視覺化構成")

## 1.2 標尺

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

## 1.3 座標系

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

## 1.4 視覺暗示

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

![貝爾實驗室於1985年釋出的視覺元素暗示排序清單](https://pic4.zhimg.com/80/v2-7aae4effdc5fc70f35474efbe7e76777_hd.jpg "貝爾實驗室於1985年釋出的視覺元素暗示排序清單")

# 二、資料視覺化的應用

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

## 2.1 統計資料圖表

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

![統計資料圖表](https://pic1.zhimg.com/80/v2-404607568003cadad06095067a059820_hd.jpg "統計資料圖表")

## 2.2 關係資料圖表

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

![關係資料圖表](https://pic2.zhimg.com/80/v2-25d6c5b1cf9799db5255e5777b2c44a1_hd.jpg "關係資料圖表")

## 2.3 地理空間資料圖表

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

![地理空間資料圖表](https://pic1.zhimg.com/80/v2-adc062616e86a3928d8e462e275e54cc_hd.jpg "地理空間資料圖表")

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

![英國某城市間工作跟住宅的通勤地圖 運用了方向和顏色的視覺暗示](https://pic2.zhimg.com/80/v2-acc754e65c4d9dc25bd516c0e9867a7d_hd.jpg "英國某城市間工作跟住宅的通勤地圖 運用了方向和顏色的視覺暗示")

![kepler.gl中展示的某城市地震密度圖 運用了位置、時間和顏色的視覺暗示](https://pic3.zhimg.com/80/v2-f6b0b74892413d972cc6ef49cff6eb12_hd.jpg "kepler.gl中展示的某城市地震密度圖 運用了位置、時間和顏色的視覺暗示")

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

# 三、地圖的基本原理

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

![地圖渲染步驟](https://pic3.zhimg.com/80/v2-f6b0b74892413d972cc6ef49cff6eb12_hd.jpg "地圖渲染步驟")

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

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

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

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

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

## 3.1 地圖投影

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

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

![不同的地圖投影方式](https://pic3.zhimg.com/80/v2-f6b0b74892413d972cc6ef49cff6eb12_hd.jpg "不同的地圖投影方式")

## 3.2 地圖瓦片

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

![地圖瓦片的金字塔座標體系](https://pic3.zhimg.com/80/v2-71238a14583566b3e80c8ea2577ca272_hd.jpg "地圖瓦片的金字塔座標體系")

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

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

# 四、個推資料視覺化實踐

個推的資料視覺化建設有下發圖、熱力圖等。

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

![個推訊息下發圖](https://pic1.zhimg.com/80/v2-37575a09cb3b781fb6717bd986409fcc_hd.jpg "個推訊息下發圖")

2) 個推區域人口熱力圖 則對區域人口分佈、人口性別比例、人口年齡段等進行了資料視覺化呈現。

![個推打造的湖濱商圈區域人口熱力圖](https://pic1.zhimg.com/80/v2-19dab952f899d4f18c3c2d637ceb3430_hd.jpg "個推打造的湖濱商圈區域人口熱力圖")

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

## 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) 其他任何地理空間資料層，比如柱狀圖、交通圖等。

![根據資料型別進行分層](https://pic1.zhimg.com/80/v2-d33076cd9c199b98ca93ae7744a661d8_hd.jpg "根據資料型別進行分層")

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

1) **資料&配置**：從阿里雲DataV拿到中國地圖的資料，再透過墨卡託投影演算法得到轉換後的資料。

2) **Canvas渲染**：把資料渲染到Canvas上，這裡用的是D3.js的墨卡託轉換函式，再用.context方法渲染到Canvas上。

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

## 4.4 第三步：熱力圖的實現

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

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

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

· **Radius**：即半徑，代表資料的有效範圍和影響力。

![閾值半徑](https://pic4.zhimg.com/80/v2-9f9a8e4ef53cb1d307ef063cf6dd7103_hd.jpg "閾值半徑")

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

## 4.5 第四步：飛線層的實現

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

![分線層](https://pic2.zhimg.com/80/v2-41179bdaf70da00d9d1af7ca52572631_hd.jpg "飛線層")

關於飛線層的具體實現，大家可以點選檢視：資料視覺化之下發圖實踐，篇幅有限，這裡就不再重複敘述啦。

# 五、遇到的問題

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

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

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

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

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

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

## 問題2：樣式變形後資料圖層的對應問題

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

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

![樣式變形後資料圖層的對應問題](https://pic2.zhimg.com/80/v2-24852c2d7c262c7d3a2be5b330278f5d_hd.jpg "樣式變形後資料圖層的對應問題")

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

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

![餘弦定律](https://pic4.zhimg.com/80/v2-3f09ff11e10f5b825b68fecb797ca6fb_hd.jpg "餘弦定律")

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

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

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

![餘弦定律](https://pic4.zhimg.com/80/v2-3f09ff11e10f5b825b68fecb797ca6fb_hd.jpg "餘弦定律")

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

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

# 六、結語

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

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

個推資料視覺化之人群熱力圖、訊息下發圖前端開發實踐

相關文章