Skip to main content
SimilarExport ZIP
100%

A7 Small Multiples Lines chart

✓ Published0🌍 Public
Hhxu51@usfca.edu
Last edited Mar 18, 2025
Created on Mar 18, 2025
Forked from A7 Heat Map

This heatmap visualizes carrier delay counts across months and years for U.S. airlines, using color intensity to show delay severity (from light to dark blue). Built with D3 v7, it maps data to a filled grid of SVG rectangles, with year and month on the axes and hover tooltips for exact values. It includes a linear color legend and uses scales from `d3.scaleBand` and `d3.scaleLinear`, while the data comes from a CSV hosted on GitHub.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

A7 Small Multiples Lines chart

This heatmap visualizes carrier delay counts across months and years for U.S. airlines, using color intensity to show delay severity (from light to dark blue). Built with D3 v7, it maps data to a filled grid of SVG rectangles, with year and month on the axes and hover tooltips for exact values. It includes a linear color legend and uses scales from `d3.scaleBand` and `d3.scaleLinear`, while the data comes from a CSV hosted on GitHub.

Hhxu51@usfca.edu
100% match
Loading thumbnail…

A7 Heat Map

This heat map visualizes airline carrier delays across months and years, using a blue sequential color scale to show delay frequency. The SVG visualization is built with D3 v7, positioning cells via `d3.scaleBand` for the x-axis (months) and y-axis (years), while `d3.scaleLinear` maps delay counts to color intensity. Interactive tooltips appear on mouseover, and a legend is generated using the d3-legend library. Data comes from a CSV file of filtered airline statistics hosted on GitHub.

Hhxu51@usfca.edu
91% match
Loading thumbnail…

A7-Heat Map in D3

This heat map visualizes US flight delays by month and delay type (Carrier, Late Aircraft, National Aviation System, and Weather) using data loaded from a CSV file. Each cell’s color encodes the delay count via d3.scaleSequential with interpolateTurbo, while d3.axisBottom and d3.axisLeft label the months and categories. Built with D3 v6, it renders as an SVG with a tooltip on mouseover, showing the month, category, and delay value, along with a color legend.

Bbhavi.kenia@gmail.com
86% match
Loading thumbnail…

A7 Small Multiples Lines chart

This small multiples line chart displays yearly average carrier delay counts for multiple airports, with each airport shown in its own grid cell using a shared y-axis scale. The visualization is built with D3 v6 and renders as SVG, using `d3.csv` to load data, `d3.groups` to nest records by airport and year, and `d3.mean` to aggregate delay values. Each chart includes axes via `d3.axisBottom` and `d3.axisLeft`, a line generated with `d3.line` and `curveMonotoneX`, and hover tooltips triggered by mouse events on data circles.

Hhxu51@usfca.edu
85% match
Loading thumbnail…

A7 Multi-Line Chart

This multi-line chart visualizes average annual flight delays across four airline categories using CSV data from a GitHub-hosted airlines dataset. The visualization employs D3.js v7 with SVG rendering, displaying four distinct colored lines with interactive circle markers. The chart uses d3.scaleLinear, d3.line, and d3.axisBottom, while implementing hover-based tooltips to reveal specific year and delay values. ColorBrewer provides the categorical color scheme for distinguishing between airline groups.

Hhxu51@usfca.edu
85% match
Loading thumbnail…

A7-Multi-Line Chart in D3

This multi-line chart visualizes flight delays by cause—Carrier, Late Aircraft, National Aviation System, and Weather—across months for a single year. It uses D3 v6 with SVG rendering, loading CSV data from a GitHub gist. The code employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate paths for each delay category, with a custom legend and axes drawn using `d3.axisBottom` and `d3.axisLeft`.

Bbhavi.kenia@gmail.com
84% match
Loading thumbnail…

A7-Small Multiples Chart in D3

This example presents a small multiples chart of flight delays by airport, visualizing four delay categories—Carrier, Late Aircraft, National Aviation System, and Weather—across monthly data. It uses d3.csv to load data and d3.line to render each series as a separate line graph, with d3.axisBottom and d3.axisLeft providing tick marks and labels. The chart employs d3.scaleOrdinal with d3.schemeCategory10 to color-code each category and d3.legend from d3-legend to display a legend, arranging the four plots in a 2x2 grid within an SVG.

Bbhavi.kenia@gmail.com
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
81% match