Skip to main content
SimilarExport ZIP
100%

Fork of Pie Chart for USA Flights On-time Performance

✓ Published0🌍 Public
RRevanthGrreddy
Last edited Jul 2, 2022
Created on Jul 2, 2022

This pie chart visualizes USA flight on-time performance by depicting monthly departure delays as radial segments. Each slice’s length corresponds to the delay value, with all slices rendered in light blue against a white stroke. The visualization uses React for component management and D3’s `arc` generator to compute the SVG paths, with data loaded via D3’s `csv` parser. The chart reads from a CSV file sourced from a GitHub gist on flight delay data.

AI-generated description

A Pie chart for USA Flights on-time Performance Analysis using the React & D3.

This visualization is an analysis about USA flights on-time performance.

Experience :

1> While making this visualization, data pre-processing took me 2 days to get the final result, which is the USA flights delay condition by month. I also got the result by date/day/week and will play it around later.

2> Drawing this bar chart using React & D3 was much more difficult than using vega-lite-api, but it was also more interesting when I created all elements one by one by myself.

One idea I got from these two weeks' assignment was, when I want to realize a visualization in the future, I could use vega-lite-api first to try out all the ideas, and after choosing the best one I can use React & D3 to realize it. However I am not sure if my understand is right or not lol.

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie Chart for USA Flights On-time Performance

A pie chart visualizes USA flight on-time performance by mapping each month to a slice, with the radial extent of each slice sized by the average departure delay. The chart uses a donut layout with an inner radius, rendering data loaded from a CSV file via `d3.csv`. Built with React and D3 v5, it employs the `d3.arc` generator to create SVG paths, with each slice’s outer radius scaled by the delay value. The visualization highlights monthly delay patterns in a simple, interactive-free format.

XXinting Yao
93% match
Loading thumbnail…

Pie Chart for USA Flights On-time Performance

This interactive pie chart visualizes USA flight on-time performance by showing departure delay hours for each day of the year. Each slice represents a single day, with the radial length of the slice encoding the delay value. Built with React and D3 v5, the visualization uses D3’s `arc` function to generate the SVG paths, with input data from a CSV file fetched via D3’s `csv` method. The chart is rendered entirely as SVG elements, where each slice’s outer radius is proportional to its corresponding delay metric.

XXinting Yao
93% match
Loading thumbnail…

Fork of Lollipop Chart USA Flights On-time Performance

This visualization presents the on-time performance of US flights by comparing average departure and arrival delays for each day of the month. A lollipop chart connects two circles per day, with green circles marking departure delays and purple circles showing arrival delays, positioned along a shared time axis. The chart is built using D3 v4’s `scaleLinear` and `scaleBand` functions, with data drawn from a CSV file containing daily delay statistics. The SVG rendering uses D3 selections to append lines and circles, while React manages the overall application structure.

KKetaki789
82% match
Loading thumbnail…

Fork of Interactive Pie Chart showing percentage of flights delayed by 15 mins w.r.t Departure

This interactive donut chart visualizes the percentage of flights delayed by more or less than 15 minutes relative to their scheduled departure. Each slice represents a delay category, colored orange for delays exceeding 15 minutes and blue for shorter delays, with hover tooltips revealing each category’s share of total delay time. The visualization is built with D3.js v5, using `d3.pie` and `d3.arc` for the donut geometry, `d3.scaleOrdinal` for colors, and SVG rendering. Data comes from a flight delay analysis dataset, aggregated via `d3.nest` to sum departure delays by category.

GGauri Jare
82% match
Loading thumbnail…

Bar Chart for USA Flights Delay _ React & D3

This interactive bar chart visualizes the average departure delay for USA flights by month. Each horizontal purple bar represents a month, with its length proportionally reflecting the mean delay in minutes. The visualization is built using React and D3.js (with `scaleBand` for the y-axis and `scaleLinear` for the x-axis), rendering as an SVG. Data is loaded from a remote CSV file, pre-processed to calculate monthly averages, and displayed with axis ticks and labels.

XXinting Yao
81% match
Loading thumbnail…

Copied Pie Chart with my Data

This pie chart displays the percentage of flight delays attributed to each airline, using color saturation to encode delay proportions. The tooltip reveals each airline’s delay percentage relative to the total delay of all flights. The visualization aggregates flight delay data from a Flight Delay Analysis Dataset, grouping delays by airline using `d3.nest()`. It renders SVG slices with `d3.pie()` and `d3.arc()`, applying a color scale via `d3.scaleOrdinal`, while custom hit-testing logic checks point-in-arc positions for interactivity.

PPeter Maida
81% match
Loading thumbnail…

Fork of Interactive Pie Chart showing percentage of flights delayed w.r.t Departure for each airline

This donut chart shows the percentage of flights delayed at departure for each airline, using color saturation to indicate the proportion of total delays per airline and tooltips to display exact percentages. It answers questions about which airline has the most delays and how many airlines fall within specific delay ranges. The visualization uses D3 v5 APIs such as `pie`, `arc`, and `scaleOrdinal` to render SVG slices with hover interactions. Data comes from a Flight Delay Analysis Dataset loaded via `d3.csv`.

Hharika-1929
81% match
Loading thumbnail…

Fork of Interactive Pie Chart showing percentage of flights delayed w.r.t Departure for each airline

This donut chart shows the percentage of flights delayed at departure for each airline, using color saturation to indicate the proportion of total delays per airline and tooltips to display exact percentages. It answers questions about which airline has the most delays and how many airlines fall within specific delay ranges. The visualization uses D3 v5 APIs such as `pie`, `arc`, and `scaleOrdinal` to render SVG slices with hover interactions. Data comes from a Flight Delay Analysis Dataset loaded via `d3.csv`.

Hharika-1929
81% match