primer

100%

✓ Published0🌍 Public

CCsar171991

Last edited Jul 17, 2023

Created on Jul 17, 2023

This radial chart shows daily temperature patterns over a year, with light-steelblue bands for the full min–max range, steelblue bands for the typical interquartile range, and a line tracing the daily average. Built with D3’s `scaleUtc`, `scaleRadial`, `lineRadial`, and `areaRadial`, it renders circular month labels and radial gridlines. The data comes from the JSON file, which records daily average, minimum, and maximum temperatures.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

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

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

73% match

Loading thumbnail…

Untitled

This radial bar chart displays the distribution of sea surface temperatures across different climate classes, with each colored band extending outward from a central donut. The chart uses D3.js v6 with SVG rendering and React, loading CSV data from a GitHub gist. The code employs d3.scaleBand for angular positioning and d3.scaleRadial for radius values, while d3.arc constructs the annular bars with padded gaps. Labels are rotated and positioned around the perimeter, with text anchors adjusted to maintain readability. The inner radius is fixed at 90, and the outer radius scales up to the maximum data value of 39,999.

Yyungchiau

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

73% match

Loading thumbnail…

Dark Theme Radial Line Chart

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.

CCurran Kelleher

72% match

Loading thumbnail…

Radar Chart

A radar chart displays monthly temperature anomalies for a selected year, using a radial time scale for months and a linear scale for anomaly values. A color scale maps anomaly magnitude, from blue for cooler to red for warmer conditions. A slider menu lets viewers choose the year. The visualization uses D3 v7’s `scaleTime`, `scaleLinear`, `lineRadial`, and `scaleSequential` with the `interpolateRdBu` color scheme, rendering points and a connected path via SVG. Data comes from Massachusetts temperature records spanning 1895 to 2022.

Kkratikashetty1102@gmail.com

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

70% match