前言：沒有什麼特殊的原因、也不是要靠這個賺錢（畢竟是免費的），只是在以往的學習過程中非常感謝很多開發者的無私奉獻，包括程式碼、問題解答以及文章，於是自己也萌生了類似的念頭，希望在記錄自己學習收穫的同時，也能幫到一些朋友吧。
本文結構安排如下：
- 0 / 為什麼會有這個系列
- 1 / 學習指北
- 2 / 效果演示
- 3 / 視覺化示例
- 4 / 視覺化教程
- 5 / 自問自答
- 6 / 幾則故事
Demo 視訊（記得點超清模式，否則很糊）見 v.qq.com/x/page/x084…
先插播一句，GitHub 專案地址是這個 https://github.com/hijiangtao/glmaps，郵件訂閱動態點 watch，鼓勵我點 star，參與進來點 fork，嘿嘿。
0 / 為什麼會有這個系列
我經常被問到「我很喜歡資料視覺化，我該如何入門呢？」，我曾在問題「國內有哪些成熟的做前端資料視覺化的團隊，做工程的前端加入需要補充什麼知識」以及「資料視覺化工程師未來的路在何方」說過我自己的一些小感受，但發現這些似乎不能解決所有疑惑。
你可能因為諸如「相機與可視區是什麼，座標世界如何轉換」等問題而止步向前，即便 three.js 已經在 WebGL 上友好的封裝了一層 API。事實如此，當你對圖形學領域一些基本概念還沒了解，你在入門時一定會遇到不少疑惑。究其原因，其實每個人精力有限。雖然基於 Web 的圖形繪製介面依舊是 SVG 與 canvas，但其背後的標準仍在穩步向前。WebGL (OpenGL ES) 作為一個光柵化引擎，本質只包含兩類著色器，但背後仍蘊藏如此多的內容。
如果你是一名資料視覺化愛好者，但苦於沒有相關基礎，那麼「從零開始學習時空資料視覺化」這個系列便是完全為你準備的，讓我們開始吧。
1 / 學習指北
先說一句，這個系列是免費的。希望在幫助大家的同時，我們相互學習。
我為從零開始學習時空資料視覺化系列建立了一個 GitHub 倉庫，所有相關程式碼、文件以及教程都會放在一起，我給他取名叫 glmaps。如果你覺得值得關注可以點個 watch 接受郵件訂閱提醒，如果從中有所收穫也歡迎點個 star 鼓勵一下。
簡單來說，glmaps 是一個包含多個時空資料視覺化示例程式碼集與學習教程的開源專案。該專案中的視覺化效果基於視覺化庫 three.js 與 deck.gl 實現，非常容易上手，希望本專案對正在時空視覺化學習之路上探尋的你有所幫助。
希望通過 glmaps 的系列示例與教程，可以讓你在使用 three.js 與 deck.gl 時能更加自信地創作出更好的視覺化作品。
2 / 效果演示
廢話不多說，我錄製了一段短視訊用於展現 glmaps 的視覺化效果，你可以在 YouTube 或者騰訊視訊檢視。
騰訊視訊對畫質壓縮的非常嚴重，建議檢視時開啟超清模式，否則極有可能出現「兩米開外，人畜不分」的馬賽克效果。
3 / 視覺化示例
glmaps 現包含有如下幾種視覺化形式，更多案例正在豐富中。其中 2.5D 意指在2D地圖上繪製2D或者3D的物體，3D 意指完全在三維空間中實現時空資料的視覺化效果。
| 型別 | 描述 | 效果 | 支援動畫 | 支援聚類 |
|---|---|---|---|---|
| 3D / Curve | THREE.BufferGeometry() | Yes | No | |
| 3D / Mover | THREE.SphereGeometry() | Yes | No | |
| 3D / Cube | THREE.BoxGeometry() | No | No | |
| 2.5D / Icon | No modification from deck | No | Yes | |
| 2.5D / Brush | Support OD Arc Animation | Yes | No | |
| 2.5D / Scatter | Support Fade-out Animation | Yes | No | |
| 2.5D / Hexagon | Support Coverage Filter Conditions | Yes | Yes | |
| 2.5D / Grid | Support Coverage Filter Conditions | No | Yes | |
| 2.5D / Trip | No modification from deck | Yes | No | |
| Other / Segment | The same as curve animation | Yes | No | |
| Other / Moon | Earth-Moon System | Yes | No |
4 / 視覺化教程
暫定八篇系列教程，如有需要可以提 issue 討論。
- 從零開始學習時空視覺化（零） / three.js 入門筆記 - TBD
- 從零開始學習時空視覺化（一） / deck.gl 入門筆記 - TBD
- 從零開始學習時空視覺化（二） / 用 React 框架管理你的 three.js 專案 - TBD
- 從零開始學習時空視覺化（三） / 用 three.js 畫出你的第一個地球 - TBD
- 從零開始學習時空視覺化（四） / 深入淺出 three.js 點、線、面、體的實現過程 - TBD
- 從零開始學習時空視覺化（五） / 利用 props 與 transitions 讓你的 deck.gl 圖層動起來 - TBD
- 從零開始學習時空視覺化（六） / 手寫 shader 給你的 deck.gl 動畫另闢蹊徑 - TBD
- 從零開始學習時空視覺化（七） / 使用 three.js 和 deck.gl 開發的踩坑記錄 - TBD
在完成這些學習後，你將可以獨立實現如上列出的幾種視覺化形式作品，而個人認為這些形式已經大致包含了基本的時空視覺化型別。
5 / 自問自答
首先感謝你對 glmaps 專案的關注。在你進一步閱讀本專案之前，想對你說的一些話。
Q1: 除了列出的視覺化框架，glmaps 專案還用到了哪些 Web 技術?
從 16.8.0 開始，Hooks 便正式登陸 React，glmaps 在開發過程中也從中受益很多。如果你還不瞭解 React Hooks，建議先檢視 Introducing Hooks 瞭解大概，因為 glmaps 在多處使用到了各類 Hooks。另一方面，由於 deck.gl 利用了 WebGL2 特性進行視覺化繪製，所以在檢視 demo 前請確保你的瀏覽器支援這項技術。你可以通過 get.webgl.org/ 或者 get.webgl.org/webgl2/ 網站來檢視你的瀏覽器對 WebGL(2) 的支援情況。
除此外，由於 glmaps 未採用類似 create-react-app 這樣成熟的腳手架進行搭建，而是我按需在構建流程上對 webpack 及 Babel 中的功能進行組合，因此在打包構建方面一定還存在諸多需要繼續完善的地方。若你在本地執行 Demo 時遇到任何報錯，我相信這都可能是 glmaps 本身的問題，而非你的問題，歡迎通過 issues 和我交流討論。
Q2: 視覺化初學者該如何利用這個專案學習？
我比較建議你採用如下順序配合 glmaps 進行學習：
- 先學習如何在你的專案中引入 three.js 以及 deck.gl，瞭解基本的使用、專案建立，這部分內容直接在 three.js 與 deck.gl 官網便可找到。嘗試根據教程，試試畫出你的第一個圖形；
- 大概掃一下這兩個框架的主 API 都有哪些，並試試下些官方 demo 在本地執行，感受下這些框架在實現視覺化上的巨大能力；
- 跟著「從零開始學習時空資料視覺化系列」教程一步步把 glmaps 中涉及到的視覺化案例都實現一遍；如果你對 three.js 與 deck.gl 有過一定的嘗試，你也可以直接參考我在
src資料夾中抽象出的程式碼； - （可選）嘗試通過
npm install glmaps --save在你的 demo 中引入 glmaps 進行展現； - 按照你的理解重寫
glmaps示例程式碼，併為他新增更多特性； - 恭喜你已經成功入門基本的時空資料視覺化程式設計！你現在可以更加深入地瞭解 three.js 或者 deck.gl，並更加自信地創作出更好的視覺化作品。
Q3: 如何參與到 glmaps 專案中來？
glmaps is still at the very beginning period of my thoughts, you are welcome to oepn ISSUE, PR or email me, if you have any ideas on how to make glmaps better for visualization beginners:
- Participate in implementing tutorials together;
- Contribute codes to
glmapswith PR (such as imporvemoveranimation inGlobe); - Speak out your doubts in learning data visualization with issues;
- Tell me your advice on how to make
glmapsbetter with issues; - Other aspects not included yet.
6 / 幾則故事
故事一
前兩天雲舒在朋友圈的動態突然成了熱點新聞，其中我非常贊同第一句的後半句「特地寫出來大家看到，省得我改變心意」，glmaps 也是在這種環境下誕生的。
不要誤解，我不離婚，我只是想說即便 glmaps 還處於初期階段，我仍決定現在把它分享出來。起初，這個想法誕生於兩個多月前，我曾在問題「作為前端工程師的你在深入研究哪些領域？」中說到新的一年要多搞搞資料視覺化，但由於工作忙碌與天生懶惰，於是一直在給自己找往後拖延的藉口。
現在把它分享出來，一方面是程式碼層面在基本功能上已完善，另一方面是想通過公開來鞭策自己按時完成剩餘文章的編寫，即「自我催更」。
故事二
在為 glmaps 製作視訊與截圖時，發現 Globe Curve 還有點像流浪地球，如果把貝塞爾曲線換成直線，再在分佈上改一改就更像了。
故事三
由於平時還有工作要完成，所以如何分配時間呢？我覺得忙是件好事，一定程度上可以刺激你提高自我時間管理能力，所以我會利用好晚上及週末的時間來逐步完善這個專案，step by step。
另外，由於各種原因我也很久沒嘗試過 three.js 了，所以怎麼說呢，還是那句話：希望在幫助大家的同時，我們相互學習。歡迎更有經驗的同學多多指教！
更多本文未提到的內容歡迎移步 GitHub 啦！