bar chart

100%

✓ Published1🌍 Public

Last edited Feb 4, 2024

Created on Feb 1, 2024

A grouped bar chart visualizes airline delay totals across six airports for each month of the year, with each airport’s monthly value rendered as a distinct bar. The chart uses D3 v7’s `d3.scaleBand` for the month categories on the x-axis and `d3.scaleLinear` for the delay magnitude on the y-axis, both fed by an external CSV file. SVG `rect` elements represent the bars, while `d3.axisBottom` and `d3.axisLeft` generate the corresponding axes. The data originates from the `airline.csv` file, containing airport, month, and total delay values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart for USA Flights Delay _ React & D3

This interactive bar chart visualizes the average departure delay for USA flights by month. Each horizontal purple bar represents a month, with its length proportionally reflecting the mean delay in minutes. The visualization is built using React and D3.js (with `scaleBand` for the y-axis and `scaleLinear` for the x-axis), rendering as an SVG. Data is loaded from a remote CSV file, pre-processed to calculate monthly averages, and displayed with axis ticks and labels.

XXinting Yao

80% 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…

airports

This bar chart displays airport data from a CSV file, listing airport codes along the y-axis and their population values along the x-axis. The visualization uses D3 v7 to load the data, create linear and band scales, and render axes using D3's axis functions. The chart is drawn with SVG elements, where each rectangular bar is filled with a steel-blue color, and the SVG canvas is set to 960 by 400 pixels. The code converts population strings to numbers before rendering the scaled bars.

YYi Changsheng

78% match

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

78% match

Loading thumbnail…

line chart

This line chart displays monthly airline passenger load factors for six major airports, with each airport represented by a distinct colored line and a matching legend. The data, loaded from a CSV file, is parsed and grouped by airport using D3 v7’s data join and scales. The visualization uses `d3.scaleLinear` for axes, `d3.line` to generate SVG paths, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.axisBottom` and `d3.axisLeft` for the axes. The SVG rendering approach is used throughout.

AArbie Hsu

77% match

Loading thumbnail…

histogram by p5.js

This example visualizes the distribution of monthly airline delay totals across seven U.S. airports using a histogram. The p5.js script loads the `airline.csv` dataset, extracts the `Total` column, and groups values into ten bins to display the frequency of delay magnitudes. Bars are drawn as blue rectangles using p5.js `rect()` and `map()` functions onto an 800×600 canvas. The rendering is static, with the data loaded via `loadTable()` in the `preload()` lifecycle and drawn once in `setup()`.

AArbie Hsu

76% match

Loading thumbnail…

Airline_delay_count

This visualization shows the number of flight delays for each airline using a bar chart, sorted in descending order. It plots the COUNT of records per airline on the vertical axis, with airlines on the horizontal axis, colored orange. The code loads flight delay data from a CSV file via `d3.csv` and uses `vega-lite-api` to create the chart, with `vl.markBar`, `vl.x().fieldN('AIRLINE')`, and `vl.y().fieldN('AIRLINE').count()`. Custom styling is applied through a Vega-Lite config file, and the view is rendered to canvas with `vega-tooltip` for interactivity.

Yyinhao0424

76% match

Loading thumbnail…

Interactive Dashboard showing various charts

This interactive dashboard presents a multifaceted analysis of flight delays using several D3.js charts. It includes a horizontal bar chart showing the top 15 destination airports by flight frequency, a stacked bar chart detailing average delay times and reasons for various airlines, and four donut charts that display the percentage of flights delayed (more or less than 15 minutes) by arrival, departure, airline, and origin airport. Built with D3 v5, the visualizations render as SVGs and incorporate interactive tooltips for detailed data inspection, with data sourced from a Flight Delay Analysis dataset.

JJosvin John

76% match