Skip to main content
SimilarExport ZIP
100%

Cars

✓ Published0🌍 Public
Kkmduncan2@dons.usfca.edu
Last edited Jan 30, 2025
Created on Jan 30, 2025

This example visualizes fuel economy data from a CSV file of cars, showing each vehicle’s miles-per-gallon rating as a horizontal bar sorted by row order. The bars, drawn in yellow on a gray background, increase in length proportionally to the fuel efficiency value. The code loads the dataset using p5.js’s `loadTable` with a header row, retrieves the numeric `economy (mpg)` column, and renders the rectangles in the `draw` loop. The visualization uses the p5 canvas API with `createCanvas`, `rect`, and `fill`.

AI-generated description
MIT Licensed

Similar vizzes

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

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
85% 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
84% 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
84% 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
84% match
Loading thumbnail…

Barchart

This bar chart visualizes fuel economy (miles per gallon) for individual car models from a CSV dataset, ordered vertically. The code uses p5.js with `createCanvas`, `loadTable`, and `rect` to render bars proportional to each car's mpg value, with car names labeled along the y-axis. Height adjusts dynamically based on the number of rows, and the chart includes axes and a title. The visualization prioritizes clear comparison of fuel efficiency across a wide range of vehicles.

Mmacodiero@yahoo.com
84% match
Loading thumbnail…

Assignment #2 Visualizing Amounts with P5

This example visualizes fuel economy (mpg) for eight car models using a static bar chart, with the title "Economy mpg by Car Type" and a CSV data source. The chart renders bars in steelblue, with axis labels and tick marks styled via CSS classes. The code uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the numeric y-axis, and d3.axisBottom and d3.axisLeft to draw the axes. The SVG output is created within a fixed 1500x500 container with margins, and bars are drawn as rect elements with heights proportional to the mpg values.

Mmhzahdeh@dons.usfca.edu
83% match