Flights

100%

✓ Published0🌍 Public

Last edited Oct 4, 2017

Created on Nov 12, 2017

This visualization, titled "Flights," presents monthly passenger traffic statistics for San Francisco International Airport, drawn from Datazar data spanning 2010 to early 2016. The dataset includes airline, route type (domestic/international), region, terminal, boarding area, and enplaned/deplaned passenger counts. Rendered as an SVG using D3 v4, the chart is built from scratch in D3 and visually encodes the passenger volumes per airline and region, with the author using Scott Murray's book as a reference for constructing the custom layout.

AI-generated description

Built with blockbuilder.org

This data is from Datazar. Search URL for this file.

San Francisco International Airport Report on Monthly Passenger Traffic Statistics by Airline. To get the file use the datazar API endpoint

This file had over 10,000 rows so removed the oldest records. File goes from early 2016 back to the beginning of 2010. All rows before 2010 where purged.

For the data visualization assignments, I chose to build the charts from scratch instead of copying a block as a starting point to help me better understand how to use D3. I looked at a number of examples and have used the book "Interactive Data Visualization for the Web" by Scott Murray.

mit Licensed

Similar vizzes

Loading thumbnail…

Air Traffic Demographics for 2019

This visualization shows monthly air traffic passenger counts at San Francisco International Airport from January to September 2019, split by domestic and international flights. Blue bars represent domestic passengers, while orange bars represent international passengers, with bar length indicating passenger volume. The chart uses d3.scaleBand and d3.scaleLinear to position grouped bars, with d3.axisBottom and d3.axisLeft for the axes. Data is loaded from a CSV file using d3.csv and rendered as SVG with an animation transition. Source: DataSF air traffic statistics.

AAryan Dilip Choudhary

84% match

Loading thumbnail…

Air Traffic Demographics of Passenger Count vs Year (2011-2019)

This grouped bar chart shows monthly passenger counts for domestic and international flights departing San Francisco International Airport from September 2011 to September 2019, with blue and coral bars representing the two flight categories across a shared timeline. The visualization loads data from a CSV file, sorts entries chronologically, and uses `d3.nest()` to group rows by parsed date. It employs `d3.scaleBand()` for the x-axis, `d3.scaleLinear()` for the y-axis, and `d3.axisBottom`, `d3.axisLeft` to render axes. Data originates from DataSF, with the chart rendered as SVG with CSS-styled bar rectangles.

AAryan Dilip Choudhary

83% match

Loading thumbnail…

Monthly Passenger Count for Year 2019

This grouped bar chart shows monthly passenger counts for domestic and international flights at San Francisco airport in 2019. The visualization uses d3.nest() to aggregate and group the CSV data by month and flight type, with d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. Bars are rendered as SVG rects with color encoding via d3.scaleOrdinal, and axes use d3.axisBottom and d3.axisLeft with custom time and count formatters. Data comes from DataSF’s Air Traffic Passenger Statistics dataset.

NNikhil Bhutani

83% match

Loading thumbnail…

Line Chart

This line chart visualizes air traffic passenger statistics for San Francisco Airport from 2005 to 2019, comparing annual passenger numbers for multiple airlines. The chart displays each airline as a separate colored line, with year on the x-axis and passenger counts on the y-axis. It uses React and D3 v4 to render an SVG-based chart with animated transitions between states. The data is embedded directly in the page, and the visualization uses D3’s scale functions and axis components to map the temporal and numerical dimensions.

AApollox01

83% match

Loading thumbnail…

Untitled

This visualization displays air traffic passenger statistics for San Francisco Airport from 2005 to 2019, using multi-series line charts to compare passenger volumes across airlines like Alaska and American. The code uses D3 v4 to create SVG-based line charts with scaling axes and path generation. Data is embedded directly in the script as JavaScript arrays. The visualization is styled with Bulma CSS for the header and navigation, with Font Awesome icons, and initializes the chart in a div element with the ID “chart.”

Pphemmati

80% match

Loading thumbnail…

Bar Chart

This bar chart visualizes passenger volumes by region for San Francisco Airport, showing that the US dominates with over 487 million passengers, followed by Asia and Europe. Built with D3 v5 and SVG, the visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with data loaded from a CSV file via `d3.csv`. The chart features purple bars that turn brown on hover, with axis labels applied through `d3.axisBottom` and `d3.axisLeft`.

Pphemmati

79% match

Loading thumbnail…

Data Summary

This example summarizes a large dataset of San Francisco International Airport passenger traffic statistics using Datalib. The visualization provides a quick overview of the data's shape—including its columns, types, and summary statistics—by processing a CSV file with over 10,000 rows (filtered to 2010 onward). The block forks Curran's "Data Table Summary" and uses D3 v4 to render the dataset in a concise, tabular format, making it easy to explore the structure and key attributes of the airline, route, and passenger count fields.

CCJKraenzle

79% match

Loading thumbnail…

Line Chart

This line chart visualizes the popularity of US airlines based on passenger numbers at San Francisco Airport from 2005 to 2019. The D3 v4 implementation renders an SVG chart with smooth animated lines, using the Bulma CSS framework for page styling. The visualization compares passenger volumes across multiple airlines over time, with data structured as arrays of date-value pairs. The code includes axis rendering, styled line paths, and interactive navigation within a React-based gallery page.

Pphemmati

79% match