
將文字的數據資料轉為可視化圖片有助於瀏覽閱讀,如在簡報時佐以圖表,也能夠讓聽眾更快掌握你的內容,當然好的圖片可不是隨手就有,平常也得收集一些素材,或是準確使用網路資源,例如 Chartico 可以協助使用者製作好看的圖表,以 Google Data GIF Maker 將數據快速製作為 GIF 動畫,若需要一些扁平化設計的免費圖示,unDraw 是一款持續更新中的插圖圖庫,優點是能直接調整插圖的主要顏色,讓圖片和你的簡報設計更加緊密結合。
本文要推薦的「Datamaps.co」是一個相當有趣而且實用的熱度圖產生器,通常用於地圖上呈現各地區的某項數值,像是人口數、平均薪資所得、消費力、人口密度等等,雖然可以從網路上找到世界地圖的向量圖格式 Free Vector Maps 進行編輯修改,但相對來說也非常耗費時間,Datamaps.co 就能解決這樣的問題。
下圖就是我利用 Datamaps.co 製作而成的範例:

Datamaps.co 提供世界地圖、各國家行政區域圖,像是美國、中國、加拿大、法國、德國、印度、澳大利亞、英國、台灣等等,透過 CSV 資料格式將資料匯入或手動編輯,資訊立即呈現於地圖上,還能調整配色、單位或標題及副標題,製作後的圖片可匯出為 PNG 或 SVG 向量圖格式,對於再次編輯來說也相當有用。
網站名稱:Datamaps.co
網站鏈結:https://datamaps.co/
使用教學
STEP 1
首先,開啟 Datamaps.co 網站然後點選「Go To The Editor」可選擇地圖,目前網站提供除了世界地圖,還有各個國家的行政區。

STEP 2
在這裡我選擇中國 China 作為範例,開啟後點選「Go To Data Table」開始編輯資料,還有另一方法是直接上傳匯入 CSV,這我在文章後半段會介紹。

如果你手邊沒有 CSV 檔案,可直接透過 Datamaps.co 網站編輯,將各項數值加入。

STEP 3
Datamaps.co 可匯入資料的格式除了 CSV 外,還有 TSV、DSV ,格式也非常簡單,如果你不知道怎麼做,可以點選右側的 example 下載範例檔案,就能知道 Datamaps.co 要怎麼把現有的數值匯入然後做成圖片。
簡單來說,資料必須包含兩個欄位:code
(或是 name
)、value
,依照 Datamaps.co 指定的名稱或代碼匯入相關數值。

以下就是我下載 Datamaps.co 提供的範例,將數值整理好後做成的 .csv
格式,我們接下來試試看要如何將數據快速匯入。

STEP 4
回到 Datamaps.co 將檔案拖曳到右側方框,或點擊方框、選取檔案,選擇要匯入的 CSV 後會看到如下畫面,要求使用者選擇 names
/ codes
欄位。

選好後按下「Next」,再選取 value
數值就可以點選「Finish Upload」完成上傳。

STEP 5
從檔案中取得的數值就會反映在圖片上,數值可透過網頁介面修改,這時候圖片的基本雛形已經出現,依照數值大小會有深淺不一的變化。

點選「Edit Map Style」進行更細部的地圖樣式修改,包括加入主標題、副標題、級距還能變換配色,製作後看起來就非常有模有樣。

STEP 6
最後,從右上角選擇「Save Svg」保存為 SVG 向量圖格式,以便從 Adobe Illustrator 或相關軟體進行後續編輯,點選另一個「Save Png」則是匯出成 PNG 格式,一般投影片或報告使用時建議可選擇這個圖片格式。

值得一試的三個理由:
- 線上製作熱度圖,免下載或安裝軟體
- 可直接編輯和匯入 CSV 格式數據
- 輸出為 SVG 向量圖或 PNG 圖片