Fork of P5js Heatmap

100%

Fork of P5js Heatmap

✓ Published0🌍 Public

Last edited May 10, 2023

Created on May 10, 2023

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.

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

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

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

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

80% match

Loading thumbnail…

P5js Barchart

This bar chart displays the average horsepower of top German car brands, including Porsche, Mercedes-AMG, and BMW, with values read from a CSV file. The visualization uses the p5.js library, loading data via the `loadTable` function and rendering bars with the `rect` API on a canvas. A horizontal grid with labeled tick marks aids comparison, and brand names are rotated vertically on the left axis. The chart’s color scheme uses muted green bars against a light gray background.

Vvishusikka

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…

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

75% match

Loading thumbnail…

Fork of Assignment 5 - Bubble Chart

This interactive bubble chart compares average horsepower, torque, and highway MPG for various car brands, with each circle positioned by horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG. Color distinguishes makes via a custom ordinal scale built with `d3.interpolateTurbo`. Data loads from an external CSV using `d3.csv`, and SVG circles include tooltips on hover that display brand names. A legend shows the MPG radius mapping, and the visualization uses `d3.axisBottom` and `d3.axisLeft` for axes with linear scales (`d3.scaleLinear`).

Rrohinikotha

75% match