darrenisdunn

@darrenisdunn·15 public vizzes

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.

May 2, 2022

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.

May 1, 2022

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.

Apr 20, 2022

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.

Apr 19, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that displays a large, centered text message reading "Hello HTML!" using a custom CSS style class. The page is built with plain HTML, CSS, and JavaScript, with no external libraries or data sources. It serves as a basic template for web-based visualization projects, using standard document structure and inline styling to achieve the visual output.

Apr 18, 2022

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.

Apr 18, 2022

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.

Apr 17, 2022

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.

Apr 17, 2022

Loading thumbnail…

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

Apr 17, 2022

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.

Apr 6, 2022

Loading thumbnail…

D3 Node-link Diagram With Force-directed Layout

This interactive D3 node-link diagram visualizes a force-directed network layout using data from the SOC-FIRM-HI-TECH repository. It shows the connections between nodes, with link thickness proportional to edge weight and node color assigned by ID via `d3.scaleOrdinal` and `d3.schemeCategory10`. The graph is rendered as an animated SVG using `d3.forceSimulation` with link, many-body charge, and center forces, allowing drag interactions. Hovering over a circle reveals a tooltip with the node ID, powered by D3 transitions and mouse events.

Mar 27, 2022

Loading thumbnail…

Untitled

This chart displays automobile brands alongside their average horsepower values from a CSV file. The data is rendered as a bar chart using D3 v4’s `scaleBand` and `scaleLinear`, with axes labeled for brand and horsepower. The bars are styled with a steelblue fill, and axis labels are appended directly to the SVG using `axisBottom` and `axisLeft`. The visualization is built within a React framework, though the code shown uses plain D3 and SVG elements.

Feb 21, 2022

Loading thumbnail…

Test

This example displays the message “Hello HTML!” in large, centered text across the page. It uses plain HTML with embedded CSS to style the message, and a minimal JavaScript setup. The rendering relies on basic DOM elements rather than a visualization library, demonstrating a simple static text layout.

Feb 7, 2022

Loading thumbnail…

Bar Chart

This example presents a simple bar chart rendered as an HTML page. The visualization shows a single message, "Hello HTML!", displayed prominently with large, centered text. The code constructs this display using a basic HTML structure with embedded CSS for styling, specifically setting the font size and alignment. A `<div>` element holds the text content, and inline CSS class styling controls its appearance. The example does not utilize any JavaScript or external libraries for chart construction or data rendering.

Feb 7, 2022

Loading thumbnail…

Personal Website

This example displays a full-screen, center-aligned message reading “Hello HTML!” using 13em font size. The page is a minimal static HTML document that uses CSS for typography and layout, with no JavaScript logic beyond the static markup. It serves as a starting point for building a personal website, demonstrating basic styling and structure without external dependencies or interactive features. The code relies solely on native HTML elements and CSS styling, with no data sources or visualization libraries involved.

Feb 2, 2022