P5js Heatmap big test

100%

P5js Heatmap big test

✓ Published0🌍 Public

Last edited Feb 15, 2022

Created on Feb 8, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

P5js Heatmap

This p5.js heatmap visualizes the relationship between car brands and two metrics, Horsepower and MPG, using a color-coded grid. The color of each cell transitions from orange (lower values) to green (higher values) based on the data's minimum and maximum. Built with the p5.js library, the visualization loads CSV data from a Gist, calculates color values using the `map()` function, and renders the results as colored squares. The chart includes labels for the axes and a color legend indicating green for higher and orange for lower values.

Vvishusikka

89% match

Loading thumbnail…

Fork of P5js Heatmap

This fork of a P5.js heatmap visualizes the relationship between car brand, horsepower, and MPG for six manufacturers. The sketch loads a CSV file from a GitHub gist and renders a 2-column grid of colored squares, where each square's hue is mapped from the minimum to maximum values for each metric. Using the p5.js `loadTable` API, it colorizes data points from green (higher values) to orange (lower values), and includes a legend explaining the gradient. The visualization highlights how Porsche and Mercedes-AMG prioritize horsepower while Volkswagen optimizes fuel efficiency.

TTushar Upadhyay

85% match

Loading thumbnail…

P5js Dotplots

This example shows the average horsepower of six German car brands as dot plots, with each brand’s value represented by a steelblue circle on a grid. The brands are listed vertically on the left, while the horizontal axis is labeled from 50 to 500 horsepower. The p5.js sketch loads data from a CSV file using `loadTable()`, then in `draw()` it renders the grid lines, labels, and circles based on the parsed values. The code uses p5.js 1.4.0, including the canvas API and text and shape functions.

Ddriftcafe

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

79% match

Loading thumbnail…

Heat Map

This heat map visualizes five car models from a CSV dataset, plotting engine displacement (hubraum) on the x-axis and car name on the y-axis, with cell colors encoding horsepower (leistung) using conditional fills (SteelBlue, LightSteelBlue, and Orange). Built with D3 v7 and SVG rendering, the code uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for the axes. The cells are drawn as rectangles with attribute-based data binding, and the legend text explains the maximum power and speed values.

Sshatomouimena

76% match

Loading thumbnail…

P5js Barchart

This bar chart displays the average horsepower for six German car brands, visually sorted by the highest-performing manufacturers. The visualization uses p5.js, creating a canvas that renders brand labels, a grid with axis lines, and colored rectangular bars drawn with the `rect()` function. Horsepower values are loaded from a CSV file using `loadTable()` and mapped to bar widths, while a rotated text label identifies the dataset. The rendering is static within the `draw()` loop, using grid lines and tick marks to establish the numeric scale.

Ddriftcafe

76% match

Loading thumbnail…

P5js Dotplot

This dot plot compares the average horsepower of top German car brands, showing values like Porsche’s 512.5 and Volkswagen’s 192.5. The p5.js sketch renders steel-blue circles for each brand’s data point on a grey grid with labeled axes. It loads the CSV dataset via `loadTable`, then uses `circle` and `text` to draw the visualization, with rotated labels for the y-axis title.

Vvishusikka

76% match

Loading thumbnail…

p5.js CSV Loader

This example demonstrates scatter-like exploration of automobile data through a p5.js canvas. It visualizes engine efficiency by sizing randomly placed circles according to miles-per-gallon values from the loaded CSV dataset. The sketch uses p5.js `loadTable()` in the `preload()` function to fetch the cars.csv file, then reads the `economy (mpg)` column and maps its values to circle diameters. Drawing happens only once due to `noLoop()`, with dimensions ranging across the full 600-pixel canvas.

AAlark Joshi

73% match