P5 CSV Loader

100%

✓ Published2🌍 Public

Last edited Feb 1, 2025

Created on Jan 30, 2025

This example visualizes the percentage of female smokers from a CSV dataset loaded from a GitHub gist. The p5.js `loadTable` API fetches the data in `setup()`, and `getColumn` extracts the numeric values for rendering. Each bar’s width maps linearly to the percentage via `rect`, using a lavender fill on a gray canvas. The code demonstrates a straightforward bar-chart construction with p5.js’s drawing functions, showing the distribution of values across records.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of P5 CSV Loader

This example visualizes smoking rates by gender as a simple bar chart, where each bar’s width corresponds to the female percentage from a CSV file loaded from a GitHub gist. The p5.js `loadTable` function fetches the data in `setup()`, and `table.getColumn()` extracts the `Data.Percentage.Female` column for rendering. Using the p5.js Canvas API, it draws 9.5-pixel-high rectangles in a loop over the dataset, with a light purple fill on a gray background. The sketch is embedded in an HTML page that imports p5.js from a CDN.

MMiaya South

94% match

Loading thumbnail…

Fork of P5 CSV Loader

This example visualizes smoking rates for Australia across multiple years using a scatter-plot-like layout. It loads CSV data from a GitHub Gist via the p5.js `loadTable` function, then filters rows with `findRow` to isolate country-specific records. The sketch uses p5.js canvas drawing commands like `rect` and `text` to render bars and year labels, scaling values from the `Data.Percentage.Female` column. The chart encodes each year’s percentage as bar height, with a static y-axis baseline and x-axis spaced by year index.

MMiaya South

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

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

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

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

77% match

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

76% match