Skip to main content
SimilarExport ZIP
100%

Heat Map: Monthly Global Land-Surface Temperature

✓ Published3🌍 Public
Ssriramvsharma
Last edited Jul 22, 2020
Created on Jul 21, 2020
Forked from Making a Bar Chart

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.

AI-generated description

Some code I ported from codepen to Vizhub. It's the third FreeCodeCamp challenge in the Data Visualisation track. https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-heat-map

MIT Licensed

Similar vizzes

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
97% 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
92% match
Loading thumbnail…

Monthly Global Land-Surface Temperature

This visualization displays monthly global land-surface temperature anomalies from 1753 to 2015, using a base temperature of 8.66°C. A heatmap grid shows each month-year combination as a colored cell, with colors ranging from deep red (cold) to dark blue (warm). The D3.js code fetches JSON data from a FreeCodeCamp repository, scales the temperature values linearly, and renders an SVG with axes for years and months. d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft handle the scales and axes, while a separate legend shows the color scale.

Ssriramvsharma
91% match
Loading thumbnail…

Earth Surface Temperature HeatMap

This heatmap visualizes Earth’s surface temperature variations from 1753 to 2015, with each cell representing a month’s temperature relative to a base value. The color scale uses a custom ordinal scheme ranging from dark red (warm) to dark blue (cool), while hovering over a cell displays a tooltip with the exact month, temperature, and variance. The visualization is built with D3 v5, using `d3.scaleTime` for axes, `d3.scaleOrdinal` for colors, and `d3-tip` for interactive tooltips. Data comes from a JSON file containing `baseTemperature` and `monthlyVariance` values.

Mmandadi1999
88% 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
87% match
Loading thumbnail…

Monthly Global Land Surface Temperatures

This visualization displays monthly global land surface temperatures from 1753 to 2015, with each cell’s color representing variance from the 1951–1980 average. A hover tooltip reveals the exact month, year, and temperature anomaly. The SVG chart uses d3.scaleTime for the x-axis, d3.scaleQuantize for color mapping, and d3.json to load the FreeCodeCamp dataset. Animated transitions appear only in the tooltip’s opacity changes, while a gradient legend is built with d3.scaleLinear and linearGradient stops.

Vvaynexie
87% 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 Project #3: Heat Map Project

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.

CCasualWanderer20XX
86% match