Title

100%

✓ Published0🌍 Public

Last edited Jul 23, 2021

Created on Jul 22, 2021

This interactive visualization explores 2020 airline delay data for four U.S. carriers (AA, AS, B6, DL) across twelve months. It presents three coordinated scenes: a multi-line chart of monthly flight counts, a multi-line chart of delay percentages, and a bar chart of delay causes. Users can toggle between airlines via buttons and select specific months using a dropdown menu. The SVG-based charts are built with D3 v5, using `d3.csv`, `d3.scaleOrdinal`, `d3.line`, and tooltip interactions via mouse events. Data is sourced from three separate CSV files covering flight volumes, delay rates, and delay cause breakdowns.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A multi-line chart displays the monthly average arrival delay for 19 airlines, with a dropdown menu to select a specific airline and a hover interaction that reveals the airline's delay rank and average delay time. The visualization uses D3 v7 to render an SVG, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` with `transition` to animate path updates. Data is loaded from a CSV file via `d3.csv`.

WWenxi Zhang

83% match

Loading thumbnail…

2015 Flight Delays (6/19)

The visualization compares total flight delay minutes per 1,000 flights across U.S. airlines and delay types for 2015. It initially highlights security delays, then animates through other categories using dimple.js and d3.v3. The bar chart encodes delay duration per airline, with a button triggering the transition between delay types. Data comes from the Bureau of Transportation Statistics.

JJasonCabral

80% match

Loading thumbnail…

bar chart

A grouped bar chart visualizes airline delay totals across six airports for each month of the year, with each airport’s monthly value rendered as a distinct bar. The chart uses D3 v7’s `d3.scaleBand` for the month categories on the x-axis and `d3.scaleLinear` for the delay magnitude on the y-axis, both fed by an external CSV file. SVG `rect` elements represent the bars, while `d3.axisBottom` and `d3.axisLeft` generate the corresponding axes. The data originates from the `airline.csv` file, containing airport, month, and total delay values.

AArbie Hsu

79% match

Loading thumbnail…

Interactive Dashboard showing various charts

This interactive dashboard presents a multifaceted analysis of flight delays using several D3.js charts. It includes a horizontal bar chart showing the top 15 destination airports by flight frequency, a stacked bar chart detailing average delay times and reasons for various airlines, and four donut charts that display the percentage of flights delayed (more or less than 15 minutes) by arrival, departure, airline, and origin airport. Built with D3 v5, the visualizations render as SVGs and incorporate interactive tooltips for detailed data inspection, with data sourced from a Flight Delay Analysis dataset.

JJosvin John

79% match

Loading thumbnail…

2015 Flight Delays

This interactive bar chart compares flight delays across major U.S. airlines for 2015, breaking down total delay minutes by cause (carrier, NAS, security, and weather). It uses the Dimple.js API on top of D3 v3 to render the visualization, filtering the data to show only security delays initially. A click button triggers an `updateData()` function that replaces the chart with a narrative explaining that security delays account for a minimal percentage of total delay time. The data comes from a CSV file of Bureau of Transportation Statistics, with axes and legends styled through Dimple's chart and series objects.

JJasonCabral

79% match

Loading thumbnail…

D3 Visualization

This interactive visualization shows the on-time arrival rate for 17 different air carriers across each day of July 2022. A dropdown menu lets the user select an airline, which triggers an animated transition of the line chart to display that carrier’s daily performance, with the line’s color changing to match the selected carrier. The visualization is built with D3 v7, using `d3.csv` to load the trend data, `d3.scaleLinear` for the axes, `d3.line` for the path, and SVG animations via `.transition().duration(1000)` to smoothly redraw the line. The chart includes labeled axes for the day of the month and the on-time rate, and the interface is a simple HTML page with a D3-generated selection menu.

FFAN-666666

79% match

Loading thumbnail…

Flight Data D3 Demo

The visualization shows daily delay times for major U.S. airlines in January 2015, aggregated by carrier and broken down by delay type. It uses a horizontal bar chart, with the x-axis representing delay time in minutes and the y-axis listing carrier names. The code loads the CSV data with `d3.csv`, nests and sums entries by carrier using `d3.nest`, and renders the plot with the dimple.js library’s `dimple.chart` and `dimple.plot.bar`. An interactive legend, built manually with `dimple.filterData`, toggles visibility of the delay categories on click.

JJasonCabral

79% match

Loading thumbnail…

Average Delay Time and Delay Reason for various carriers

This visualization displays average departure delay times for various airline carriers, broken down by delay reason categories. Each carrier is represented as a grouped bar, with bar segments colored according to the type of delay, and a tooltip revealing the specific delay reason and average delay minutes on hover. Built with D3 v5 and rendered as SVG, the chart uses `d3.nest()` and `d3.mean()` to aggregate flight data from a GitHub-hosted CSV, with `scaleBand` and `scaleLinear` positioning the bars and an ordinal color scale mapping delay reasons.

JJosvin John

78% match