Heat Map — FreeCodeCamp Data Visualization Project

This is my third project from the FreeCodeCamp Data Visualization curriculum. I built it with React to practice integrating D3.js into a modern React setup (Vite), focusing on rendering an interactive heat map that meets FCC project requirements.

What this project does

• Visualizes monthly global land-surface temperature from 1753–2015
• Uses color to encode temperature variance relative to a base temperature (8.66℃)
• Provides axes for years (x) and months (y)
• Shows a tooltip with the formatted month/year and computed temperature on hover
• Displays a legend that maps color to temperature values

Tech Stack

• React 19 + Vite
• D3.js v7
• Vanilla CSS for styling

Implementation details (HeatMap.jsx)

The core logic lives in src/components/HeatMap.jsx, where D3 is used inside a React component via a ref and useEffect:

• Data loading:

  • Fetches the FCC dataset: global-temperature.json
  • Extracts monthlyVariance and baseTemperature

• SVG setup:

  • Removes any existing SVG to avoid duplicate renders when the effect runs
  • Creates an SVG with fixed width/height and padding

• Scales:

  • xScale (band): domain is all year values from the dataset
  • yScale (band): domain is months [1..12], rendered top-to-bottom
  • colorScale (sequential): uses d3.interpolateMagma over the variance extent

• Axes:

  • xAxis: bottom axis with decimated ticks (one every 10 years)
  • yAxis: left axis with month names via d3.timeFormat("%B")
  • Appends axes with FCC-required ids: x-axis, y-axis

• Cells:

  • Binds dataset to rect elements positioned by xScale(year) and yScale(month)
  • Sizes each cell by the scale bandwidths
  • Fills by colorScale(variance)
  • Adds FCC-required attributes: class="cell", data-year, data-month (0-indexed), data-temp (base + variance)

• Tooltip:

  • Uses a div #tooltip styled in HeatMap.css
  • On hover, shows month/year (formatted) and computed temperature (2 decimals)
  • Positions near the cursor; hides on mouseout

• Legend:

  • Builds a small separate SVG with discrete color boxes sampled from interpolateMagma
  • Defines a linear scale over the computed temperatures (base + variance)
  • Appends a bottom axis with ticks and 0.1 precision formatting

• Layout/labels:

  • Wraps everything in a container with a title (#title) and description (#description) matching the dataset

Overall, the component demonstrates how to wire up D3’s data-driven rendering inside React without extra wrappers, keeping React responsible for layout and D3 responsible for visualization primitives.

Getting Started

Prerequisites

• Node.js 18+ installed

Install and run locally

npm install
npm run dev

The app will start with Vite’s dev server; open the printed local URL (typically http://localhost:5173).

Build

npm run build

Deploy to GitHub Pages

This project is configured to deploy the dist folder via gh-pages.

npm run deploy

Project Structure

src/
	components/
		HeatMap.jsx       # D3 + React heat map implementation
		HeatMap.css       # Tooltip and container styles
	App.jsx             # Renders HeatMap component
	main.jsx            # App bootstrap

Demo

https://danfrunza.me/FreeCodeCamp-DataVisualization-HeatMap/

Credits

• Dataset: FreeCodeCamp Project Reference Data — Global Temperature
• Tests: FCC’s testable projects bundle included in index.html