100%

Global Climate Temperature Trends

✓ Published0🌍 Public

Last edited Jul 28, 2025

Created on Jul 28, 2025

Forked from React & D3 Vibecoding Starter

This interactive visualization displays global temperature anomalies from 1880 to 2020, with data relative to the 20th-century average. Users can toggle between line and area chart views, adjust line smoothing with d3.curveLinear, curveMonotoneX, or curveBasis, and filter by decade through a button panel. Hover tooltips reveal year-specific values, while a statistics sidebar calculates trends, volatility, and range using linear regression. The visualization uses D3.js v7 scales and axes within a React framework, with data loaded from a CSV file.

AI-generated description

Global Climate Temperature Trends Visualization

An interactive D3.js visualization showing global temperature anomalies from 1880-1928, built with React and modern JavaScript.

Features

Interactive line and area chart views
Customizable line smoothing options
Hover tooltips with detailed information
Real-time statistics and trend analysis
Responsive design
Clean, modern interface

Controls

Visualization Type: Toggle between line chart and area chart
Line Smoothing: Choose from linear, monotone, or smooth curves
Interactive Elements: Hover over data points for details

Data

Temperature anomalies are shown relative to the 20th century average, with:

Red indicating above-average temperatures
Blue indicating below-average temperatures

Usage

Open index.html in a modern web browser. No build step required.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive React and D3.js visualization displays global temperature anomalies from 1880 to 2023, comparing each year's deviation against the 1951-1980 baseline. The chart combines a dual-color area chart (red for warming, blue for cooling) with a trend line calculated via linear regression on data since 1980. Users can hover over data points for detailed tooltips and toggle climate event milestones, while summary statistics highlight the hottest and coldest years. Built with React 19, D3 v7, and NASA GISS data, the visualization uses `scaleLinear`, `area`, and `line` generators to render the animated data.

NNita

82% match

Loading thumbnail…

Global Temperature

This visualization shows the change in global, Northern Hemisphere, and Southern Hemisphere temperatures from 1880 to 2014, with each time series as a separate line. A color legend identifies the three regions. Built with D3 v5, it loads CSV data and uses `d3.scaleTime` and `d3.scaleLinear` for axes, while `d3.line` with `curveBasis` generates the paths. The chart renders as SVG, with axes and line styling defined in CSS.

Gglitched-potato

80% match

Loading thumbnail…

Global temparature Scatter Plot

This scatter plot shows global temperature anomalies from 1880 to 2016, comparing yearly mean values from two sources: GCAG and GISTEMP. The visualization uses d3.csv to load the data and d3.scaleLinear with extent to map years and temperature values to SVG coordinates. Axes are generated with d3.axisBottom and d3.axisLeft, displaying grid lines, while red semi-transparent circles represent each data point. The plot reveals the overall upward trend in global temperatures across the decades.

AArvind Lairenjam

80% match

Loading thumbnail…

Global vs Local Temperature Multi-series line chart

This interactive visualization displays yearly average temperature trends for individual countries from 1750 to 2013, using a multi-series line chart with a dropdown menu to switch between countries. The D3.js v7 code loads CSV data, aggregates monthly records into yearly averages, and renders an SVG line chart with axes, dots, and hover tooltips. It uses d3.csv, d3.rollups, d3.scaleLinear, d3.line with curveMonotoneX, and d3.schemeTableau10 to color the selected country’s line.

Sshabanasyed2266@gmail.com

78% match

Loading thumbnail…

Area Chart of Global Temperatures

This area chart visualizes global temperature anomalies over time, with the y-axis representing temperature anomaly in degrees Celsius and the x-axis showing the year. The visualization uses D3.js version 7 to generate the SVG rendering, employing the `.area()` API to create the filled area and adding interactive tooltips through circle elements that respond to mouseover events, displaying year and temperature values for each data point.

AAreeba Hassan

78% 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

75% match

Loading thumbnail…

Assignment 6

This multi-series line chart visualizes yearly average global temperatures from 1948 to 2023, comparing maximum, mean, and minimum temperature trends using three colored lines (red, blue, and green). The visualization aggregates daily temperature records from a CSV file by year using d3.rollup, then renders the aggregated data as an SVG with d3.line and curveMonotoneX. Points are sampled every fifth year as markers, with axes implemented via d3.axisBottom and d3.axisLeft. A legend identifies each metric, and the chart includes axis labels and a descriptive title.

BBhargav Reddy

75% 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

75% match