box plot A3

100%

✓ Published0🌍 Public

Last edited Feb 13, 2024

Created on Feb 13, 2024

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.

AI-generated description

An adaptation of CSV File Loader in P5 by Alark Joshi that works in VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Histogram A3

This visualization displays the monthly rainfall distribution of a year as a histogram. It shows the frequency of rainfall amounts across ten bins, with the data parsed from a CSV file containing month and rainfall measurements. The piece uses p5.js to load the tabular data with `loadTable`, then calculates bin frequencies and renders the histogram bars, axis ticks, grid lines, and labels. The title references the histogram’s role as a frequency analysis chart.

KKwasi Acquaye

85% match

Loading thumbnail…

A3 Box Plot gragh

This example displays a box plot of National Aviation System delay counts from a filtered airline dataset, loaded from a GitHub-hosted CSV file and rendered with p5.js. It visualizes the distribution with quartiles, whiskers, and individual outliers, calculated using a custom quantile function and the 1.5×IQR rule. The sketch maps data values to canvas coordinates via the `map()` function, draws the plot with p5.js primitives like `rect()` and `ellipse()`, and includes interactive hover tooltips that show exact values when the mouse is near a statistical point.

Hhxu51@usfca.edu

76% match

Loading thumbnail…

A3 Box Plot

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.

Ddonaldminer

74% match

Loading thumbnail…

Box Plot

This example visualizes the distribution of salary data as a box plot, highlighting the minimum, first quartile, median, third quartile, and maximum values using a green box with a red median line. The data is loaded from a CSV file using p5.js’s `loadTable`, then processed and sorted in `setup` before a custom `drawBoxPlot` function renders the chart on a dimmed background. The code computes quantiles via a `quantile` helper function and uses p5.js drawing commands like `rect` and `line` to construct the plot directly on the canvas.

RRiya Mathur

73% match

Loading thumbnail…

Assignment 3 - Box Plot - P5.js

This example presents a box plot visualizing earthquake magnitudes across South American countries, with the chart drawn using P5.js. The visualization displays statistical quartiles, median, and minimum/maximum values for the dataset. The code loads earthquake data from a CSV file hosted on GitHub using P5.js’s `loadTable` function, then manually renders the box plot elements—including the box, whiskers, and dashed lines—through canvas drawing commands like `line()` and `rect()`. Axis labels and rotated text are also drawn using P5.js text functions, while the data is mapped to screen coordinates via `map()`.

SSimon Hackbert

72% 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

71% match

Loading thumbnail…

Boxplot

This example renders a box plot using the p5.js library through its `rect()` and `line()` functions within the `draw()` loop. The visualization displays five-number summary statistics—minimum, first quartile, median, third quartile, and maximum—as a rectangular box with whiskers extending to the extremes. Synthetic data is generated directly in the sketch using JavaScript arrays and mathematical calculations. The plot is drawn on a canvas created by `createCanvas()`, with axes and labels positioned manually through coordinate arithmetic. The code demonstrates a straightforward implementation of statistical visualization without external data sources.

SShazil Taqi

71% match

Loading thumbnail…

A3 - Box Plot

This example displays a box plot of population growth rates in Ecuador from 1940 to 2024, with values ranging from 1.5% to 3.5% plotted on an 800×800 pixel canvas. The visualization includes a blue interquartile range box, median line, and whiskers extending to the minimum and maximum values, computed manually from CSV data loaded via p5.js’s `loadTable()`. The rendering uses p5.js drawing functions such as `rect()`, `line()`, and `text()` to construct the plot and axis labels.

Kkmduncan2@dons.usfca.edu

71% match