penspulse326 / f2e2023-2

F2E2023 Mission 2 - 總統即時開票全台地圖

此為團題組作品，合作成員：

• UI 設計：江江
• 前端工程：Shin

設計稿：連結
展示網頁：連結

註：網頁可能因部署而暫時無法查看，如遇此狀況請過 1 分鐘後再嘗試

技術整合

設計：

• Figma
• Bing Image Creator

前端：

• Tailwind
• React
• React-Router
• React-Select
• Recharts

檔案結構

src
├── assets //圖片資源
├── components //通用元件
│   └── Dashboard //開票頁面元件
├── constants //各類數據 JSON 檔
├── contexts //react context
├── pages //頁面元件
└── utils //通用函式

功能

開票結果圖表皆取自中選會公開資料 如有任何不合法之引用，請立即來信通知。

下拉式選單篩選

可以選取縣市、鄉鎮市區兩個層級：




選取後右側會產生對應的投票率與歷史資料（僅到縣市層級）：

互動地圖

游標移至地圖時有對應標籤提示地名，點擊後也會產生篩選效果產生圖表：

---

如有功能異常歡迎聯絡告知，感激不盡！