Skip to main content
SimilarExport ZIP
100%

Heat Chart of P5 CSV Loader in CS 360

✓ Published1🌍 Public
Hhxu51@usfca.edu
Last edited Feb 4, 2025
Created on Feb 4, 2025

This heat chart visualizes average fuel economy (mpg) across model years and cylinder counts from a CSV dataset of cars. The p5.js `loadTable()` function fetches the data, while `createCanvas()` and `rect()` draw the color-coded grid. Cell colors map from blue to orange using `map()`, with gray indicating missing year-cylinder combinations. The axes labels and title are rendered using p5.js `text()`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Bar Chart of P5 CSV Loader in CS 360

This example displays a horizontal bar chart of fuel economy (mpg) for a list of car models, sorted by name. It loads the data from a remote CSV file using p5.js’s `loadTable()` in the `preload()` function, then parses the columns into arrays. The sketch draws axes, gridlines, and bars with `rect()` in `drawHorizontalBarChart()`, mapping economy values to bar lengths with `map()` and labeling each bar with truncated car names.

Hhxu51@usfca.edu
82% match
Loading thumbnail…

P5js Heatmap big test

This p5.js example displays a small heatmap comparing horsepower and MPG across six car brands, with green cells indicating higher values and orange indicating lower values. It loads data from a CSV file using the p5.js `loadTable` function, then renders colored squares via the `square()` canvas API. The `heatMapColorforValue()` function maps each numeric value to a hue range using p5.js `map()`, while the table’s Max and Min rows drive the color scaling for both columns.

Ddriftcafe
81% 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
80% match
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
80% 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
79% match
Loading thumbnail…

Fork of Dot Plot Chart of P5 CSV Loader in CS 360

This example visualizes car data from a CSV file, plotting each vehicle as a dot based on its weight (logarithmic scale on the x-axis) and fuel economy (linear scale on the y-axis). The p5.js sketch loads the data using `loadTable` in `preload()`, calculates column minimums and maximums, and renders interactive dots with tooltips showing car name, weight, and MPG on hover. Grid lines and axis labels are drawn manually. The code uses `map()` and a custom `mapLog()` function for coordinate scaling, and `createCanvas()` for a 900×700 pixel display.

Hhxu51@usfca.edu
78% 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
78% match