Strip Chart with p5.js

100%

Strip Chart with p5.js

✓ Published1🌍 Public

Last edited Dec 5, 2022

Created on Feb 15, 2022

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.

AI-generated description

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

Similar vizzes

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

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

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

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

71% match

Loading thumbnail…

Module6

This visualization uses birth-rate data from 2000–2013 for 39 countries to show how national rates change over time. A time slider scrubs through the years, with each country represented by a small circle positioned along a vertical axis. The current year is highlighted in a large display, and country labels fade or emphasize as the user drags the slider. The chart is rendered using D3 v3 with SVG, presenting a clean, static-scale line-and-dot layout that lets viewers compare relative birth rates across countries and track temporal trends.

CClevejones

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

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

70% match