Skip to main content
SimilarExport ZIP
100%

P5js Heatmap

✓ Published1🌍 Public
Vvishusikka
Last edited Feb 8, 2022
Created on Feb 8, 2022
Forked from Hello VizHub

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.

AI-generated description
MIT Licensed

Similar vizzes

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
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
87% 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
79% 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
78% 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
78% 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
78% match
Loading thumbnail…

Heat Chart of P5 CSV Loader in CS 360

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()`.

Hhxu51@usfca.edu
77% match
Loading thumbnail…

task2q

This scatter plot visualizes the relationship between Horsepower and MPG for various car brands, with each point colored by its brand. The visualization loads car data from a CSV file hosted on GitHub, parses it with `d3.csv`, and maps values to screen coordinates using `d3.scaleLinear` for both axes. Points are rendered as SVG circles with `d3.selectAll`, and a legend is generated using `d3.scaleOrdinal` with `d3.schemeSet1`. Axis labels are added via `d3.axisBottom` and `d3.axisLeft`, with the SVG container created using standard D3 selection and attribute methods.

Ssaishruthik2361@gmail.com
77% match