Skip to main content
SimilarExport ZIP
100%

Fork of P5 CSV Loader

✓ Published0🌍 Public
MMiaya South
Last edited Feb 1, 2025
Created on Feb 1, 2025
Forked from 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.

AI-generated description

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

See also React Starter.

MIT Licensed

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
89% match
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
86% match
Loading thumbnail…

A3 Graphs

This example visualizes the total number of smokers in Australia from 1980 to 2012 using a p5.js canvas. It renders a box plot displaying the minimum, maximum, average, and quartile values computed from data loaded via loadTable from a CSV file hosted on GitHub. The sketch sorts the raw values to calculate statistical summaries, then draws annotated axes and a distribution histogram using p5.js drawing functions.

MMiaya South
79% 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
78% 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
73% match
Loading thumbnail…

Fork of CSV Dataset Test

This fork of the CSV dataset template renders a bar chart of population estimates for select countries, sourced from the penguins dataset’s CSV-loading pattern. The chart uses `d3.scaleLinear` and `d3.scaleBand` to map populations to bar widths and countries to vertical positions, with axes from `d3.axisLeft` and `d3.axisBottom`. Data is parsed in `index.js` by converting each population string to a number and multiplying by 1000, then drawn as SVG rectangles.

Wweird_danger
73% match
Loading thumbnail…

Fork of Pie Chart_Rinoj Gautam

This example visualizes the smoking rates of the top 10 US states using a pie chart rendered with SVG. The chart uses D3 v5 to load CSV data from a GitHub gist, sorted in descending order, and encodes each state’s rate as a pie segment. Legends display each state name and its percentage value. The code leverages `d3.csv`, `pie`, `arc`, `scaleOrdinal`, and `schemeCategory10` for data loading, layout, and color mapping, with hover events logging values to the console.

RRinoj-Gautam
72% 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
72% match