พัฒนาเว็บไซต์ Data Visualization ที่แสดงผลคะแนนและอันดับความน่าอยู่ของทั้ง 50 เขตในกรุงเทพมหานคร ผ่านการแสดงผลแบบ Interactive ทั้งในรูปแบบแผนที่และกราฟ โดยเน้นการประมวลผลฝั่ง Frontend เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ลื่นไหล รวดเร็ว และเข้าใจข้อมูลได้ง่ายที่สุด
ฟีเจอร์หลักของระบบ
Interactive Map ด้วย D3.js
- แสดงแผนที่กรุงเทพฯ แบบ SVG ครบทั้ง 50 เขต
- ระบบสีแบบ Choropleth Map กำหนดสีตามระดับคะแนนความน่าอยู่ของแต่ละเขต
- คลิกเขตเพื่อดูรายละเอียดคะแนนเชิงลึก
- Hover Tooltip แสดงข้อมูลสรุปแบบ Real-time
- Zoom และ Pan เพื่อดูรายละเอียดแผนที่ในแต่ละพื้นที่
กราฟแท่งแนวนอน (Horizontal Bar Chart)
- แสดงอันดับความน่าอยู่ของทั้ง 50 เขตเรียงลำดับจากมากไปน้อย
- Filter และ Sort ข้อมูลตามมิติต่าง ๆ ได้
ระบบเปรียบเทียบเขต (District Comparison)
- เลือกหลายเขตมาเปรียบเทียบคะแนนแต่ละด้านพร้อมกัน
- แสดงผลแบบ Side-by-side เพื่อให้เห็นความแตกต่างได้ชัดเจน
Frontend-first Architecture
- ประมวลผลและ Render ข้อมูลทั้งหมดฝั่ง Frontend
- ลด Server Request ให้น้อยที่สุดเพื่อความเร็วสูงสุด
- ใช้ D3.js ควบคุม DOM และ Animation ทุกจุดแบบ Custom
