Fork of Svelte + D3: Radial

100%

Fork of Svelte + D3: Radial

✓ Published0🌍 Public

Last edited Feb 28, 2024

Created on Feb 28, 2024

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.

AI-generated description

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

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

MIT Licensed

Similar vizzes

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

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

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

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

88% match

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

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

84% match

Loading thumbnail…

Radial Line Chart Example

This radial line chart visualizes San Francisco daily temperature patterns across the calendar year, using data from the sfo-temperature.csv dataset. The chart displays four concentric radial areas, with the innermost band representing the average minimum and maximum temperatures (TAVG) in light steel blue, while the outer steel blue band shows the absolute minimum and maximum temperature ranges (TMIN, TMAX). The visualization uses d3.rollup to aggregate daily records into annual averages, d3.scaleUtc for angular positioning, and d3.lineRadial and d3.areaRadial for rendering the SVG paths with a closed linear curve.

PPeter Cordone

79% match

Loading thumbnail…

Fork of Project Momentum

This radial line chart displays monthly temperature anomalies for Massachusetts across two years, with each year drawn as a circular path. The visualization uses React with D3 v5 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`) to map dates to angles and anomaly values to radii. A color legend filters highlighted paths on hover, while `lineRadial` and `curveLinearClosed` generate the closed circular trajectories. Data originates from a CSV file containing 1895–1896 anomaly records, rendered as SVG elements.

Kkratikashetty1102@gmail.com

77% match