Skip to main content
SimilarExport ZIP
100%

A2 Heatmap

✓ Published0🌍 Public
Ddonaldminer
Last edited Feb 8, 2022
Created on Feb 8, 2022
Forked from HTML Starter

This heatmap visualizes the distribution of various mushroom species across eight habitat types—grasses, leaves, meadows, paths, heaths, urban, waste, and woods—and four seasons (spring, summer, autumn, winter). Each cell’s color intensity reflects the number of species recorded in that habitat-season combination, with data loaded from a CSV file. The visualization uses the p5.js library to create a canvas, process the tabular data with a `TypedDict`, and render colored rectangles via `lerpColor` to map species counts to a purple gradient.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

A2 Dot Plot

This dot plot compares the number of mushroom species found in eight different habitats, including woods, grasses, leaves, meadows, heaths, paths, urban, and waste areas. The visualization displays a single dot for each habitat along a logarithmic x-axis, using a log base of 1.5 to manage the wide range of species counts. The plot is built with p5.js, using its `createCanvas` and `ellipse` functions, and pulls data from a CSV file hosted on GitHub. Habitat names are displayed on the left, with the transformed log values plotted along the bottom axis.

Ddonaldminer
81% match
Loading thumbnail…

A2 Bar graph

This visualization displays the number of poisonous mushrooms across different families, using horizontal yellow bars on a gray canvas. The p5.js code loads a CSV dataset from a GitHub gist, processes it with a p5.TypedDict to count occurrences, and renders each family name as a label with a proportional bar. A scaled axis below the bars marks count values with tick lines. The algorithm tracks the maximum count to scale the chart appropriately.

Ddonaldminer
75% match
Loading thumbnail…

A3 Histogram

This visualization displays the distribution of mushroom cap diameters from a CSV dataset, using a bar chart where each bar represents the log-scaled count of caps within a 5-centimeter bin. The p5.js TypedDict stores counts per diameter, while the canvas renders grid lines, axis labels, and colored bars. The code loads data via `loadTable` from a GitHub Gist and uses `log` to compress the y-axis values, with a legend and header text clarifying the measurement units.

Ddonaldminer
71% match
Loading thumbnail…

A2 - Temps (Heatmap)

This heatmap visualizes average monthly temperatures for seven U.S. states in 2016, using a yellow-to-orange color scale where warmer temperatures appear brighter. The p5.js sketch loads CSV data via `loadTable`, processes it in `preload()` and `setup()`, and renders colored squares for each state–month combination on a Canvas. A legend explains the color range, and axis labels identify states and months. The code uses p5.js drawing functions like `fill()` and `square()` to construct the grid.

Cctan13@dons.usfca.edu
71% match
Loading thumbnail…

A2_HeatMap

A heatmap visualizes earthquake magnitudes across different countries and months, with each cell color-coded to indicate impact level, where pink represents high magnitude and blue represents low magnitude. The visualization also includes a legend and tooltip that displays country, month, and magnitude details when hovering over a cell. Built with p5.js, the code loads earthquake data from a CSV file using `loadTable()` and renders rectangles via the Canvas API, using color interpolation based on magnitude values to encode severity.

DDuc Pham
70% match
Loading thumbnail…

Heat Map

This heat map visualizes impact magnitudes across eight locations over nine months (January–September 2016), with pink cells indicating high impact and blue cells indicating low impact. Using the p5.js library, the sketch loads CSV data from a GitHub gist via `loadTable`, then renders a grid of rounded rectangles colored with an exponential scale (`3.5 ** magnitude`). It displays location names and month labels, plus a legend and a title summarizing the data range.

CChandana Srinivas
70% match
Loading thumbnail…

A2 Heat Map

This heat map visualizes residential wood consumption across seven U.S. states over ten years (2010–2019), using orange squares whose opacity scales with the data value. Built with p5.js, it loads CSV data from a GitHub URL, draws axes and labels, and relies on the canvas API (`createCanvas`, `square`, `fill`) for rendering. Hovering over a square displays the specific value and a wood emoji via p5’s `mouseX`/`mouseY` checks and `text` function.

RRavneet Singh Bhatia
70% match
Loading thumbnail…

A3 Box Plot

This example visualizes the distribution of mushroom stem lengths using a box plot. It displays the minimum, maximum, median, and interquartile range of the dataset, which is loaded from a CSV file. The visualization is built with the p5.js library, using its `createCanvas`, `loadTable`, `sort`, and drawing functions. Data is processed by computing quartiles and the median, then rendered as a vertical line for range, a rectangle for the interquartile range, and a line for the median on a 500×500 canvas with custom axis labels.

Ddonaldminer
69% match