type
status
date
slug
summary
tags
category
icon
password
以臺北市公開資料的登革熱公衛調查數據，打造成互動儀表板：一個可互動操作、輔助理解的洞察工具。
研究背景
在這個專案中，我以臺北市資料大平台 — 臺北市登革熱病媒蚊密度調查結果資料作為素材，練習資料視覺化與前端儀表板設計。
開發這個即時互動式登革熱監測儀表板，將生硬資料經過視覺化整理與互動設計，就能讓民眾與防疫人員快速掌握各行政區的風險狀況，輔助防疫判斷。
主要功能
目標是讓使用者能快速切換月份、行政區看到該篩選條件下的分布、統計資料訊息。
大致有以下功能：
動態儀表板
- 支援資料匯入後即時更新圖表與表格
智慧篩選
- 雙層篩選條件（月份＋行政區），即時對應更新
互動式地圖
- 自製 SVG 向量地圖，支援點擊各行政區快速查看、顯示資料
多元圖表
- 趨勢線圖、長條圖、圓餅圖等多種資料維度視覺化呈現
動態表格
- 將資料表加入表頭固定、項目排序功能
設計與實作技術
主要是與 Kiro 進行 Vibe coding 協作，選用技術棧為自己熟悉的前端技術：
- HTML / CSS / JavaScript
- Chart.js：趨勢圖、比較圖、圓餅圖
- SVG 向量地圖：行政區互動標示
- RWD 響應式設計
- GitHub Pages：部署與公開展示
開發問題筆記
- 找不到合適的臺北市的 svg 圖，於是自描一個使用。
- 布氏指數的級距，參考疾管署資料去調整
- 改善使用者體驗：
- 專有名詞的補充說明放在 tooltip 小框
- RWD
- 尺寸斷點設計
- Tooltip 於不同裝置的效果（ hover , click ）
- 直式長條圖當X軸項目多時，於小裝置的效果很差，於是改用橫式長條圖。
- 資料載入時間
- 加入載入進度條
- MAP 行政區的換色、 tooltip 呈現的載入順序安排。
- 優化函式執行效率，降低頁面處理時間
實測效果
LIVE DEMO
頁面截圖
小小後記
做這個網頁，是自己想藉公開開放資料來和 Vibe coding 練手。一來可以複習一些前端、二來可以與 Kiro 多互動、了解如何下指令 prompt ，培養熟悉感XD
贊助支持鼓勵
如果這篇文章對你有所幫助或解惑，歡迎您賞我一杯啤酒🍻
