Skip to main content
SimilarExport ZIP
100%

A3 Box Plot

✓ Published0🌍 Public
Ddonaldminer
Last edited Feb 14, 2022
Created on Feb 14, 2022
Forked from HTML Starter

This example visualizes the distribution of mushroom stem lengths using a box plot. It displays the minimum, maximum, median, and interquartile range of the dataset, which is loaded from a CSV file. The visualization is built with the p5.js library, using its `createCanvas`, `loadTable`, `sort`, and drawing functions. Data is processed by computing quartiles and the median, then rendered as a vertical line for range, a rectangle for the interquartile range, and a line for the median on a 500×500 canvas with custom axis labels.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A3 Strip Chart

A3 Strip Chart displays the distribution of mushroom stem widths as a scatter plot along a vertical axis, with each dot jittered horizontally to reduce overlap. The visualization reads data from a local CSV file loaded via p5.js’s `loadTable()`, then filters and sorts the values in `setup()`. Using the p5.js `createCanvas()`, `ellipse()`, and `random()` functions, it renders individual points on an 800×800 canvas with labeled tick marks and axis lines.

Ddonaldminer
82% match
Loading thumbnail…

A3 Histogram

This visualization displays the distribution of mushroom cap diameters from a CSV dataset, using a bar chart where each bar represents the log-scaled count of caps within a 5-centimeter bin. The p5.js TypedDict stores counts per diameter, while the canvas renders grid lines, axis labels, and colored bars. The code loads data via `loadTable` from a GitHub Gist and uses `log` to compress the y-axis values, with a legend and header text clarifying the measurement units.

Ddonaldminer
82% match
Loading thumbnail…

Box Plot-A3

This example visualizes the distribution of Broadway show gross earnings using a box plot, highlighting the median, quartiles, whiskers, and outliers. The visualization is rendered with p5.js, which loads a CSV file from a GitHub gist in the `preload()` function and computes the five-number summary and interquartile range for outlier detection. The plot includes labeled axes, a box spanning the interquartile range, and individual points for values falling outside the upper and lower fences.

Jjrcuster@dons.usfca.edu
74% match
Loading thumbnail…

box plot A3

This visualization displays the distribution of monthly rainfall data using a box plot. It presents five key statistics—minimum, first quartile, median, third quartile, and maximum—computed from the dataset. The code loads rainfall values from a CSV file using p5.js’s `loadTable()` function, calculates the quartiles with a custom quantile function, and renders the plot on an 800×400 canvas. The p5.js drawing API constructs the box, median line, whiskers, and caps, with the median value labeled beside the plot. The visualization is titled "Rainfall Distribution" and uses a scaling factor of 50 to map data values to canvas coordinates.

KKwasi Acquaye
74% match
Loading thumbnail…

A3_BoxPlot

This example shows a horizontal box plot of machine learning engineer salaries, displaying the minimum, first quartile, median, third quartile, and maximum salary values in USD. Built with p5.js, the visualization loads salary data from a remote CSV file, calculates statistical quantiles using a custom quantile function, and renders the box, whiskers, median line, and axis ticks directly onto an 800×600 canvas. The x-axis represents salary ranges with labeled tick marks every 25,000 USD, and the plot includes a title and axis labels.

DDuc Pham
73% match
Loading thumbnail…

Boxplot testing

This example demonstrates interactive box plots that visualize the distribution of selected numeric columns, optionally grouped by a categorical variable through dropdown menus. It shows quartiles, medians, and outliers, with tooltips revealing exact values on hover. The visualization is built with React and D3 v5, using `d3.nest()` to compute summary statistics and `d3.scaleLinear` for the y-axis. Rendered as SVG with animated transitions, box plots and outlier circles respond to mouse events, highlighting the interquartile range while dimming others.

SSchmittYannic
73% match
Loading thumbnail…

Fork of Boxplot test

This example visualizes wine prices as a boxplot, displaying the minimum, maximum, median, and interquartile range of a dataset loaded from a Google Sheets CSV. It computes quartiles and scales the plot to fit a 600x600 canvas. The implementation uses the p5.js library, relying on `loadTable`, `createCanvas`, `rect`, `line`, and `ellipse` functions to render the chart and its axes with tick marks.

CCurran Kelleher
73% match
Loading thumbnail…

A4-3 TEST

This example shows a box plot of pork price observations loaded from a CSV file, with a horizontal line spanning the min and max, a box between the first and third quartiles, and labeled ticks for each statistic. The code computes quartiles, the interquartile range, and whisker boundaries using d3.median and d3.quantile. It renders the chart as an SVG with d3.v5, using a linear scale for the x-axis, custom tooltip on hover, and styling via external CSS.

MMike Z
72% match