# Taiwan Map Interactive Visualization Assignment Guide

## Introduction
This assignment aims to create an interactive map of Taiwan to display election data for various counties and townships. Students will employ D3.js, TopoJSON, and AJAX to accomplish this task.

## Objectives
- Display a map of Taiwan's counties.
- Implement interactive features for the counties.
- Show party colors for counties based on API data.
- Display election result charts at both county and township levels.
- Offer functionality to switch between different election years.
- Implement Zoom In functionality for counties and a return to the previous view feature.

## Assignment Requirements

### 1. Display Taiwan's County Map (15%)
- Ensure the map correctly displays all county boundaries.
- Utilize `taiwan-county.json` for geographic data of counties.
- Reference Resource: [D3.js Map Interaction](https://github.com/jacychutw/d3-practice-GYM)
- 

### 2. County Interaction Features (10%)
- Implement hover effects to highlight counties and display their names.

### 3. County Party Color Display (20%)
- **Basic Display (10%):** Change the color of each county based on the leading party, utilizing data fetched from the provided API. It is essential to use the API for getting election data.
- **Advanced Vote Rate Coloring (10%):** Colors should vary in intensity based on different vote rates, again using data from the API. This part of the task requires manipulating the color intensity to reflect the variation in vote rates accurately.
- API Documentation: [Election Data API](https://hackmd.io/@lrs0614tw/SyBMVb89T)

### 4. County and Township Election Chart Display (10%)
- Implement an interactive feature where an election result chart automatically appears when the user hovers over a county or township.
- The chart could be in any format (bar, pie, etc.) and should present the election data clearly.
- You can use any suitable library for this task, such as D3.js or Chart.js, based on their preference and comfort level with these tools.

### 5. Township Map Switching (10%)
- Enable switching to the township map after clicking on a county.
- Utilize `taiwan-town.json` for township-level geographic data.

### 6. County Zoom and Filter Feature (5%)
- Develop a functionality where users can zoom in on a selected county. The zoom should center and scale the county to an appropriate size for detailed viewing.
- Implement a filter to display only the selected county during the zoom-in. This filter is key to focusing on the specific county and avoiding other map elements that could clutter the view.
- Utilize the provided centers for each county to guide the zooming functionality.

var centers = {
    "基隆市": { center: [121.69, 25.11] },
    "臺北市": { center: [121.56, 25.08] },
    "新北市": { center: [121.64, 24.99] },
    "桃園市": { center: [121.23, 24.86] },
    "新竹市": { center: [120.95, 24.78] },
    "新竹縣": { center: [121.17, 24.69] },
    "苗栗縣": { center: [120.94, 24.51] },
    "臺中市": { center: [120.95, 24.22] },
    "彰化縣": { center: [120.45, 24.00] },
    "南投縣": { center: [120.98, 23.84] },
    "雲林縣": { center: [120.37, 23.66] },
    "嘉義縣": { center: [120.54, 23.43] },
    "嘉義市": { center: [120.45, 23.48] },
    "臺南市": { center: [120.34, 23.15] },
    "高雄市": { center: [120.58, 22.98] },
    "屏東縣": { center: [120.63, 22.39] },
    "臺東縣": { center: [121.18, 22.70] },
    "花蓮縣": { center: [121.38, 23.74] },
    "宜蘭縣": { center: [121.60, 24.55] },
    "澎湖縣": { center: [119.50, 23.47] },
    "金門縣": { center: [118.32, 24.45] },
    "連江縣": { center: [120.21, 26.17] },
};


### 7. Township Party Color Display (5%)
- Display the leading party color for each township.

### 8. Township Election Chart Display (5%)
- Show the election result chart for the township on hover.

### 9. Data Year Switching (15%)
- Develop a feature that allows users to switch between 2024, 2020, and 2016 election data in real-time. This functionality should be intuitive and provide immediate updates on the map.
- **County-Level Data Switching (10%)**
- **Township-Level Data Switching (5%)**


### 10. Return to Previous Layer Functionality (5%)
- Test the functionality of the “Return to Previous Layer” button.

## Technical Guide
- **D3.js**: Used for creating and manipulating SVG elements for the map.
- **TopoJSON**: Employed for processing geographical data.
- **AJAX**: Utilized for fetching election data from the backend API.

## Resources
- [D3.js Official Documentation](https://d3js.org/)
- [TopoJSON GitHub Repository](https://github.com/topojson/topojson)
- [AJAX Tutorial](https://www.w3schools.com/js/js_ajax_intro.asp)