從零開始學習時空數據可視化（序）

前言：沒有什麼特殊的緣由、也不是要靠這個賺錢（畢竟是免費的），只是在以往的學習過程當中很是感謝不少開發者的無私奉獻，包括代碼、問題解答以及文章，因而本身也萌生了相似的念頭，但願在記錄本身學習收穫的同時，也能幫到一些朋友吧。

本文結構安排以下：

• 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 鼓勵一下。

• 項目地址 GitHub https://github.com/hijiangtao/glmaps
• 中文說明 README github.com/hijiangtao/…

簡單來講，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 glmaps with PR (such as imporve mover animation in Globe);
• Speak out your doubts in learning data visualization with issues;
• Tell me your advice on how to make glmaps better with issues;
• Other aspects not included yet.

6 / 幾則故事

故事一

前兩天雲舒在朋友圈的動態忽然成了熱點新聞，其中我很是贊同第一句的後半句「特意寫出來你們看到，免得我改變心意」，glmaps 也是在這種環境下誕生的。

不要誤解，我不離婚，我只是想說即使 glmaps 還處於初期階段，我仍決定如今把它分享出來。起初，這個想法誕生於兩個多月前，我曾在問題「做爲前端工程師的你在深刻研究哪些領域？」中說到新的一年要多搞搞數據可視化，但因爲工做忙碌與天生懶惰，因而一直在給本身找日後拖延的藉口。

如今把它分享出來，一方面是代碼層面在基本功能上已完善，另外一方面是想經過公開來鞭策本身按時完成剩餘文章的編寫，即「自我催更」。

故事二

在爲 glmaps 製做視頻與截圖時，發現 Globe Curve 還有點像流浪地球，若是把貝塞爾曲線換成直線，再在分佈上改一改就更像了。

故事三

因爲平時還有工做要完成，因此如何分配時間呢？我以爲忙是件好事，必定程度上能夠刺激你提升自我時間管理能力，因此我會利用好晚上及週末的時間來逐步完善這個項目，step by step。

另外，因爲各類緣由我也好久沒嘗試過 three.js 了，因此怎麼說呢，仍是那句話：但願在幫助你們的同時，咱們相互學習。歡迎更有經驗的同窗多多指教！

更多本文未提到的內容歡迎移步 GitHub 啦！