Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Assignment 5: bubble plot with D3

✓ Published1🌍 Public
NNita
Last edited Feb 25, 2025
Created on Feb 25, 2025

This small multiples visualization displays airline delays across twelve months, plotting late aircraft delays against national aviation system delays for individual carriers. The bubble size encodes carrier delay counts, while color distinguishes airlines by name, with each monthly cell including a Pearson correlation coefficient with a trend line. The D3.js v7 implementation uses `d3.group` for data nesting, `d3.scaleOrdinal` and `d3.scaleSqrt` for color and size mapping, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Hovering reveals detailed tooltips. Data comes from a CSV file hosted on GitHub, rendered as SVG with animated transitions.

AI-generated description

Airline Delays Visualization

This visualization shows the relationship between different types of airline delays across months. The visualization uses a small multiples approach to display how Late Aircraft Delays correlate with National Aviation System Delays for each month of the year.

Features

  • Small multiples grid showing data by month
  • Correlation coefficient displayed for each month
  • Trend lines to highlight relationships
  • Interactive tooltips showing detailed information
  • Color coding by carrier
  • Size encoding shows carrier delays

Data Dimensions

  • X-axis: Late Aircraft Delays
  • Y-axis: National Aviation System Delays
  • Size: Carrier Delays
  • Color: Airline Carrier

The visualization helps identify:

  1. Seasonal patterns in airline delays
  2. Which carriers experience more delays
  3. How different types of delays correlate with each other
  4. Outliers in the dataset

Insights

This visualization makes it easier to see:

  • Which months have stronger correlations between delay types
  • How the relationships between delay types change throughout the year
  • Which carriers consistently experience more delays
  • Unusual patterns that might warrant further investigation

Technical Implementation

Built using D3.js v7, the visualization implements:

  • Small multiples pattern for comparative analysis
  • Linear regression for trend lines
  • Pearson correlation calculation
  • Interactive tooltips for data exploration
  • Responsive legend system
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of Assignment 5: bubble plot with D3

This small multiples visualization shows how airline delays vary by month, displaying the correlation between late aircraft delays and National Aviation System delays for each month of the year. Each cell contains a bubble plot where carrier delays determine point size and airline carrier determines color, with trend lines and Pearson correlation coefficients revealing seasonal patterns. The visualization uses d3.csv to load airline delay data, d3.group and d3.scaleOrdinal for data organization and color encoding, and d3.axisBottom and d3.axisLeft for consistent axes across cells. Interactive tooltips appear on hover, while the layout is computed manually with a fixed cell size rather than using d3.layout functions.

NNita
97% match
Loading thumbnail…

Fork of Fork of Assignment 5: bubble plot with D3

This bubble chart visualizes airline delay statistics, plotting late aircraft delays on the x-axis against National Aviation System delays on the y-axis. Circle size encodes carrier-related delays, while categorical color mapping distinguishes months using `d3.scaleOrdinal` with `d3.schemeCategory10`. Built with `d3.svg`, the chart uses `d3.scaleLinear`, `d3.scaleSqrt`, `d3.axisBottom`, and `d3.axisLeft`, loading CSV data from GitHub. The visualization includes tooltips and static rendering, with animation support provided by the VizHub V3 runtime environment.

NNita
95% match
Loading thumbnail…

Fork of Assignment 5: bubble plot with D3

This bubble chart visualizes airline delay causes across months, plotting late aircraft delays on the x-axis, National Aviation System delays on the y-axis, and carrier delays as bubble size, with month name mapped to color. Built with D3 v7, the SVG animation uses `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` for encoding, and includes interactive tooltips on mouseover. Data comes from a CSV file loaded via `d3.csv`.

NNita
95% match
Loading thumbnail…

Fork of Assignment 5: bubble plot with D3

This bubble chart visualizes airline delay data, plotting late aircraft delays on the x-axis, national aviation system delays on the y-axis, and carrier delays as the bubble size, with color indicating the month. Users can click legend items to filter the data by month, and the chart updates with animated transitions. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleSqrt` for bubble sizing, and `d3.legend` for the interactive color legend. Data is loaded from a CSV file via `d3.csv`.

NNita
94% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Assignment 5: bubble plot with D3

This interactive dashboard visualizes airline delay patterns through four coordinated D3.js v7 charts: small multiples comparing late aircraft versus national aviation system delays across months, a time series of delay types, a stacked bar chart showing delay proportions by carrier, and a bar chart of average delay minutes. It includes year and carrier filters that update all views simultaneously, alongside tooltips and interactive legends. The visualization uses D3 scales, axes, stacking, and line generators with animated transitions on CSV data loaded from GitHub.

NNita
94% match
Loading thumbnail…

Fork of Assignment 5: bubble plot with D3

This interactive bubble plot shows the relationship between departure delays and late aircraft delays across U.S. airports and months, with bubble size encoding carrier delays and color mapping to the month of the year. The D3.js v7 visualization includes dropdown filters for month and airport, hover tooltips with detailed statistics, and animated transitions that update the SVG elements when filters change. Data loads from a CSV file with d3.csv, while d3-legend and d3-annotation libraries add legends and contextual callouts for key data points.

NNita
92% match
Loading thumbnail…

Assignment 5: bubble plot with D3

This bubble chart visualizes airline delay data, mapping the number of late aircraft delays on the x-axis, national aviation system delays on the y-axis, carrier delays as bubble size, and month as color. Built with D3 v7, the chart uses SVG and includes interactive tooltips that display airport details on hover. The code loads data from a CSV file, filters out zero values, and applies scales including `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal` with a categorical color scheme. Axis labels and a legend are rendered using standard D3 components, with a `d3.legend` library for the color key.

Hhxu51@usfca.edu
90% 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
89% match