Skip to main content
SimilarExport ZIP
100%

群像

✓ Published0🌍 Public
JJiaMing
Last edited Apr 12, 2020
Created on Apr 12, 2020

A radial chart visualizes on-time performance for the five busiest US airports across the year, with each airport drawn as a distinct colored closed curve. Angular position encodes date while radius represents average departure delay in minutes. Hovering over the interactive color legend highlights the corresponding airport’s loop and fades the others. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.nest`, `d3.pointRadial`, and `d3.curveLinearClosed` to render SVG paths from CSV data on flight delays.

AI-generated description

A radial chart of USA airlines on-time performance.

Things to do:

  • Add axes (tick marks and labels) for radius
  • Choose a different projection for USA map to add Alaska and Hawaii

Things doing:

  • Adding axes (tick marks and labels) for angle: using pointRadial

Things have done:

  • Used a cleaner way to transform the chart to center
  • Learned how to close the line: using d3.curveLinearClosed
  • Used a cleaner way to choose the range for radiusScale: innerRadius, outerRadius, angleAxisOffset
  • Added a colorLegend
  • Made the colorLegend interactive
MIT Licensed

Similar vizzes

Loading thumbnail…

[test] On-time performance of top-5 busiest airports in USA

This radial chart shows the on-time performance of the five busiest US airports, with each colored ring representing an airport’s average departure delay over time. The chart uses D3’s `scaleTime` for the angular axis and `scaleLinear` for the radial axis, with `lineRadial` and `curveLinearClosed` to draw the closed paths. An interactive color legend, built in React, filters and highlights each airport’s trajectory on hover. Data is loaded from a CSV file using D3’s `csv` parsing.

JJacob Whitt
81% match
Loading thumbnail…

[test] On-time performance of top-5 busiest airports in USA

This radial chart compares on-time performance across the five busiest US airports using D3 v5 and React. Monthly average departure delays are plotted along a circular time axis, with each airport shown as a distinct colored line. The visualization includes an interactive color legend that highlights a selected airport while fading the others, and angle tick marks label the months. Data comes from a CSV file loaded via d3.csv. The code uses d3.lineRadial with curveLinearClosed, d3.scaleTime, d3.scaleOrdinal, and d3.pointRadial for positioning.

XXinting Yao
81% match
Loading thumbnail…

[test] On-time performance of top-5 busiest airports in USA

A radial line chart shows the average departure delay for the five busiest US airports across months, with each airport’s performance traced as a colored, closed loop around a circular timeline. A legend indicates airport names and colors; hovering over a legend entry highlights that airport’s trace while dimming the others. The visualization is built with React and rendered as an SVG, using D3 v5 functions such as `scaleTime` and `scaleLinear` for the angle and radial axes, `pointRadial` to position ticks, `curveLinearClosed` to close each path, and a custom `ColorLegend` component. Data is loaded from a CSV file.

Mmkt-ds
80% 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
80% 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
77% 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
77% match
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
76% 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
76% match