Bar Chart of P5 CSV Loader in CS 360

100%

Bar Chart of P5 CSV Loader in CS 360

✓ Published2🌍 Public

Last edited Feb 4, 2025

Created on Feb 4, 2025

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.

AI-generated description

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

Similar vizzes

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

93% 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.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

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

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

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

86% match

Loading thumbnail…

BarChart

This example visualizes the cylinders and names of cars from a CSV dataset loaded via p5.js’s `loadTable` in the `preload` function. It renders a horizontal bar chart on a canvas, with each car’s name labeled on the left and a red bar extending to the right proportionally to its cylinder count. The sketch uses p5.js methods like `createCanvas`, `rect`, `text`, and `line` within the `setup` and `draw` functions, and includes gridlines with numeric labels for reference.

Ccwb314159@gmail.com

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

85% match