Skip to main content
SimilarExport ZIP
100%

P5 Strip Plot

✓ Published0🌍 Public
Mmariahdiaz
Last edited Sep 20, 2022
Created on Sep 14, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

p5.js.Strip Plot with jittering

This p5.js example visualizes highway fuel efficiency for seven car makes, plotting each vehicle’s miles per gallon as a jittered point to reveal data distribution. The sketch loads a pre-cleaned CSV from a GitHub gist using `loadTable`, groups rows by make into a `Map`, and randomizes horizontal offsets via `random()`. Rendering uses Canvas drawing functions like `point()` and `line()` to create a strip chart with labeled axes, color-coded points, and a jitter effect that reduces overlap.

EEunice Tu
74% match
Loading thumbnail…

Strip Chart

This strip chart shows the distribution of Apple’s monthly share price from July through December 2021, with each month’s data points jittered horizontally to reveal density and spread. It loads a CSV from a GitHub gist using p5.js’s `loadTable()`, then renders points with `point()` on a 700×600 canvas. The x-axis labels months, the y-axis maps price per share, and random jitter is applied per point within each month’s column using `random()`. The code uses p5.js’s `setup()`, `draw()`, and `noLoop()` to generate the static visualization.

PPranay Matalia
74% 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
74% match
Loading thumbnail…

Strip Chart without Randomizer Using p5.js

This example displays Florida birth rates per 1000 people from 1988 to 2016, grouped by year as a strip chart. It loads CSV data via p5.js’s `loadTable` function, then uses nested loops to draw horizontal gridlines, axis labels, and orange points with `point()` and `strokeWeight()`. The chart sorts values within each year and maps them to a fixed y-axis scale, while the p5.js `createCanvas` and `text()` functions render the visualization and annotations.

OOlha
74% match
Loading thumbnail…

Strip Plot

A strip plot displays the average temperature of ten cities for each month of 2016, with each month’s ten readings jittered horizontally to reduce overplotting. The visualization uses the p5.js library, loading a CSV dataset from a GitHub Gist via the `loadTable` function, and renders circles on a canvas with hover tooltips showing exact temperature and month values. Axis labels and tick marks for temperature and month are drawn manually, with random offsets precomputed in a `randomNum` array to distribute points.

AAllen Ho
73% match
Loading thumbnail…

Strip Plot

This visualization uses a strip plot to display the number of earthquakes recorded across eight different locations during 2016. Built with p5.js, it loads a CSV dataset and groups earthquakes by location (e.g., Afghanistan, Alaska, Japan), plotting each month’s count as a colored point jittered horizontally along the x-axis. The y-axis encodes the earthquake count, with grid lines and labels, while each location gets a distinct color and a fixed column. The code processes the data in `setup()`, then draws the axes, labels, and points in `draw()` using p5.js functions like `point()`, `stroke()`, and `text()`.

CChandana Srinivas
72% match