CSCE-679-Data-Visualization-Assignment2

Level 1 & 2 (Basic): Link

HK Temperature Heatmap

Hong Kong Temperature Heatmap Visualization

This project creates a visualization of Hong Kong's monthly temperature data using D3.js. The visualization is a heatmap that shows temperature patterns across years and months.

Features

• Interactive heatmap visualization of Hong Kong temperature data
• Toggle between maximum and minimum temperature views
• Tooltip displaying detailed information when hovering over cells
• Color legend showing the temperature scale
• Responsive design that adapts to different screen sizes

Files

• index.html: Main HTML file for the visualization
• styles.css: CSS styles for the visualization
• script.js: JavaScript code with D3.js implementation
• temperature_daily.csv: Dataset containing daily temperature records for Hong Kong

Implementation Details

The visualization meets the requirements specified in the assignment:

1. The matrix shows years on the x-axis and months on the y-axis, with each cell representing a specific month of a year.
2. Users can switch between maximum and minimum temperature views using the buttons at the top.
3. When hovering over a cell, a tooltip appears showing the date and temperature value.
4. A color legend is provided to show the mapping between colors and temperature values.

How to Run

1. Ensure all files (index.html, styles.css, script.js, and temperature_daily.csv) are in the same directory.
2. Open index.html in a web browser.

Code Structure

The code is organized in a modular way:

• Data loading and processing functions are separate from visualization functions
• Event handlers manage user interactions
• Utility functions handle common tasks
• Clear variable and function naming for readability

Grading:

1. Correctness (50%): The data visualizations generated should look the same.
2. Redability (30%): The code should be human-readable (i.e., the name of the variables and functions should be intuitive, and there should be enough comments).
3. Maintainability (20%): The code should be modulized and easily modified.

Submission:

Please create a github repository under your github account, and submit the URL of that repository to Canvas.