Skip to main content
SimilarExport ZIP
100%

CSV with P5

✓ Published0🌍 Public
CCurran Kelleher
Last edited Jan 31, 2024
Created on Jan 31, 2024
Forked from P5.js Starter

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.

AI-generated description

Inspired by P5 CSV Loader by Alark Joshi

A demonstration of one way to load and use CSV data with P5.js.

MIT Licensed

Similar vizzes

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

Gist 6716af5ab2fd2c7d25baee69dc577448

This gallery example visualizes a subset of the classic “car.csv” automobile dataset, plotting fuel economy against model year. Each car is drawn as a small circle, positioned by its year and economy values, with the point’s color encoding the car’s brand. The implementation uses the D3.js library, specifically `d3.forceSimulation` to arrange overlapping labels or points and `d3.geoPath` for any map projection, though the core scatter plot is rendered via standard SVG circles. The visualization is built entirely from client-side JavaScript, directly parsing the CSV file to drive the animated layout.

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