Projects

Interactive Heatmaps using D3.js

D3.js Observable Data Visualization
Impact

This project provides an interactive visualization of Hong Kong's monthly temperatures from 1997 to 2017, enabling users to explore historical temperature trends dynamically. The visualizations offer insights into seasonal temperature variations and daily fluctuations, making them valuable for climate analysis and educational purposes.

Problem Statement

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.

Approach

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.

Methodology

  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 when hovering over cells

Result

The project successfully delivers two interactive visualizations:

  • Level 1 Heatmap: toggle between max/min temperature views with detailed tooltips
  • Level 2 Enhanced Heatmap: mini line charts overlay each cell, showing daily maximum and minimum temperature variations with global scaling for consistent representation

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.

View Resume