fCC D3 Project #3: Heat Map Project

100%

fCC D3 Project #3: Heat Map Project

✓ Published0🌍 Public

Last edited Sep 29, 2025

Created on Sep 20, 2025

This heat map visualizes global land temperatures from 1753 to 2015, with each cell representing a month-year combination colored by its deviation from a baseline of 8.66°C. The SVG rendering uses D3.js scales for axes and color mapping, fetching data from freeCodeCamp’s GitHub repository. Tooltips and a legend are implemented to show exact values on hover, while the color gradient divides temperature ranges into nine discrete categories via a custom `applyColor` function.

AI-generated description

Not finished. Need to implement.

Legend (Check)
Tooltip (Check)
Color Grades (Check)
Fulfill the rest of the tests in CodePen. (Check)

Project complete.

Will do more adjustments at a later time.

MIT Licensed

Similar vizzes

Loading thumbnail…

fcc-d3-01

A heatmap visualizes monthly global land-surface temperature variations from 1753 to 2015, with the base temperature displayed as a subtitle. Each cell represents a month-year pair, colored by year and opacity scaled by temperature deviation. The visualization uses d3.json to load data from a freeCodeCamp repository, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand for scales. SVG rendering includes custom axes, ticks, and a hover tooltip that displays the exact year, month, and temperature values.

SSiddharthMittal07

87% match

Loading thumbnail…

Fork of Heat Map: Monthly Global Land-Surface Temperature

This fork of a FreeCodeCamp project renders a heat map of monthly global land-surface temperature anomalies from 1753 to 2015, with color encoding temperature values relative to a base of 8.66°C. Each cell represents a month-year combination, and hovering reveals a tooltip with the exact temperature and variance using the d3-tip library. The visualization uses d3.v5 with SVG rendering, fetching data from a remote JSON file, and implements custom color scales, time-based axes, and a color legend within a `d3.select`-driven SVG container.

JJesus Angel

86% match

Loading thumbnail…

Visualize Data with a Heat Map| fcc project-3

This heat map visualizes monthly global land-surface temperature anomalies from the freeCodeCamp ProjectReferenceData dataset, showing temperature variance across years and months. The visualization uses a color scale ranging from light blue to dark red to represent temperature deviations from the base temperature, with a legend indicating the temperature ranges. Built with React and D3 v7, the map uses `scaleLinear` for the x-axis (years), `scaleBand` for the y-axis (months), and SVG rectangles for each cell. Interactive tooltips display the exact year, month, temperature, and variance on mouse hover.

MMohammed Banani | MbDev

86% match

Loading thumbnail…

Heat Map: Monthly Global Land-Surface Temperature

This heat map visualizes monthly global land-surface temperatures from 1753 to 2015, with each cell colored according to temperature variance from a base of 8.66°C. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the year and month axes, `scaleOrdinal` with a custom color range for temperature values, and `d3-tip` for interactive tooltips displaying month, temperature, and variance details. A color legend with discrete temperature bands appears beneath the chart. Data comes from the FreeCodeCamp ProjectReferenceData GitHub repository.

Ssriramvsharma

86% match

Loading thumbnail…

Fork of Visualize Data with a Heat Map| fcc project-3

This heat map visualizes monthly global land-surface temperature anomalies from 1750 to 2015, with each cell colored by variance from a base temperature. The visualization uses a blue-to-red diverging color scale to represent temperature deviations, and a legend displays the value ranges. Built with React and D3 v7, the chart renders as an SVG with interactive tooltips that show the year, month, and temperature on hover. The data comes from the freeCodeCamp Project Reference Data repository, processed using D3's `scaleLinear`, `scaleBand`, and `json` APIs.

RRonald Ngounou

86% match

Loading thumbnail…

fcc-d3-03

This example visualizes monthly global land-surface temperature anomalies from 1753 to 2015, using a heatmap of red rectangles over an SVG. It relies on React and D3 v7 (via `json`, `scaleLinear`, and `scaleBand`) to render axes, tooltips, and color opacity based on temperature variance. The data comes from the freeCodeCamp global-temperature JSON file. Hovering over a bar displays the year, month, actual temperature, and variance using a positioned tooltip.

SSiddharthMittal07

85% match

Loading thumbnail…

Heat Map: Monthly Global Land-Surface Temperature

This heat map visualizes monthly global land-surface temperature anomalies from 1753 to 2015, with a base temperature of 8.66°C. Each cell represents a month and year, colored by temperature variance using a custom 14-color scale. The visualization is built with D3 v5, using `scaleTime` for axes, `scaleLinear` for color mapping, and SVG rectangles for rendering. Data is fetched from the FreeCodeCamp ProjectReferenceData JSON source, while the legend and axis labels are generated with `axisBottom` and `axisLeft`. The code includes commented-out tooltip logic, but no interactive tooltips are active in the final render.

Ssriramvsharma

85% match

Loading thumbnail…

Fork of Heat Map: Monthly Global Land-Surface Temperature

This visualization displays monthly global land-surface temperature anomalies from 1753 to 2015, with each cell representing a month-year combination colored by temperature variance from a base of 8.66°C. The tooltip reveals exact temperature and variance values on hover. Built with D3 v5, it uses `scaleTime` for axes, `scaleOrdinal` for the color legend, and `d3-tip` for interactive tooltips. Data comes from the FreeCodeCamp global-temperature JSON, rendered as SVG rectangles with a custom color scale ranging from deep blue to dark red.

Sstanemurhula

83% match