Skip to main content
SimilarExport ZIP
100%

First Pass Radial Line Chart

✓ Published2🌍 Public
CCurran Kelleher
Last edited Jul 19, 2020
Created on Oct 18, 2019

This example shows the first pass at converting a line chart of USA airline on-time performance into a radial layout. Using React and D3 v5, it maps date values to angles via `scaleTime` and delay averages to radii through `scaleSqrt`, then draws the path with `d3.lineRadial` and `curveNatural`. The data comes from a CSV of daily departure delays, rendered as an SVG with no axes or tick labels yet.

AI-generated description

A line chart of USA airlines on-time performance.

Modified with the first steps towards a proper radial line chart visualization. Next steps would include:

  • Choosing a range for the angle scale that represents some periodic amount of time, like years, months, or weeks.
  • Adding axes (tick marks and labels) for angle and radius
MIT Licensed

Similar vizzes

Loading thumbnail…

First Pass Radial Line Chart

This radial line chart visualizes average departure delays for USA airlines on-time performance data, with the date mapped to angle and delay duration mapped to radius. The chart uses d3.lineRadial with curveNatural to create a smooth spiral-like path, while d3.scaleTime and d3.scaleSqrt handle the angle and radius scales. It marks a first pass toward a full radial visualization, with axes and periodic time ranges yet to be implemented. The React component renders SVG marks, reading data from a CSV of departure delay records.

XXinting Yao
92% match
Loading thumbnail…

The draft of radial chart

This radial chart visualizes the average departure delay of USA airlines over time, with dates positioned around the circle’s circumference and delay values mapped outward from the center. The closed path connects daily data points using `d3.lineRadial` with `curveLinearClosed`, rendered in SVG within a React setup. Angle and radius scales are created with `d3.scaleLinear`, and the chart is centered by translating the coordinate system. Data comes from an external CSV file on airline on-time performance. Axes and tick labels are not yet implemented.

XXinting Yao
86% match
Loading thumbnail…

Fork of The draft of radial chart

This radial chart visualizes average flight delays for USA airlines over time, with date values mapped to angles and delay durations mapped to radius. The React component uses d3-scale’s `scaleLinear` for both scales and renders a closed path via `d3.lineRadial` with `curveLinearClosed` in SVG. Data comes from a CSV of daily departure performance, loaded asynchronously with d3.csv. The chart currently displays the radial path without axis ticks or labels, as noted in the project’s documentation.

Pparniantaghipour
84% match
Loading thumbnail…

Untitled

A radial line chart displays flight delay trends over time, with a single black path tracing data points around a circular layout. Built with React and D3 v5, the visualization uses `d3.lineRadial` with `curveNatural` interpolation to map departure mean values to radius and date values to angle. The chart is currently a work-in-progress, lacking proper axis ticks and labels, and the angle scale has not yet been configured to represent periodic time intervals like months or years. Data comes from USA airline on-time performance records.

ZZaynaib (Ola) Giwa
83% match
Loading thumbnail…

Adding Axes to the radial chart

This radial chart displays average flight delay times for US airlines across months, using a circular time axis with two overlaid paths for departure and arrival delays. The visualization renders in SVG through React, using D3 v5 APIs including `scaleTime` with a full-circle range, `scaleLinear` for radial distances, and `lineRadial` with `curveLinearClosed` to create closed rings. Grid lines extend from the inner to outer radius at each month tick, with month labels positioned along the outer edge. Data comes from a CSV of airline performance statistics loaded via `d3.csv`.

XXinting Yao
82% match
Loading thumbnail…

Adding colorLegend to the radial chart

This radial chart visualizes the on-time performance of USA airlines, displaying average departure and arrival delays. The chart uses two colored lines to represent the departure and arrival data, with a color legend explaining the distinction between the two metrics. The visualization is built with React and D3 v5, using `scaleTime` and `scaleLinear` for the angle and radius scales, `lineRadial` for the plotted lines, and `curveLinearClosed` to close the paths. Data comes from a CSV file of flight performance statistics.

XXinting Yao
82% match
Loading thumbnail…

chartTest

This visualization displays multiple lines as a radial chart, using test data arrays to demonstrate the capabilities of D3.js. The chart employs `d3.lineRadial()` with cardinal curves to render the data, with each line represented in a different color from the `d3.schemeCategory10` palette. The visualization is rendered as an SVG element, created with D3's selection and append methods. The example includes code variants showing additional D3 features, such as time-scaled data, radial axes, grid lines, and axis labels, all within a React framework context.

JJesper Martinsson
75% match
Loading thumbnail…

On-time performance of the top-5 busiest airports in USA

This radial chart shows the on-time performance of the top-5 busiest US airports by plotting average departure delay across dates in a circular layout. Each airport forms a closed line polygon using `d3.lineRadial` with `curveLinearClosed`, colored by a categorical scale. An interactive color legend highlights one airport at a time, fading others via opacity. The visualization uses React for component structure, D3 v5 scales (`scaleTime`, `scaleLinear`, `scaleOrdinal`), and `pointRadial` for angle axis ticks, with data loaded from a CSV of airline performance metrics.

XXinting Yao
75% match