Skip to main content
SimilarExport ZIP
100%

CS 360 Final Project |ALPHA RELEASE| Bar Chart

✓ Published0🌍 Public
Ddarrenisdunn
Last edited Apr 18, 2022
Created on Apr 6, 2022
Forked from HTML Starter

This bar chart visualizes average passenger counts for airlines at San Francisco International Airport (SFO) in 2021, using data loaded from a TSV file. It displays categorical airline names on the x-axis and numeric passenger averages on the y-axis, with bars colored via a linear blue scale. The visualization is built with D3 v4, utilizing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for tick labels. Bars are drawn as SVG rectangles, with colors mapped using `d3.schemeBlues`. The chart includes custom axis titles and a title, all within an SVG canvas.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

CS360 FINAL PROJECT Bar Chart Darren Dunn

This bar chart displays the average monthly passenger counts for airlines operating out of San Francisco in 2021, sorted vertically by airline name. The visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, rendering horizontal bars as SVG rectangles. Data is loaded asynchronously via d3.tsv from a remote GitHub gist, with axis labels and tick marks generated using d3.axisBottom and d3.axisLeft. Bar color is a uniform dark teal, and the chart includes rotated x-axis labels for readability.

Ddarrenisdunn
91% match
Loading thumbnail…

CS 360 Final Project |ALPHA RELEASE| Scatter Plot

This scatter plot shows the average passenger count at SFO across six months of 2005, with the x-axis representing months 7 through 12 and the y-axis showing passenger counts up to 30,000. The visualization loads data from a tab-separated file using d3.tsv and renders circles with d3.scaleLinear axes and SVG elements. The chart uses D3 v4 to append a titled SVG with labeled axes, plotting each month as a blue dot filled via the style attribute.

Ddarrenisdunn
86% match
Loading thumbnail…

Fork of CS 360 Final Project |ALPHA RELEASE| Scatter Plot

A scatter plot displays the average passenger count at SFO for each month from July through December 2005. The visualization uses circles positioned along a linear x-axis for months and a y-axis ranging from 0 to 30,000 passengers, with each point labeled by its month and average count. The code loads data from a tab-separated file using `d3.tsv`, and builds the chart with d3.v4, appending SVG elements and using `d3.axisBottom` and `d3.axisLeft` for the axes.

Ddarrenisdunn
84% match
Loading thumbnail…

Fork of CS 360 Final Project |ALPHA RELEASE| Scatter Plot

A scatter plot displays the average passenger count at SFO for each month from July through December 2005. The visualization uses circles positioned along a linear x-axis for months and a y-axis ranging from 0 to 30,000 passengers, with each point labeled by its month and average count. The code loads data from a tab-separated file using `d3.tsv`, and builds the chart with d3.v4, appending SVG elements and using `d3.axisBottom` and `d3.axisLeft` for the axes.

Ddarrenisdunn
84% 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
83% match
Loading thumbnail…

CS360 FINAL PROJECT Line Chart Darren Dunn

This chart shows a line graph comparing the monthly average passenger counts for United and American Airlines at SFO from January through June 2021. The visualization uses D3.js v4 to render an SVG, reading data from a TSV file. The code groups the data by airline using a `d3.nest` key function, then draws a separate colored path for each carrier with `d3.line`, scaled by a linear `d3.scaleLinear` for both the month (x-axis) and passenger count (y-axis). The final chart color palette maps airline names to blue and light blue.

Ddarrenisdunn
82% 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…

CS360 FINAL PROJECT Tree Map Darren Dunn

This tree map visualizes the average passenger count (APC) for airlines departing from San Francisco International Airport, using data from `sfo_data.csv`. It displays each airline as a colored rectangle sized proportionally to its APC value, with the airline’s IATA code (e.g., UA, AS) labeled inside its cell. The visualization is built with D3 v4, using the `d3.stratify` and `d3.treemap` APIs to compute the hierarchical layout and render the rectangles as SVG elements, with all values sourced directly from the CSV file.

Ddarrenisdunn
80% match