Skip to main content
SimilarExport ZIP
100%

Boxplot test

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

This example displays a boxplot visualization of wine prices, with the chart area laid out on a pastel turquoise canvas. The code loads wine price data from a Google Sheets CSV via `loadTable` and computes the median, quartiles, and min/max values using JavaScript array operations. The drawing is implemented with p5.js, using `createCanvas` and `background` to set up the scene, though the actual boxplot rendering is not yet included in the draw loop.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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
90% 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
76% 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
75% match
Loading thumbnail…

Box Plot

This example shows a box plot of used video game prices from 2004–2010, with a summary of the median, quartiles, and outliers displayed across a price axis. The visualization highlights the distribution’s center and spread, using a purple rectangle for the interquartile range and small squares to mark extreme values. Built with p5.js, the sketch loads CSV data via `loadTable`, computes quartiles and the IQR manually, and renders the chart with `rect` and `text` calls on an 800×600 canvas.

AAllen Jake Polintan
75% match
Loading thumbnail…

P5 BoxPlot

This example renders a boxplot of industrial natural gas prices in Hawaii using p5.js. It loads CSV data from a GitHub gist, computes quartiles and median from the price array, and draws the plot with rectangles, lines, and text labels. The chart displays minimum, maximum, and quartile values on a numeric scale, with axes marked from 0 to 800. The sketch uses p5.js functions like `loadTable`, `createCanvas`, and `rect` within the `setup` and `draw` loops.

Mmariahdiaz
75% 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
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…

Box Plot with p5.js

This visualization displays box plots of California birth rates per 1000 people across seven years, with each plot summarizing the distribution for a given year. The p5.js sketch loads CSV data via `loadTable()`, groups rows by year, and computes quartiles and median for each group. It renders colored rectangles for interquartile ranges, median lines, and whiskers using `rect()` and `line()`, with gridlines and axis labels drawn on an 800×500 canvas.

OOlha
72% match