Skip to main content
SimilarExport ZIP
100%

Fork of Assignment 5: bubble plot with D3

✓ Published0🌍 Public
NNita
Last edited Feb 24, 2025
Created on Feb 24, 2025

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.

AI-generated description

Airlines Bubble Chart Visualization

This interactive data visualization shows the relationship between departure delays and late aircraft delays across different airports and months. The bubble chart provides a multi-dimensional view of airline delay data with:

  • X-axis: Number of Late Aircraft Delays
  • Y-axis: Number of Departure Delays
  • Bubble size: Number of Carrier Delays
  • Bubble color: Month of the year

Features

  • Interactive tooltips that show detailed information when hovering over bubbles
  • Filtering capabilities by month and airport
  • Dynamic annotations highlighting significant data points
  • Color-coded bubbles by month for easy comparison across time periods
  • Size representation showing the magnitude of carrier delays
  • Correlation analysis and trend line (when significant correlation exists)
  • Responsive design with clear axis labels and legends
  • Animated transitions when changing filters

Data Source

The visualization uses airline delay data from filtered_airlines.csv which contains information about:

  • Airport codes and names
  • Time periods (month and year)
  • Different types of delays (carrier, late aircraft, national aviation system)
  • Flight statistics (total flights, delayed flights, on-time flights)

Technologies Used

  • D3.js v7 for data visualization
  • d3-legend for creating consistent legends
  • d3-annotation for adding contextual annotations

How to Use

  1. View the entire dataset initially to see overall patterns
  2. Use the month filter to focus on specific times of year
  3. Use the airport filter to examine delays at particular airports
  4. Hover over any bubble to see detailed statistics including:
    • Airport name and code
    • Month
    • Various delay metrics (departure, late aircraft, carrier)
    • Total flight counts and delay percentages
  5. Look for annotated data points that highlight important insights
  6. Observe patterns between departure delays and late aircraft delays
  7. Reset filters at any time to return to the full dataset view

Insights

The visualization reveals several patterns:

  • A strong correlation between late aircraft delays and total departure delays
  • Seasonal variations in delay patterns
  • Airports with consistently high or low delay rates
  • The relationship between carrier delays and overall delays

Full Course Information

Full course playlist: YouTube: Constructing Visualization 2024

MIT Licensed

Similar vizzes

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

Fork of Fork of Assignment 5: bubble plot with D3

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.

NNita
92% 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
91% match
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
91% 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
91% 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
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
86% match