P5 BoxPlot

100%

✓ Published0🌍 Public

Last edited Sep 20, 2022

Created on Sep 14, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

D3 Boxplot

This example presents a boxplot that visualizes the distribution of industrial natural gas prices in Hawaii, measured in dollars per million BTU. The plot summarizes the data’s minimum, first quartile, median, third quartile, and maximum values, which are computed from a CSV dataset using the d3.quantile, d3.min, and d3.max functions. The visualization is rendered as an SVG graphic, with the boxplot oriented vertically using a linear scale for the y-axis and a band scale for the x-axis. The code imports specific D3 v7 modules—including scaleLinear, scaleBand, axisLeft, and axisBottom—to construct the chart, while custom lines and rectangles are manually appended to the SVG to draw the box, whiskers, and median line.

Mmariahdiaz

80% match

Loading thumbnail…

P5 Dot Plot

This example visualizes natural gas prices in the industrial sector from 1961 to 2016 using a dot plot. Each dot represents a sampled year, positioned horizontally by price and vertically by time, with labels for both the year and price value. The code uses the p5.js library, loading CSV data from a GitHub repository via `loadTable`, then rendering points, text, and axis lines on a 600x500 canvas. The plot includes a labeled x-axis for price increments and annotations for the most and least expensive years.

Mmariahdiaz

80% match

Loading thumbnail…

Box Plot

This example visualizes earthquake magnitudes in Hawaii during 2016 using a box plot, displaying the median, quartiles, and outliers from a CSV dataset. The plot highlights values above magnitude 4 as red outlier points and includes a labeled axis. Built with p5.js, the code loads data via `loadTable()`, calculates statistical summaries manually, and renders the chart using Canvas drawing functions like `rect()`, `line()`, and `point()`.

CChandana Srinivas

78% match

Loading thumbnail…

P5 Strip Plot

This example shows a strip plot of industrial petroleum prices for New Mexico, displaying individual data points as circles along a horizontal band. The p5.js sketch loads a CSV dataset via `loadTable()`, then uses `random()` to jitter each point horizontally to reduce overlap. The y-axis is scaled to price values, with tick labels and axis lines drawn using p5.js drawing functions like `line()`, `circle()`, and `text()`. The visualization uses a fixed canvas size of 400 by 700 pixels and does not update or animate.

Mmariahdiaz

77% match

Loading thumbnail…

P5 Bar Chart

A P5 bar chart visualizes natural gas prices in California over time, with bars representing prices for each year sampled from an external CSV dataset. The chart highlights that 2005 had the highest price, with an annotation noting a connection to the recession. Using p5.js, the code loads data via `loadTable`, renders rectangles with `rect()`, and displays axis labels and annotations through `text()`. A loop iterates through rows, scaling price values to bar heights, while grid lines are drawn using `line()`.

Mmariahdiaz

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

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…

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

75% match