Strip Chart without Randomizer Using p5.js

100%

Strip Chart without Randomizer Using p5.js

✓ Published0🌍 Public

Last edited Dec 5, 2022

Created on Feb 15, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Strip Chart with p5.js

This visualization shows birth rates per 1000 people in Florida from 1988 to 2016, grouped by year along the x-axis with rates plotted on the y-axis. It uses a strip chart format where individual data points are rendered as yellow dots, with a subtle randomized horizontal jitter applied to reduce overplotting. The code loads CSV data via p5.js’s `loadTable`, processes it into a dictionary keyed by year, and draws the chart using p5.js canvas functions like `point()`, `line()`, and `text()`. Axes labels and gridlines are manually constructed, and a fixed random salt stored in `localStorage` ensures consistent jitter across reloads.

OOlha

95% match

Loading thumbnail…

Histogram with p5.js

This example displays a histogram of birth rates per 1000 in California for 2016, with age groups on the x-axis and counts on the y-axis. The visualization uses p5.js to load a CSV dataset via `loadTable()` in `preload()`, then renders bars with `rect()` and axis labels with `text()` and `line()`. The data comes from a GitHub gist, and the sketch draws gridlines, a title, and a rotated y-axis label using canvas transforms.

OOlha

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

75% match

Loading thumbnail…

p5 strip chart

This interactive p5.js sketch displays a strip chart of yearly infection counts for US states from 1970 to 1980, using a simplified dataset derived from the CORGIS health repository. Red dots are jittered along the x-axis to reduce overplotting, with y-axis positions mapped to case numbers. The visualization includes axes, gridlines, and a hover tooltip that reveals the specific year and infection count for each point. The `preload()` function fetches CSV data via `loadTable`, while `setup()` initializes the canvas and random jitter values, and `draw()` renders the chart and handles mouse interaction.

AAndrew

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

74% match

Loading thumbnail…

Fork of Fork of Visualizing Distributions using P5 (Strip Chart)

This strip chart visualizes the distribution of centenarian ages using a p5.js canvas. The code loads CSV data from a GitHub gist, filters the age column, and maps each age value to a horizontal position while using random vertical placement to create the strip plot. The visualization includes labeled axes, tick marks, and a frequency grid, with data points rendered as red ellipses. Gridlines show cumulative counts along the y-axis, and the title “Centenarian Age Distribution - Strip Plot” appears at the top.

Rragregory@dons.usfca.edu

73% match

Loading thumbnail…

CS360 A3 Strip Chart

This interactive strip chart visualizes average math GPAs across U.S. states from 2005 to 2015, with each year’s data points jittered along the x-axis to reveal distribution. The p5.js sketch loads a CSV of SAT scores, maps values to canvas coordinates, and renders blue ellipses for individual data points. Axis labels, a chart title, and rotated axis titles are drawn using p5.js text functions, while `random()` adds horizontal scatter to reduce overplotting.

EEric Yao

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

71% match