Skip to main content
SimilarExport ZIP
100%

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

✓ Published1🌍 Public
XXinting Yao
Last edited Oct 31, 2019
Created on Oct 31, 2019

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.

AI-generated description

A radial chart of USA airlines on-time performance.

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

Things doing:

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

Things to do:

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

00:44 - Part1: Interesting Works Done 04:22 - Part2: Final Project - USA Airports On-time Performance 08:49 - Part3: Future Works

Github: https://github.com/Echo226/dataviz-usa-flights-performance Vizhub: https://beta.vizhub.com/Echo226/40f6502388de4c4d8e985fffbff1d23e

MIT Licensed

Similar vizzes

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
97% match
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
97% 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
96% match
Loading thumbnail…

群像

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.

JJiaMing
81% match
Loading thumbnail…

Radial

A radial chart displays average flight delays for US airlines across months, with two overlaid paths comparing departure and arrival delays. The visualization uses React with D3 v5’s `lineRadial` and `curveLinearClosed` to create circular lines, while `scaleTime` maps dates to angles and `scaleLinear` maps delay values to radial distances. An ordinal color scale distinguishes the two delay types, and a custom SVG legend explains the color encoding. Data comes from a CSV file of airline performance metrics loaded via `d3.csv`.

GGuillermo Pereyra Lucero
80% match
Loading thumbnail…

USA AIRPORT ON_TIME PERFORMANCE

This map visualizes the locations of U.S. airports and their on-time performance. Each circle represents an airport, positioned using the `d3.geoAlbers` projection and rendered via `d3.geoPath` in an SVG. The choropleth-like map shows state boundaries and interiors using TopoJSON data from the us-atlas package, while airport data is loaded from a CSV with the `d3.csv` API. Hovering over a circle reveals the airport name and state via a native SVG `<title>` element. The visualization is built with React 16 and D3 v5.

XXinting Yao
80% match
Loading thumbnail…

USA AIRPORT ON_TIME PERFORMANCE

This visualization displays the on-time performance of US airports, plotting each city with a gray circle positioned according to its latitude and longitude. The map is rendered using React and D3’s geoAlbers projection, with state boundaries, graticules, and a sphere background drawn via d3.geoPath. City coordinates are loaded from a CSV file using d3.csv, while state topology comes from TopoJSON, with interior borders generated using topojson’s mesh function. The visualization uses d3.v5 and React 16.9, with all marks rendered as SVG elements.

Yyyaaa1
80% 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
79% match