Skip to main content
SimilarExport ZIP
100%

P5 CSV Loader in CS 360

✓ Published2🌍 Public
AAlark Joshi
Last edited Jan 30, 2025
Created on Jan 31, 2024
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Bar Chart of P5 CSV Loader in CS 360

This example displays a horizontal bar chart of fuel economy (mpg) for a list of car models, sorted by name. It loads the data from a remote CSV file using p5.js’s `loadTable()` in the `preload()` function, then parses the columns into arrays. The sketch draws axes, gridlines, and bars with `rect()` in `drawHorizontalBarChart()`, mapping economy values to bar lengths with `map()` and labeling each bar with truncated car names.

Hhxu51@usfca.edu
93% match
Loading thumbnail…

csv loader example

This example demonstrates a bar chart visualization of fuel economy data from a CSV file. It loads a cars dataset from a GitHub Gist using p5.js’s `loadTable()` function with a preload hook. The sketch then extracts the `economy (mpg)` column and renders horizontal bars on an 800×800 canvas via `createCanvas()` and `rect()` in the draw loop. Each bar’s width scales proportionally to the mpg value, showing the distribution across all car models. The code also uses `table.getColumn()` to access the data array.

Nnathanjmuljadi@gmail.com
92% 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
91% match
Loading thumbnail…

P5 CSV Loader

This visualization loads a CSV dataset of car specifications from a GitHub Gist and renders a horizontal bar chart of fuel economy values. The p5.js `loadTable` function fetches the data in `preload()`, while `setup()` initializes an 800×800 canvas. The `draw()` loop iterates through the `economy (mpg)` column, drawing golden-yellow rectangles scaled by each car’s efficiency rating, providing a quick comparative view of miles per gallon across models.

Bbhavi.kenia@gmail.com
90% 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
90% match
Loading thumbnail…

Fork of Dot Plot Chart of P5 CSV Loader in CS 360

This example visualizes fuel economy (mpg) for a small set of cars, with each car represented as a horizontal bar sorted by its name, using p5.js. The sketch loads a CSV dataset of car specifications from a GitHub gist via the `loadTable()` function, then maps the economy values to bar widths on a custom-drawn axis. The chart uses `createCanvas()` and `map()` to scale the data, and truncates long car names to keep the display legible.

Hhxu51@usfca.edu
90% match
Loading thumbnail…

P5 CSV Loader

This example uses p5.js to load and visualize a CSV file of car specifications from a GitHub gist. The sketch’s `preload()` function calls `loadTable()` to fetch the data, and the `draw()` loop reads the “economy (mpg)” column with `getColumn()` to render a horizontal bar chart, with each bar’s length scaled by the fuel efficiency value. The visualization emphasizes a straightforward, procedural approach to displaying tabular data on an 800×800 canvas.

Rronnieferrufino4908@gmail.com
89% match
Loading thumbnail…

Cars

This example visualizes fuel economy data from a CSV file of cars, showing each vehicle’s miles-per-gallon rating as a horizontal bar sorted by row order. The bars, drawn in yellow on a gray background, increase in length proportionally to the fuel efficiency value. The code loads the dataset using p5.js’s `loadTable` with a header row, retrieves the numeric `economy (mpg)` column, and renders the rectangles in the `draw` loop. The visualization uses the p5 canvas API with `createCanvas`, `rect`, and `fill`.

Kkmduncan2@dons.usfca.edu
85% match