Skip to main content
SimilarExport ZIP
100%

Assignment 3: Box Plot

✓ Published0🌍 Public
Aamrubal
Last edited Feb 15, 2022
Created on Feb 15, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

cars_2.csv was modified to only include the first 99 lines of the attribute 'Engine Information.Engine Statistics.Horsepower'.

MIT Licensed

Similar vizzes

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
87% match
Loading thumbnail…

Box Plot for Assignment 3

This example shows a box plot that summarizes the distribution of median city MPG values for all car makes and models from 2009 to 2012. It displays the minimum, first quartile, median, third quartile, and maximum values along a vertical axis. The visualization is built with p5.js, loading a CSV dataset from a GitHub gist. The code programmatically calculates the quartiles from the sorted data and uses basic shape-drawing functions like `rect()` and `line()` to construct the plot.

Vvishusikka
83% match
Loading thumbnail…

p5.js.boxplot

This p5.js visualization shows a boxplot of car engine horsepower across different models from 2009–2012, using data from the CORGIS cars dataset. The sketch loads a CSV via `loadTable()` in `preload()`, then calculates the minimum, quartiles, median, and maximum values from the horsepower column. It draws tick marks, axis labels, and statistical summary annotations using p5.js canvas API functions like `line()`, `rect()`, and `text()`. The dark background and white strokes highlight the distribution of horsepower in the sample.

EEunice Tu
81% match
Loading thumbnail…

Assignment 4 BoxPlot

This example displays a box plot of car torque values from a CSV dataset, summarizing the distribution with minimum, maximum, median, and interquartile range (Q1 and Q3). The visualization uses D3 v7 with an SVG rendering approach, employing `d3.scaleBand` and `d3.scaleLinear` for axes, and computes summary statistics via `d3.min`, `d3.max`, `d3.median`, and `d3.quantile`. A vertical line and shaded rectangle mark the range and interquartile spread, while horizontal lines indicate key values. The data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csv`.

Eeranyoung
79% match
Loading thumbnail…

boxplot

This example visualizes the distribution of automobile prices using a box plot, displaying the minimum, maximum, quartiles, median, and outliers. The code loads data from a CSV file hosted on GitHub, calculates the statistical measures with d3.min, d3.max, d3.quantile, and d3.median, and renders the chart as an SVG. It uses the d3-boxplot library to draw the box plot, with the chart titled "Box Plot of Car Prices" within a 600x400 viewport.

Iindushashi.g@gmail.com
78% match
Loading thumbnail…

Assignment 3: Histogram

This visualization displays a histogram of highway miles per gallon (MPG) for the first 100 cars in an edited dataset from cars_1.csv. It uses p5.js to load the CSV table in preload(), draw the canvas in setup(), and render five manually defined bins spanning 10–34 MPG in draw(), with editable bin limits and no framework dependency despite its React listing.

Aamrubal
77% match
Loading thumbnail…

BoxPlotD3

This example uses D3 v7 to create a horizontal box plot that visualizes the distribution of fuel economy (mpg) for a dataset of cars. It computes statistical quartiles, median, and min/max values from the data, then renders a box and whisker plot with labeled values for each statistic. The visualization is drawn as an SVG, with the data fetched from a remote CSV file and mapped to a linear scale for the x-axis.

Ccwb314159@gmail.com
76% match
Loading thumbnail…

Box Plot

This example visualizes the distribution of miles per gallon (mpg) for 2012 vehicles using a box plot. It shows the minimum, first quartile, median, third quartile, and maximum values as horizontal lines and a shaded box, with numerical labels for each statistic. The chart is built with D3.js v4 and rendered as SVG, reading data from a CSV file. The code uses `d3.csv`, `d3.quantile`, and `d3.scaleLinear` to compute summary statistics and map the data to screen coordinates.

Pprateekvasi
76% match