Svelte + D3: Line (II)

100%

Svelte + D3: Line (II)

✓ Published0🌍 Public

Last edited Nov 26, 2025

Created on Feb 21, 2024

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.

AI-generated description

Daily atlantic sea surface temperatures since 1982. One line = one year.

Data source: https://climatereanalyzer.org/clim/sst_daily/

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

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

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

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

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

82% match

Loading thumbnail…

Fork of Svelte + D3: Reveal area chart

This example presents a colorful line and area chart that visualizes sequential numeric data across 63 points, with the area beneath the curve filled in pink. The visualization reveals itself through a sliding animation: a dark rectangle moves from left to right across the chart, initially allowing viewers to see only the line, then progressively uncovering the filled area beneath. The implementation uses Svelte for reactive bindings and D3 v7 APIs including `scaleLinear`, `extent`, `line`, `area`, and `curveCatmullRom` for smooth path generation. The SVG rect animation is driven by a CSS keyframe that translates its position across the viewport.

NNita

79% match

Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes temperature trends over time, with teal circles marking individual data points along a smoothed natural curve. The visualization uses React with D3 v5’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to generate an SVG path. Axis components are custom-built in JSX, applying Poppins typography and muted gray ticks against a clean background. Data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`, with native SVG `<title>` elements providing hover tooltips showing formatted timestamps.

MMaxene Graze

79% match