Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Assignment 5: bubble plot with D3

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

7afd624f8f254130a6362588b553613e

Open

Fork of Assignment 5: bubble plot with D3

0 stars0🌍 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 the following mappings:

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

Features

  • Interactive tooltips that show detailed information when hovering over bubbles
  • Color-coded bubbles by month for easy comparison across time periods
  • Size representation showing the magnitude of carrier delays
  • Annotations highlighting significant data points
  • Responsive design with clear axis labels and legends

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

  • Hover over any bubble to see detailed information about that specific airport and time period
  • Use the color legend to identify months
  • Use the size legend to understand the scale of carrier delays
  • Look for patterns between departure delays and late aircraft delays

Full course playlist: YouTube: Constructing Visualization 2024.