Skip to main content
SimilarExport ZIP
100%

Assignment 3: Histogram

✓ Published0🌍 Public
Aamrubal
Last edited Feb 14, 2022
Created on Feb 11, 2022
Forked from HTML Starter

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.

AI-generated description

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

See also React Starter.

The cars_1.csv file was edited to only contain the column "Fuel Information.Highway mpg" and only hold the first 100 rows.

MIT Licensed

Similar vizzes

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

Histogram

A histogram displays the distribution of car prices from a CSV file loaded from a GitHub gist. The chart divides the price range into ten equal bins and plots the frequency of cars within each bin as vertical bars. The p5.js library handles the data loading via `loadTable()` and the drawing with `createCanvas()`, `rect()`, and `map()`. A background grid and labeled axes for price and frequency support the visualization, which includes tick marks showing price values at each bin boundary.

SShazil Taqi
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 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…

Asssssignment

This visualization shows the fuel efficiency (mpg) of 20 car models, with horizontal bars representing each car's miles per gallon alongside their make. The chart uses blue tick lines and light green bars against a clean white background, with a labeled x-axis for population-2020 values. Built with React and D3 v5, it employs `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG elements through custom `AxisBottom`, `AxisLeft`, and `Marks` components that generate the ticks and rectangles. Data is loaded from a CSV file via D3's `csv` function.

HHemanthh81
73% match