p5.js CSV Loader

100%

p5.js CSV Loader

✓ Published1🌍 Public

Last edited Apr 2, 2025

Created on Feb 3, 2022

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.

AI-generated description

An adaptation of CSV File Loader in P5 by Alark Joshi that works in VizHub.

MIT Licensed

Similar vizzes

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

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

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

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

84% match

Loading thumbnail…

p5 bar chart

This example displays a simple bar chart comparing car names to their prices, rendered on an 800x800 canvas. The visualization loads car data from a remote CSV file using p5.js’s `loadTable` in the `preload` function, then draws the bars with blue rectangles and labels in the `draw` loop. Axis lines and custom tick marks are added using p5.js drawing functions like `line` and `text`, with the chart titled “Cars vs Price”.

SShazil Taqi

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

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

77% match

Loading thumbnail…

Bar Chart Visualization

This bar chart displays the fuel efficiency (mpg) of various car makes, sourced from a remote CSV file. The visualization uses D3 v7 to load and parse the data with `d3.csvParse`, then renders horizontal bars with `d3.scaleLinear` and `d3.scaleBand`. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with the SVG output styled in steelblue. Data and marks are updated dynamically through an asynchronous `fetch` workflow.

HHemanthh81

77% match