CS360 A3 Stripchart

100%

CS360 A3 Stripchart

✓ Published0🌍 Public

Last edited Feb 13, 2024

Created on Feb 13, 2024

This visualization displays average math GPAs for each US state from 2005 to 2015, plotted as a stripchart on a dark background. It uses the p5.js library to load a CSV dataset from a GitHub gist, then draws axes, labels, and data points using the `loadTable`, `map`, and `text` functions. The chart highlights trends in academic performance over time across states.

AI-generated description

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

Similar vizzes

Loading thumbnail…

CS360 A3 Strip Chart

This interactive strip chart visualizes average math GPAs across U.S. states from 2005 to 2015, with each year’s data points jittered along the x-axis to reveal distribution. The p5.js sketch loads a CSV of SAT scores, maps values to canvas coordinates, and renders blue ellipses for individual data points. Axis labels, a chart title, and rotated axis titles are drawn using p5.js text functions, while `random()` adds horizontal scatter to reduce overplotting.

EEric Yao

94% match

Loading thumbnail…

CS360 A3 Strip Chart

This example displays a histogram of average math SAT scores for each U.S. state, using data from a CSV file loaded via p5.js’s `loadTable` function. The chart divides scores into bins of 20 points, from 380 to 620, and renders blue bars with grid lines and labeled axes on a canvas created by `createCanvas`. The code uses p5.js’s `map` and `normalize` functions to scale frequencies and positions, with text labels drawn via `text` and rotated for the y-axis title.

EEric Yao

86% match

Loading thumbnail…

Simple Dot Plot

This dot plot visualizes average math GPAs for seven states using data loaded from a CSV file hosted as a GitHub gist. The p5.js sketch draws labeled axes, tick marks, and colored circles to map each state’s GPA value along a continuous scale from 2.5 to 4.0. The visualization uses `loadTable` in `preload()` for data loading, `createCanvas` for the drawing surface, and `map()` to position elements within a fixed margin and graph area.

WWilson Fong

81% match

Loading thumbnail…

CS360 A3 Histogram

This example shows a histogram of average U.S. state-level Math SAT scores from 2005 to 2015, with blue bars binned in 20-point intervals from 380 to 620. The chart includes a faded grid, axis labels, and a rotated y-axis title. Built with p5.js, it loads CSV data from a GitHub gist, maps the scores into bins, and normalizes bar heights to the canvas dimensions.

EEric Yao

81% match

Loading thumbnail…

CS360 A3 Boxplot

This example shows the distribution of 2015 U.S. Math SAT score averages for students with an A-GPA across each state, using a horizontal boxplot to summarize the data. The visualization loads a CSV file from a GitHub gist and calculates quartiles and the median from the score column. It renders the box, whiskers, and axis ticks using p5.js drawing functions like `rect`, `line`, and `text`, with a quantile helper function for statistical summaries.

EEric Yao

80% match

Loading thumbnail…

Simple Heat Map

This heat map visualizes average GPA scores across seven U.S. states over six years, using a white-to-dark blue color scale to represent low, mid, and high academic performance. Built with p5.js, the sketch loads a CSV file containing school scores, then renders a grid of colored cells with state and year axis labels, followed by a legend explaining the color thresholds. The example demonstrates how to transform tabular data into a matrix-based visualization using standard p5.js drawing functions like `rect`, `text`, and `line`.

WWilson Fong

77% match

Loading thumbnail…

A5 Bubblechart D3

This visualization displays the relationship between math and verbal SAT scores across U.S. states in 2015, with each circle representing a state positioned by its two average scores. Circle size encodes the number of test takers, while red and blue fill colors indicate whether the state’s average math GPA falls below or above 3.5. Hovering highlights points in orange. The chart is built with D3 v7 using `d3.scaleLinear` for axes and radius, `d3.scaleOrdinal` for color, and SVG elements for rendering, with data loaded from a CSV file.

EEric Yao

76% match

Loading thumbnail…

A4 Scatterplot D3

This scatterplot displays student math and verbal SAT score averages across all US states in 2015, with each circle representing a state and positioned by its paired test scores. Built with D3 v7, the visualization uses `d3.scaleLinear` to map data values to pixel coordinates within an SVG canvas and draws circles via `d3.selectAll().join()`. The chart includes labeled axes, a title, and hover interactions that change point colors. Data is loaded asynchronously from a CSV file using `d3.csv`.

EEric Yao

76% match