Skip to main content
SimilarExport ZIP
100%

CS360 FINAL PROJECT Tree Map Darren Dunn

✓ Published1🌍 Public
Ddarrenisdunn
Last edited May 2, 2022
Created on Apr 17, 2022
Forked from Fork of Untitled

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.

AI-generated description

CS360 Final Project International Terminal Tree Map

Darren Dunn

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CS360 FINAL PROJECT Tree Map T1 Darren Dunn

This treemap visualizes the number of arriving passenger counts (APC) for international airlines at San Francisco International Airport, using data loaded from a CSV file. The hierarchy is built with `d3.stratify`, with airline names as leaf nodes under a single "Origin" parent, and rectangle sizes are computed via `d3.treemap`. Each leaf is rendered as an SVG `<rect>` filled with dark teal and labeled with the airline name using white SVG text. The visualization uses D3 v4 and renders a static, 1500-by-1500-pixel SVG layout with black strokes around each cell.

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

CS 360 Final Project |ALPHA RELEASE| Bar Chart

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.

Ddarrenisdunn
80% 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
77% 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
77% 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
77% match
Loading thumbnail…

Fork of Untitled

This double line chart compares monthly passenger counts for United Airlines and American Airlines at San Francisco International Airport from January to June 2021. The visualization uses d3.nest to group data by airline, then draws two paths with d3.line, scaling the Month and APC values with d3.scaleLinear. Color is applied via d3.scaleOrdinal, with axes rendered using d3.axisBottom and d3.axisLeft. The data originates from the sfo_data.tsv file, and the SVG output uses an ordinal palette of red and blue.

Ddarrenisdunn
75% match