D3 Visualization

100%

D3 Visualization

✓ Published0🌍 Public

Last edited Dec 14, 2022

Created on Dec 14, 2022

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.

AI-generated description

Flight On-time Rate by Different Carriers in July 2022

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

82% 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

79% match

Loading thumbnail…

Untitled

This interactive line chart displays the number of passengers for seven U.S. airlines from 2000 to 2015, with each airline represented by a colored line. Users can hover over a line to highlight it and dim the others, while moving the mouse over a line reveals the airline’s name at the top of the chart. The visualization uses d3.nest to group the data by airline, d3.scaleTime and d3.scaleLinear for axes, and d3.line for path generation. SVG rendering with CSS transitions animates opacity and stroke-width changes during hover interactions.

Pphemmati

79% match

Loading thumbnail…

Assignment 5: line chart with D3

This line chart visualizes monthly airline delay counts from June 2003 to July 2016, comparing three delay types: Carrier, Late Aircraft, and National Aviation System delays. The chart uses a time scale for the x-axis spanning over 13 years, with data points horizontally offset within each month to reduce overlap. Built with D3 v7, it loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and renders SVG paths using `d3.line` with monotone curve interpolation. Interactive tooltips appear on mouseover, and axes use `d3.axisBottom` with custom month formatting.

Hhxu51@usfca.edu

78% match

Loading thumbnail…

Untitled

This interactive line chart shows monthly passenger traffic to India for individual airlines, with a dropdown menu to switch between carriers. Each line traces the number of passengers across the 12 months, colored via a categorical scale. The visualization uses d3.v4 with an SVG path updated through a transition on the `d` attribute when the selection changes. Data is loaded from a remote CSV, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. The color scheme comes from `d3-scale-chromatic`.

Jjs164

78% match

Loading thumbnail…

Fork of Assignment 5: line chart with D3

This interactive line chart visualizes monthly airline delay statistics from 2003 to 2016, comparing carrier delays, late aircraft delays, and national aviation system delays. Users can filter by year range and toggle delay categories, with hover tooltips and brush zooming for detailed exploration. Built with D3.js v7, the visualization uses d3.line, d3.axisBottom, d3.axisLeft, and d3.brush to render SVG paths, axes, and interactive selection. Data is loaded from a CSV file and processed as time-series values, with animated transitions when filters change.

NNita

77% match

Loading thumbnail…

Untitled

This interactive line chart visualizes monthly airline traffic between India and international destinations, comparing passenger numbers and freight volumes for selectable airlines. Two buttons switch the dataset between passenger and freight metrics, while a dropdown menu filters by airline name. The visualization uses D3.js v4 to load CSV data, render SVG paths for each metric (blue for inbound, red for outbound), and animate transitions when changing airlines. The data, sourced from a GitHub-hosted CSV file, is drawn using linear scales and d3.line path generators.

Jjs164

77% match

Loading thumbnail…

Untitled

This interactive line chart displays monthly passenger and freight traffic to and from India, aggregated by airline. Two buttons toggle between the passenger and freight datasets, while a dropdown menu selects which airline’s routes to display. Incoming traffic appears as a blue line, outgoing traffic as red, with transitions animating the path updates over 1000 milliseconds. The visualization is built with D3 v4, using `d3.line` for path generation, `d3.scaleLinear` for axes, and `transition.attrTween` internally via D3’s transition API. The data comes from a CSV file hosted on GitHub, rendered as SVG.

Jjs164

76% match