Fork of P5 CSV Loader

100%

Fork of P5 CSV Loader

✓ Published0🌍 Public

Last edited Feb 1, 2025

Created on Feb 1, 2025

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

P5 CSV Loader

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.

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

89% match

Loading thumbnail…

A2 Graphs

This example presents three distinct data visualizations within a single p5.js canvas: a bar chart of female smokers in Australia over time, a dot plot of fiber content in bread, and a heat map of monthly precipitation in Seattle. The code loads CSV data from GitHub gists using `loadTable`. It directly renders shapes like `rect` for bars and heat map cells, and `circle` for dots, while manually annotating axes and using color thresholds to encode precipitation levels.

MMiaya South

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

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

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

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

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

74% match