Dark Theme Radial Line Chart

100%

Dark Theme Radial Line Chart

✓ Published0🌍 Public

Last edited Feb 21, 2025

Created on Feb 21, 2025

Forked from Line Chart with Multiple Lines

This radial line chart displays daily surface air temperatures across multiple years, using a dark theme with glowing inferno-colored lines radiating from a central point. Each year forms a continuous ring around the circle, with the angle representing the day of year and the radius mapped to temperature via `d3.scaleLinear`. The visualization uses `d3.lineRadial` for the paths, `d3.scaleSequential` with `interpolateInferno` for coloring, and `d3.pie` with `d3.arc` to position month labels around the outer edge. Data comes from the `@curran/daily-surface-air-temperature` package, and circular grid lines provide angular reference.

AI-generated description

MIT Licensed

Similar vizzes

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

82% match

Loading thumbnail…

Radial Line Chart

This example visualizes daily temperature data from San Francisco as a radial area chart. The circular layout uses time as the angular axis, with months labeled along concentric rings. Two filled bands show the range between average minimum and maximum temperatures, while a wider, lighter band displays the overall span of extreme temperatures. The chart is built with D3's radial scale and line generators, including `d3.scaleUtc()`, `d3.lineRadial()`, `d3.areaRadial()`, and `d3.curveLinearClosed()`. Data is read from a CSV file and aggregated by day of the year using `d3.rollup()`.

GGuillermo Pereyra Lucero

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

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

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

77% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This fork of the line chart displays daily surface air temperature as a series of colored lines, one for each year, with 2024 highlighted in red for emphasis. The visualization uses data from the `@curran/daily-surface-air-temperature` package, mapping day of year and air temperature to positions. It employs `d3.scaleLinear`, `d3.scaleSequential`, and `d3.interpolatePlasma` to color each year's line, while `d3.line` generates the paths. The `@curran/responsive-axes` library draws the axes, and `d3.flatGroup` groups data by year.

HHuxulm

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

76% match

Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example shows daily air surface temperatures from 1940 through 2024, with one line per year plotted against day of year. The current year (2024) is highlighted in red with a thicker stroke, while historical years fade into a plasma color scale. The code uses d3.scaleLinear, d3.scaleSequential, d3.flatGroup, and d3.line with a defined accessor. The @curran/responsive-axes library renders the axes, while @curran/daily-surface-air-temperature provides the dataset.

Ppeter.sime@gmail.com

76% match