Skip to main content
SimilarExport ZIP
100%

Flight Data D3 Demo

✓ Published0🌍 Public
JJasonCabral
Last edited Jun 4, 2016
Created on Jun 4, 2016

This visualization displays airline delay data from 2015, using a bar chart to show the delay time for each carrier. The chart is broken down by carrier name on the y-axis and delay time on the x-axis, with bars colored by the type of delay. The code uses the Dimple library to create the chart and its API for the legend, while D3.js is used for data loading and nesting. The interactive legend allows users to click to show or hide specific delay types, triggering an animated redraw of the chart.

AI-generated description

Built with blockbuilder.org

Similar vizzes

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
93% 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
84% 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
83% 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
81% match
Loading thumbnail…

Title

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.

Yyimingg7
78% match
Loading thumbnail…

Summary

This interactive visualization challenges the assumption that TSA security lines are the primary cause of flight delays. Using data from the Bureau of Transportation Statistics (sourced from a CSV file), it initially displays only security delays, then expands to reveal that carrier and NAS delays are far more significant. The stacked bar chart, built with the dimple.js library on top of D3 v3, allows comparison across airlines and delay categories, with interactive filtering and sorting options that let users explore the data.

JJasonCabral
77% match
Loading thumbnail…

Summary

This interactive visualization challenges the assumption that TSA security lines are the primary cause of flight delays. Using data from the Bureau of Transportation Statistics (sourced from a CSV file), it initially displays only security delays, then expands to reveal that carrier and NAS delays are far more significant. The stacked bar chart, built with the dimple.js library on top of D3 v3, allows comparison across airlines and delay categories, with interactive filtering and sorting options that let users explore the data.

JJasonCabral
77% 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
76% match