p5.js.Strip Plot with jittering

100%

p5.js.Strip Plot with jittering

✓ Published0🌍 Public

Last edited Feb 10, 2024

Created on Feb 8, 2024

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.

AI-generated description

'https://gist.githubusercontent.com/eunicetu16/887aeb4a2f1cb34cc8c9890a2767f1a8/raw/779e47af52b9f30adbeb3abafc5b063a643ed545/highway_mpg.csv'

The original dataset is from 'https://corgis-edu.github.io/corgis/csv/cars/', and take only 'Identification.Make' and 'Fuel Information.Highway mpg'. Clean the dataset to have only 7 cars made that are needed.

MIT Licensed

Similar vizzes

Loading thumbnail…

Strip Chart with Jitter for Assignment 3

This strip chart displays average city MPG across five car makes (Audi, BMW, Mercedes, Porsche, Volkswagen) for 2009–2012 models. Each dot represents a vehicle, with horizontal jitter applied to reduce overplotting. The visualization uses p5.js for rendering, loading data from a CSV via `loadTable()`, and drawing points with `point()` and custom axes. Tooltips appear on hover, showing the exact MPG value using `mouseX`/`mouseY` coordinates. Color-coded dots correspond to each make, and gridlines at 5-MPG intervals aid comparison.

Vvishusikka

83% match

Loading thumbnail…

p5.js CSV Loader

A bar chart visualization displays fuel economy data for vintage cars using p5.js. The sketch loads a CSV dataset of car specifications through p5.js’s `loadTable` API in the `preload` function, then renders vertical bars in the `draw` loop that scale proportionally to each vehicle’s miles-per-gallon value. The example demonstrates parsing tabular data from a remote CSV file and mapping numeric columns to visual elements on a canvas.

CCurran Kelleher

77% match

Loading thumbnail…

p5.js example

This p5.js example presents multiple linked visualizations of a vehicle dataset, including a bar chart and dot plot comparing drivetrain and manufacturer effects on average miles per gallon. A heat map section is also coded, though its display is incomplete. The sketch loads CSV data from a Google Sheets URL using `loadTable`, processes the data in JavaScript, and renders the charts with the p5.js drawing API (`createCanvas`, `rect`, `ellipse`, `line`), using a static canvas sized at 1500 by 4500 pixels.

Lleoframba

77% match

Loading thumbnail…

p5.js CSV Loader

This example demonstrates scatter-like exploration of automobile data through a p5.js canvas. It visualizes engine efficiency by sizing randomly placed circles according to miles-per-gallon values from the loaded CSV dataset. The sketch uses p5.js `loadTable()` in the `preload()` function to fetch the cars.csv file, then reads the `economy (mpg)` column and maps its values to circle diameters. Drawing happens only once due to `noLoop()`, with dimensions ranging across the full 600-pixel canvas.

AAlark Joshi

76% match

Loading thumbnail…

p5.js.histogram

This visualization shows a histogram of city MPG values for a sample of cars, displaying the count of vehicles across eight MPG bins. The p5.js sketch loads pre-aggregated data from a CSV file hosted on GitHub, then renders bars on an 800x800 canvas using the `rect()` API. The chart includes labeled axes, gridlines at 200-count intervals, and a title, with data sourced from the CORGIS cars dataset. The bars are drawn in blue against a light gray background, with the y-axis representing counts and the x-axis displaying MPG values.

EEunice Tu

76% match

Loading thumbnail…

CSV with P5

This example demonstrates one approach to loading and visualizing CSV data with P5.js. It renders a bar chart of car fuel economy values from the provided `cars.csv` dataset, drawing one rectangle per car with a width proportional to its miles-per-gallon rating. The sketch parses the relevant CSV column into numbers and uses P5’s `setup` and `draw` functions to render the static visualization, relying on the `createCanvas`, `rect`, `noStroke`, and `noLoop` APIs.

CCurran Kelleher

74% match

Loading thumbnail…

P5 CSV Loader in CS 360

This example shows a simple bar chart of fuel economy values for a collection of cars, with each bar’s length proportional to miles per gallon. The visualization uses the p5.js library’s `loadTable` function in `preload()` to fetch a CSV file from a GitHub Gist, then iterates through the `economy (mpg)` column in the `draw()` loop to render rectangles on an 800×800 canvas. The data source is the provided `cars.csv` file.

AAlark Joshi

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

74% match