Temperature over time

100%

Temperature over time

✓ Published0🌍 Public

Last edited Dec 21, 2024

Created on Dec 19, 2024

This chart shows daily global surface temperatures from 1940 to 2024, with one line per year plotted against the day of the year. The most recent two years stand out in bright colors—2024 in blue and 2023 in pink—while earlier years appear as faint white lines, revealing long-term warming trends. The visualization uses the Svelte framework and the d3 library’s `line`, `scaleLinear`, and `curveCatmullRom` APIs to render SVG paths. Data comes from Climate Reanalyzer, with opacity scaled by year to emphasize the latest records.

AI-generated description

Daily surface temperatures since 1940. One line = one year.

Data source: https://climatereanalyzer.org/clim/t2_daily/?dm_id=world

MIT Licensed

Similar vizzes

Loading thumbnail…

Svelte + D3: Line

This visualization displays daily surface temperatures since 1940, with one line per year rendered as an SVG path. The code uses Svelte’s reactivity and D3’s `csv`, `scaleLinear`, `extent`, `line`, `groups`, and `curveCatmullRom` to map day-of-year and temperature values. Recent years (2023–2024) are highlighted with distinct colors and increased opacity, while older years fade into the background. Data comes from Climate Reanalyzer’s world daily temperature record, with a dark gradient backdrop and legend overlay.

MMatthias Stahl

84% match

Loading thumbnail…

Fork of Svelte + D3: Line

This example visualizes daily global surface temperatures from 1940 to 2024, with each year drawn as a separate line across the day-of-year axis. The visualization highlights the two most recent years—2023 in pink and 2024 in blue—while older years appear as semi-transparent white lines, making recent warming trends immediately visible. The code uses d3.csv with autoType to load data, then builds scales with scaleLinear and generates smooth paths via d3.line with curveCatmullRom. A custom opacity scale fades historical years, while the current and previous year are drawn with full opacity and thicker strokes. The data originates from ClimateReanalyzer’s daily surface temperature records, and the visualization is rendered as SVG within a Svelte component.

SSafrin La Batu

83% match

Loading thumbnail…

daily surface Temps

This visualization shows daily surface air temperatures across multiple years, with each year rendered as a colored line and the current year (2024) highlighted in red with greater opacity and stroke width. The chart uses a time-scaled x-axis for day of year and a linear y-axis for temperature, with a sequential turbo color scale encoding the year value. Built with D3, the code employs `scaleTime`, `scaleLinear`, `scaleSequential`, `flatGroup`, `line`, and `extent` to generate the multi-line plot from the daily surface air temperature dataset. A responsive axis library handles the axes and resizing behavior.

DDonald Bagwell

82% match

Loading thumbnail…

Svelte + D3: Line (II)

The chart displays daily Atlantic sea surface temperatures from 1982 to 2024, with each year drawn as its own line. Recent years are highlighted—2024 in blue and 2023 in pink—while older years appear as faint white strokes, emphasizing the temperature trajectory over time. Built with Svelte, it uses D3's `csv` and `autoType` to load data, `scaleLinear`, `extent`, and `line` with `curveCatmullRom` for the paths, and `groups` to structure lines by year. The SVG renders against a dark gradient background, with an overlay legend identifying the color coding.

MMatthias Stahl

82% match

Loading thumbnail…

Line Chart Global Temperature

This line chart visualizes global average temperature trends over time, plotting temperature values against yearly dates. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for axes and a `d3.line` generator to create the orange trend line. Data is loaded remotely from a GitHub-hosted CSV file containing cleaned temperature records, with the code handling missing or empty data through error messages. The chart includes labeled axes, a legend, and a clean white background with subtle shadow styling.

Sshabanasyed2266@gmail.com

80% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart visualizes daily surface air temperature data, colored by year, with the year 2024 highlighted in red. Each line represents a year’s temperature variation over the day of the year, using a plasma color scale for other years. The visualization relies on `d3.scaleLinear`, `d3.extent`, and `d3.flatGroup` from the D3 library to group data and map values. Axes and labels are generated via `@curran/responsive-axes`, while the chart updates responsively using `observeResize`.

CCurran Kelleher

79% match

Loading thumbnail…

Temperature line chart

This line chart visualizes temperature fluctuations over time, using a dataset from the "Sense Your City" collection. The chart’s smooth, curved line connects individual data points, each marked by a small circle that reveals the exact temperature value via a tooltip on hover. Built with React and D3 v6, it employs `scaleTime` and `scaleLinear` for axes, while `line` with `curveNatural` renders the smoothed path. The SVG visualization includes custom-styled axes and labels, with interactive hover effects on the data points.

Ssurikmeetr

79% match

Loading thumbnail…

Svelte + D3: Radial

This radial chart displays daily global surface temperatures from 1940 to 2024, with each year drawn as a single circular path. The visualization highlights 2023 and 2024 in distinct colors, while older years appear as faint white rings. Using d3.lineRadial with a curveCatmullRom, the code maps day-of-year to angle and temperature values to radius via d3.scaleLinear. Data is loaded from a CSV using d3.csv with autoType, grouped by year with d3.groups, and rendered as SVG paths. The background uses a dark radial gradient, with an opacity scale differentiating historical from recent years.

MMatthias Stahl

79% match