Svelte + D3: Line

100%

Svelte + D3: Line

✓ Published3🌍 Public

Last edited Nov 26, 2025

Created on Feb 16, 2024

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.

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…

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

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

93% match

Loading thumbnail…

Svelte + D3: Radial (II)

This radial line chart shows daily Atlantic sea surface temperatures from 1982 to 2024, with each year represented as a single spiral line. One line traces the temperatures through the 366 days of a year, with recent years (2023 and 2024) highlighted in pink and blue, while older years appear as translucent white strokes. The visualization uses d3.csv with autoType for data loading, d3.scaleLinear for the angle and radius scales, and d3.lineRadial with a Catmull-Rom curve to generate the spiral paths. The data comes from Climate Reanalyzer, and the SVG is rendered responsively using Svelte’s bind:clientWidth and bind:clientHeight.

MMatthias Stahl

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

87% match

Loading thumbnail…

Fork of Svelte + D3: Radial

A radial line chart visualizes daily surface temperatures from 1940 to 2024, with each year represented as a single closed ring. The visualization highlights 2023 and 2024 in distinct pink and blue strokes while older years appear as faint white loops, emphasizing recent climate trends. Using d3’s `lineRadial` generator with a Catmull-Rom curve, the code maps day-of-year to angles and temperature values to radii via `scaleLinear`. Yearly groups are separated with d3.groups, and opacity is scaled by year to show historical density. The SVG renders responsively, with data sourced from climatereanalyzer.org.

SSafrin La Batu

86% match

Loading thumbnail…

Fork of Svelte + D3: Radial

This radial visualization displays daily global surface temperatures from 1940 to 2024, with each year drawn as a circular ring using D3’s `lineRadial` generator with `curveCatmullRom` interpolation. The Svelte component loads CSV data, applies scales for day-of-year angle and temperature radius, and highlights 2023 in pink and 2024 in blue while older years appear as semi-transparent white strokes. The code uses `d3.csv`, `scaleLinear`, `extent`, and `groups` from D3 v7, with data sourced from Climate Reanalyzer.

MMing Li

85% match

Loading thumbnail…

line chart

This line chart visualizes temperature trends over time using a smoothed cardinal spline curve. The React-based code renders SVG marks, including a path for the line and circles for individual data points, with hover tooltips. It leverages d3's `scaleTime`, `scaleLinear`, and `line` API, along with `curveCardinal` for the interpolated curve. Data is loaded from a CSV file.

MMATTE-blz

79% match

Loading thumbnail…

[SR] Line Chart with React & D3

This visualization displays temperature readings over time as a smooth line chart. Data is loaded from a CSV file containing weekly San Francisco temperature measurements and rendered as an SVG using React. The implementation leverages D3 v6 utilities including `scaleLinear`, `scaleTime`, `extent`, `line`, and `curveNatural` to compute scales and draw the line path, while custom React components manage axes and interactive data point circles with tooltips.

Ssuserocc

77% match