p5.js example

100%

✓ Published0🌍 Public

Last edited Feb 3, 2022

Created on Feb 2, 2022

A bar chart displays calories for Starbucks Venti-sized drinks from a CSV file, rendered on a 1000x1000 canvas. Yellow rectangles are drawn sequentially along the x-axis, with heights proportional to the calorie values from the `10drinks.csv` dataset. The code uses p5.js `loadTable()` to parse the CSV data and `rect()` for drawing. A grid overlay and axis labels provide visual structure.

AI-generated description

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

Similar vizzes

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

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

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

73% match

Loading thumbnail…

p5 bar chart

This example displays a simple bar chart comparing car names to their prices, rendered on an 800x800 canvas. The visualization loads car data from a remote CSV file using p5.js’s `loadTable` in the `preload` function, then draws the bars with blue rectangles and labels in the `draw` loop. Axis lines and custom tick marks are added using p5.js drawing functions like `line` and `text`, with the chart titled “Cars vs Price”.

SShazil Taqi

71% match

Loading thumbnail…

p5.js example

This p5.js example presents multiple linked visualizations of a vehicle dataset, including a bar chart and dot plot comparing drivetrain and manufacturer effects on average miles per gallon. A heat map section is also coded, though its display is incomplete. The sketch loads CSV data from a Google Sheets URL using `loadTable`, processes the data in JavaScript, and renders the charts with the p5.js drawing API (`createCanvas`, `rect`, `ellipse`, `line`), using a static canvas sized at 1500 by 4500 pixels.

Lleoframba

71% match

Loading thumbnail…

bar_chart

This example renders a colorful pie chart where each slice represents a CSS named color, loaded from a remote CSV file. The code uses React for component state management and D3’s `csv`, `pie`, and `arc` functions to compute and draw the chart as SVG paths. Each slice is filled with its corresponding hexadecimal value from the dataset, creating a full circle of distinct hues. The visualization demonstrates a straightforward mapping of categorical data to a pie layout without inner radius or additional styling.

JJaya Durga V

70% match

Loading thumbnail…

Scientific Data Visualization ICE-6: Marks and Channels

This bar chart displays the calorie counts of the first 20 cereal products from a CSV dataset, using horizontal rectangles to encode values. The visualization employs React for structure and the d3 library's `scaleBand` and `scaleLinear` for axis mapping, with SVG for rendering. The code loads data via `d3.csv` from a gist URL, and the chart includes custom tick labels for both axes.

Ppravalika.thogaru10@gmail.com

70% match

Loading thumbnail…

bar chart react

This example shows a React component that loads CSS named color data from a CSV file using d3.csv, then displays a text summary of the dataset’s size, row count, and column count. The visualization renders within a React app using ReactDOM.render, while the data fetching and parsing are handled by the useEffect hook. The code includes a BackgroundCircle component that draws a yellow circle with a black stroke using SVG circle attributes, though the main user interface displays only a loading message or the text summary.

MMalcolm Mead

70% match