Interactive Heatmaps using D3.js on Observable

Hong Kong's monthly temperature data spans decades, but static visualizations fail to convey the nuances of seasonal changes and daily fluctuations effectively. A dynamic, interactive visualization is needed to provide deeper insights into historical temperature patterns across years and months.

The project is divided into two levels:

• Level 1: A heatmap that visualizes maximum or minimum monthly temperatures across years and months.
• Level 2: An enhanced heatmap that overlays mini line charts within each cell to visualize daily temperature changes for each month.

Both visualizations are implemented using D3.js in an Observable Notebook environment, allowing for interactivity and dynamic updates.

1. Data Aggregation:
   • Monthly maximum and minimum temperatures are aggregated for Level 1
   • Daily temperature records are processed for Level 2
2. Visualization Design:
   • Level 1 uses a heatmap layout with color-coded cells representing temperatures
   • Level 2 builds upon Level 1 by adding mini line charts within each cell to show daily fluctuations
3. Interactivity:
   • Radio buttons allow users to toggle between maximum and minimum temperature views
   • Tooltips display detailed information (e.g., year, month, average temperature) when hovering over cells
4. Global Scaling:
   • Cell colors are scaled globally based on average monthly temperatures
   • Mini line charts are scaled globally to ensure consistent representation across all cells

The project successfully delivers two interactive visualizations:

• Level 1 Heatmap:
  1. Users can toggle between maximum and minimum temperature views
  2. Tooltips provide detailed information about each cell's year, month, and temperature
• Level 2 Enhanced Heatmap:
  1. Mini line charts overlay each cell, showing daily maximum and minimum temperature variations
  2. Global scaling ensures consistent representation across all cells

These visualizations offer a dynamic way to explore Hong Kong's historical temperature data, making the information accessible and engaging for climate researchers, educators, and enthusiasts.