Skip to main content
SimilarExport ZIP
100%

Assignment 3 Box Plot

✓ Published1🌍 Public
Aahuynh8@dons.usfca.edu
Last edited Feb 13, 2024
Created on Feb 13, 2024

A box plot visualizes the distribution of HP values for Pokémon, displaying the minimum, first quartile, median, third quartile, and maximum as horizontal line segments connected by whiskers. The chart uses the p5.js library within a single sketch, loading Pokémon statistics from a CSV file via the `loadTable` function. Data is sorted, quartiles are computed manually, and the plot is drawn on a 500-by-700 canvas with a background grid, axis labels, and rotated text for the y-axis label.

AI-generated description

CS 360 Assignment 3 Box Plot Annie Huynh

CSV URL: https://gist.githubusercontent.com/Ahuynh111/1e482a97d70acac597f636b109d9d74e/raw/ea243b11086e226c5f416302f931d3c77e42ac8d/PokemonStats.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 3 Histogram

This interactive histogram displays the distribution of Attack stat values across Pokémon from a CSV dataset. Built with p5.js, the visualization queries a remote CSV file via `loadTable()`, then uses a `preload()` function to load and parse the data before rendering. The code manually bins Attack values into ten intervals (0–20, 20–40, etc.) and draws each bar using `rect()` with heights proportional to the counts. The canvas displays grid lines, axis labels, and a title, with the y-axis rotated using `rotate()` to show the count axis vertically.

Aahuynh8@dons.usfca.edu
78% match
Loading thumbnail…

Assignment 3 Strip Chart

This strip chart visualizes the distribution of Pokémon Attack statistics across seven types (Bug, Dark, Fire, Grass, Ground, Normal, Water), loaded from a CSV file hosted on GitHub. The p5.js sketch draws each data point as a jittered dot (via `random()`) along vertical columns for each type, with a light grid background, axis labels, and a title. Attack values are mapped to the y-axis using linear scaling, allowing viewers to compare range and density across categories. The rendering uses `createCanvas`, `preload` with `loadTable`, and `point` calls within the `draw` loop.

Aahuynh8@dons.usfca.edu
75% match
Loading thumbnail…

Assignment 3: Box Plot

This example visualizes the distribution of horsepower among vehicles using a box plot, displaying key summary statistics including the minimum, first quartile, median, third quartile, and maximum values. The visualization uses the p5.js library to load a CSV dataset, calculate statistical measures, and render the box-and-whisker plot on a canvas. The plot includes numeric labels for each quartile and endpoint, with lines and rectangles drawn using p5.js built-in shape functions. Data comes from a modified cars_2.csv file containing 99 horsepower measurements.

Aamrubal
74% match
Loading thumbnail…

box plot

This box plot visualization displays the distribution of horsepower values from a CSV dataset of cars, loaded via p5.js’s `loadTable` in `preload()`. The sketch calculates and renders the minimum, first quartile, median, third quartile, and maximum using custom functions, then draws the box-and-whisker plot on a 1000x500 canvas. The chart uses p5.js drawing APIs like `line()`, `point()`, and `text()` to mark statistical summaries, with a horizontal axis scaled proportionally to the data range.

Ccwb314159@gmail.com
74% match
Loading thumbnail…

Assignment 6 Scatter Plot With Color Scale

This scatter plot visualizes Pokémon HP against Speed, with each point colored by the Pokémon’s generation using a qualitative color scale. The chart shows a positive trend, where higher Speed often correlates with higher HP, while the color legend distinguishes all seven generations. The visualization is rendered as an SVG using D3.js v6, with linear scales for the axes and an ordinal scale for the color mapping. Data is loaded from a CSV file via `d3.csv`, and the legend is generated using the `d3-legend` library.

Aahuynh8@dons.usfca.edu
73% match
Loading thumbnail…

Assignment 2 Dot Chart

A p5.js dot chart displays the number of Pokémon per generation across six generations. It loads data from a CSV file containing Pokémon stats, counts entries by generation, and plots the resulting totals as points along a horizontal count axis. The visualization uses p5.js functions including `loadTable`, `createCanvas`, `line`, `point`, and `text` to render axes, tick marks, labels, and data points on a 450×425 canvas. The chart shows that Generation 1 has the highest count, with subsequent generations progressively lower.

Aahuynh8@dons.usfca.edu
73% match
Loading thumbnail…

Lab 3 Boxplot

This example displays a boxplot of quarterback points added per season, showing the median, interquartile range, and outliers as individual points. The visualization uses p5.js to load CSV data from a GitHub gist, filter positive values into a sorted array, and compute quartiles directly in JavaScript. Draw functions render the box, whiskers, and outlier circles on a canvas, with axis labels generated programmatically. The code demonstrates a manual approach to statistical visualization without external charting libraries.

PPatrick
71% match
Loading thumbnail…

Assignment 2 Heat Map

This heat map visualizes the average attack values of Pokémon across seven types—Bug, Dark, Fire, Grass, Ground, Normal, and Water—for six generations, using a purple sequential color scale from light to dark to indicate increasing attack ranges. Each type is displayed as a row of colored squares, with one square per generation, alongside a legend showing six bins (0–20, 20–40, up to 100+). The visualization loads CSV data from GitHub using p5.js’s `loadTable`, then renders the grid and labels with the Canvas API and `rect` and `text` functions in `draw()`.

Aahuynh8@dons.usfca.edu
71% match