Skip to main content
SimilarExport ZIP
100%

fcc-d3-01

✓ Published0🌍 Public
SSiddharthMittal07
Last edited Mar 8, 2022
Created on Mar 7, 2022
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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
92% 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…

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
85% 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
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
84% 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
83% 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
83% match