Skip to main content
SimilarExport ZIP
100%

Fork of Heat Map: Monthly Global Land-Surface Temperature

✓ Published0🌍 Public
Sstanemurhula
Last edited Mar 17, 2021
Created on Mar 17, 2021

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.

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…

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

Fork of Earth Surface Temperature HeatMap

This fork of the Earth Surface Temperature HeatMap visualizes monthly global temperature anomalies from 1753 to 2015, using a base temperature offset to display absolute values in Celsius. The SVG rendering employs D3 v5's `scaleTime`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to position cells by year and month, while a custom color legend maps temperature ranges to a blue-to-red palette. Interactive tooltips, powered by the d3-tip library, reveal exact temperature and variance data on hover, with data fetched from a GitHub-hosted JSON file.

DDonald Bagwell
91% 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
89% 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
88% 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
87% 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
85% match