Skip to main content
SimilarExport ZIP
100%

Assignment #3 Histogram

✓ Published1🌍 Public
Mmhzahdeh@dons.usfca.edu
Last edited Feb 10, 2025
Created on Feb 9, 2025
Forked from p5.js.histogram

This histogram displays the distribution of cylinder counts in a dataset of cars, with the x-axis showing cylinder types and the y-axis showing the number of cars. The visualization uses p5.js to load a CSV file from a URL via `loadTable`, then counts occurrences per cylinder type in the `setup()` function. Bars are drawn in `draw()` using `rect()` calls, with heights scaled by count and positioned along a manually drawn coordinate system. The data originates from the Corgis cars dataset, specifically the fuel information column.

AI-generated description

'https://gist.githubusercontent.com/eunicetu16/2192dfd3f280dc9d0b96bb83c89dbd7b/raw/1f5e5c08cb40178bf14ab08586c74666da072d44/city_mpg.csv'

The original dataset is from 'https://corgis-edu.github.io/corgis/csv/cars/', and take only 'Fuel Information.City mpg' columns and group them into 8 groups. And have the counts for each group.

MIT Licensed

Similar vizzes

Loading thumbnail…

histogram

This histogram displays the distribution of car cylinder counts from a CSV dataset fetched via a Gist URL. It uses the p5.js library to load the data with `loadTable`, compute frequency counts, and render the bars, axis lines, and labels on the canvas. The visualization includes interactive hover feedback and a title, showing how a simple hash map can be used to aggregate and draw a frequency distribution.

Ccwb314159@gmail.com
83% match
Loading thumbnail…

Fork of Histogram with p5.js

This visualization displays the number of cylinders for various car models as a series of vertical bars, with each bar labeled by the corresponding car name. The chart uses p5.js to load car data from a CSV file via `loadTable()`, then draws the bars and axes using `rect()` and `line()` within the `draw()` loop. The sketch includes a fixed canvas size, grid lines, and axis labels to contextualize the values, while the data is fetched from a remote GitHub Gist containing car specifications.

Mmhzahdeh@dons.usfca.edu
82% match
Loading thumbnail…

Histogram for Assignment 3

This visualization displays a histogram of average city miles per gallon (mpg) for various car makes and models from 2009 to 2012, with bar heights representing the count of vehicles at each mpg value. Built with p5.js, the sketch loads a CSV file containing mpg and count data, then renders the bars using the `rect()` function, scaling values via a custom `scale()` helper. The code draws grid lines, axis labels, and annotated data values directly on the canvas, with a title and rotated y-axis label for clarity.

Vvishusikka
81% match
Loading thumbnail…

Assignment 3: Histogram

This visualization displays a histogram of highway miles per gallon (MPG) for the first 100 cars in an edited dataset from cars_1.csv. It uses p5.js to load the CSV table in preload(), draw the canvas in setup(), and render five manually defined bins spanning 10–34 MPG in draw(), with editable bin limits and no framework dependency despite its React listing.

Aamrubal
80% match
Loading thumbnail…

BarChart

This example visualizes the cylinders and names of cars from a CSV dataset loaded via p5.js’s `loadTable` in the `preload` function. It renders a horizontal bar chart on a canvas, with each car’s name labeled on the left and a red bar extending to the right proportionally to its cylinder count. The sketch uses p5.js methods like `createCanvas`, `rect`, `text`, and `line` within the `setup` and `draw` functions, and includes gridlines with numeric labels for reference.

Ccwb314159@gmail.com
76% match
Loading thumbnail…

p5.js.histogram

This visualization shows a histogram of city MPG values for a sample of cars, displaying the count of vehicles across eight MPG bins. The p5.js sketch loads pre-aggregated data from a CSV file hosted on GitHub, then renders bars on an 800x800 canvas using the `rect()` API. The chart includes labeled axes, gridlines at 200-count intervals, and a title, with data sourced from the CORGIS cars dataset. The bars are drawn in blue against a light gray background, with the y-axis representing counts and the x-axis displaying MPG values.

EEunice Tu
75% match
Loading thumbnail…

Histogram

This visualization displays a histogram of average miles per gallon for vehicles in North America, using data from a CSV file loaded via p5.js's `loadTable`. The sketch, built with p5.js, counts data points into bins and renders bars with `rect`, scaled by maximum frequency. It includes axis labels and tick values, with a dark background and blue bars.

Mmacodiero@yahoo.com
75% match
Loading thumbnail…

Assignment 3: Box Plot

This example visualizes the distribution of horsepower among vehicles using a box plot, displaying key summary statistics including the minimum, first quartile, median, third quartile, and maximum values. The visualization uses the p5.js library to load a CSV dataset, calculate statistical measures, and render the box-and-whisker plot on a canvas. The plot includes numeric labels for each quartile and endpoint, with lines and rectangles drawn using p5.js built-in shape functions. Data comes from a modified cars_2.csv file containing 99 horsepower measurements.

Aamrubal
74% match