大家好久不見，我是 Steven，這篇文章主要會介紹我從事資料視覺化相關工作的這一年多來，所知道或是使用過的客製化圖表、地圖開發工具。
在開始之前先打個預防針，文中所提到的大多數工具上手難度較高（有一些我甚至只懂皮毛），許多工具/技術也需要一定程度的前端經驗，但希望大家不要懼怕它們，你/妳可以先從「認識它」、「知道它能達到什麼目的」開始，我也盡量在文中附上相對應的學習資源，等需要用到的時候再回來學習就好了👍
文章主要會分成圖表、地圖以及其他，並透過「想達成什麼目的」來對各種工具/技術進行介紹。
》圖表
我想做出獨一無二的互動圖表！
我自己所想像中的「獨一無二圖表」有幾種特點，分別是獨特的Layout、高度客製化的互動效果以及No-Code工具做不出來，這三種特點所交集出來的唯一工具，就是D3.js!
D3
由 Mike Bostock 所開發的 D3.js 雖已問世10年，但它依舊是製作客製化圖表/地圖必學的工具沒有之一，它有許多豐富的模組來幫助我們繪製圖表/地圖的每一個細節，也因為如此入門門檻偏高（因為要搞懂的東西實在太多了！），但其實只要理解 D3 的一些核心概念（像是 data binding, udpate pattern），剩下的工作就只是花時間去看文件而已。
以下是我個人非常推的 D3 學習資源：
- An Introduction to D3.js：由 Amelia Wattenberger 所製作的D3入門互動頁面，她先以階層式泡泡圖帶大家鳥瞰所有D3模組，並簡單地介紹幾個主要模組有什麼功能，讓大家先有個基本的概念。
- D3 in Depth：由 Peter Cook 所建立的 D3 教學網站，我覺得它與其他同質網站最不一樣的地方在於，它的範例和文字更容易讓人深入淺出地理解其中的核心概念，較適合稍微摸過 D3 之後，覺得自己在使用 D3 上還是有點卡的朋友。
- Observable - Learn D3：由 D3 祖師爺 Mike Bostock 親自寫在 observable notebook 的 D3 教學，必推，另外的好處是 observable notebook 互動性較高，很好用來幫助學習。
我想畫出更多點點！
要使用 D3 在瀏覽器中畫出成千上萬的點（or 其他幾何圖案）其實不難，但如果要讓那些點動起來、轉換到其他位置甚至是產生變化，可能就會出現效能問題了（畫面看起來很卡很頓），因為通常 D3 製圖時，都會讓資料綁定在 SVG 物件上，但現在大部分的瀏覽器在處理 SVG 動畫時都沒有支援硬體加速，所以才會造成上面提到的效能問題。
當我們要在瀏覽器中想讓上千上萬的點進行移動/變化時，就必須用 D3 搭配其他技術進行呈現，通常會使用 Canvas 以及 WebGL 來讓電腦硬體來加速運算，幫助我們的畫面看起來更順暢，而直接用 WebGL 的效能又會比 Canvas 好（畫面上可以有更多的點）。
以下是 Netflix 視覺化工程師 Peter Beshai 超讚的乾貨文章：
既然硬體加速那麼讚，那為什麼一開始不直接用 Canvas 和 WebGL 呢？因為 code 的複雜度也會增加很多啊！！，尤其是 WebGL 的 api 雖然有透過 regl.js 變得更容易使用，但需要設定的細節還是很多，這意味著學習成本也會增加不少，所以 D3 要搭配還種技術來呈現，還是要視當下的情況而定。
》地圖
我想快速產出精美的平面地圖！
要製作好看的地圖可以應用的工具非常多，一種常見的工作流程就是使用 GIS 軟體（QGIS, ArcGIS …等）出圖，如果有需要更細節的調整，再用 AI, PS 之類的軟體進行後製。
如果有已經習慣這種製圖流程的朋友，這邊非常推薦製圖大師 Daniel Huffman 所經營的網站 somethingaboutmaps，裡面有許多製作地圖相關的細節知識。
但上述這種流程所需要學的工具偏多（但客製化彈性很高），所以也推薦大家也可以嘗試看看 Mapbox Studio，是 mapbox 公司所開發的線上製圖工具，可以客製化的選項超多，幾乎不需要寫code，就可以透過點選設定的方式，快速製作出高度客製化的精美地圖。（應該是本篇文章唯一推薦的 No-Code 工具 XD）
截自 mapbox studio 網站
我想做出超讚的浮雕地圖（relief map）！
通常在 GIS 軟體中都會有光影模擬的功能，這項功能可以讓平面地圖增加一點立體感，但如果還想讓要地圖更加寫實、提升檔次，就必須借用3D軟體來模擬出真正地形的高低起伏、光線照射的情況。
先別著急，想要初步做出一張簡單的浮雕地圖並不需要搞懂3D軟體的全部功能，我們只需要知道「我們需要用到的那部分」就好了，上面提到的 Daniel Huffman 大大一樣也為大家寫了如何用 Blender 製作浮雕地圖的系列教學，這一系列的教學不是只有教你如何「一步一步」操作而已，Daniel Huffman 還詳細解釋了每步操作背後的原因，十分受用！
另外也十分推薦 Joe Davies 所寫的手把手教學，一樣是使用 QGIS + Blender 來製作浮雕地圖，算是近期較新的浮雕地圖的教學文。
》其他
最後這邊就是塞一些我自己很想推薦，但不知道如何分類的東東。
我想快速上手前端框架！
如果你/妳已經熟悉基礎的 HTML/CSS/JS ，想要挑一個前端框架來快速建立簡單的 Web App，我激推 Svelte 沒有之一，Svelte 是由前紐時圖表編輯 Rich Harris 所創造的前端框架，開發體驗非常好、學習曲線平緩好上手，它的好處很難在這邊說完，好不好寫請去玩一次官方網站的教學就知道了！（現實面的缺點大概就是台灣沒有很多公司在用）
我想跟著其他人一起學習資料視覺化！
如果你/妳是 Python 的使用者，一定會知道 Jupyter Notebook；如果你/妳是 JS 的使用者，那現在一定要知道 observable notebook，observable 的創辦人之一就是 D3 祖師爺 Mike Bostock，observable 提供一個平台讓大家可以直接在瀏覽器上透過 JS 來進行資料探索、視覺化，我們也可以在平台上觀摩學習其他人有趣的作品！
以上就是我這一年多來對於各種客製化圖表工具/技術的認識，希望能幫助到對這塊有興趣的朋友！
後記
其實一直在猶豫要不要寫這篇，想寫的理由是目前台灣沒人整理過相關的資源，不想寫的理由是怕這些東西太難會嚇跑一些正想踏入這領域的朋友。
最後還是下筆了，想到如果一年多前的自己，看到這篇雖然會嚇得瑟瑟發抖，但真的想玩這些酷東西的話，應該也可以省去一些找資源的時間吧。
雖然入門門檻不低，但當用這些工具/技術來做出獨一無二、與眾不同的有趣圖表時，所得到的成就感與爽度絕對比用簡單的工具多超多！也許大多數人無法理解，但我的快樂就是這樣樸實無華且枯燥，這篇獻給也同樣追求這種快樂的你/妳。
