Vue3 + D3.js 總統開票地圖網

DEMO　|　GitHub Repo

作品說明

參與 2023 年 THE F2E 總統即時開票全台地圖 的作品。運用中選會 2020 年各縣市、區域、鄉鎮里的總統投票資料，透過 D3.js 資料視覺化套件以台灣地圖型式和縣市、區域、鄉鎮里三個組成的篩選列表，供使用者可指定區域來檢視該年度的總統大選數據。網站設計採用 2023 年 THE F2E 大會 UI 設計組作品進行響應式網頁設計，供電腦與手機裝置的使用者瀏覽。

作品開發時間：2023/11~2023/12

開發工具介紹

- 作業系統：Windows 11（64 bit）

- 開發工具：Visual Studio（版本 1.85.10）

- JavaScript 框架：Vue 3（Options API 寫法）

 - 套件：axios、xlsx、d3

- Vue3 建構工具（預處理器）：Vite （ Node.js 版本 18.17.1）

 - 套件：pinia

- 切版框架：Bootstrap 5

 - CSS 預處理器：SCSS

使用技術

-框架技術 Vue3 與 Bootstrap 5 開發

-SCSS 規劃響應式版型

-使用 Vue3 的 Pinia 進行狀態管理

-透過 xlsx 套件讀取資料來源 xlsx 檔案，並由 AJAX 技術讀取

-用 D3.js 套件呈現台灣地圖、甜甜圈圖的投票結果

-Vite 進行編譯與打包

資料來源

中選會「選舉及公投資料庫」（取2020年總統副總統資料）並經整理成 csv 與 xlsx 檔案。

「政府資料開放平臺」（直轄市、縣市界線(TWD97經緯度)）的 SHP 檔案，再自行經地圖編輯器 Mapshaper 將檔案轉成 GeoJSON 的 json 檔案。

設計稿資訊

Mission 2 - 總統即時開票全台地圖：個人組UI設計師Yuni。

其他說明

專案資料夾架構、相關網站連結等請詳見 GitHub Repo 該專案的 README.md 檔案。