Heat map

100%

✓ Published0🌍 Public

Last edited Feb 9, 2024

Created on Feb 6, 2024

A heat map visualizes monthly rainfall totals in Liberia for 2021, using a vertical column of colored cells where darker shades represent higher precipitation values, with each cell labeled by its numeric amount and month. The p5.js sketch loads the data from a remote CSV file through the `loadTable` function in `preload`, then draws the map in `draw` using `createCanvas`, `fill`, and `rect` while mapping rainfall values to color intensities with `map` and `max`. The code also uses text functions to display month labels along the y-axis and a title at the top of the canvas.

AI-generated description

An adaptation of CSV File Loader in P5 by Alark Joshi that works in VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

A2 - Heat Map

This heat map visualizes total precipitation across seven cities from 1995 to 2005, using color intensity to represent rainfall amounts. The p5.js sketch loads CSV data from a GitHub gist via `loadTable`, then plots color-coded rectangles for each city-year combination. Countries appear on the y-axis, years on the x-axis, with a legend showing the precipitation scale. Colors range from light green for low rainfall to dark teal for higher totals.

Kkmduncan2@dons.usfca.edu

71% match

Loading thumbnail…

p5 Climate Change Heat Map

This visualization displays monthly average temperatures for seven randomly selected countries as a heat map, using color-coded rectangles arranged in a grid. Each row represents a country, each column a month, with color intensity reflecting temperature relative to the global dataset minimum and maximum. Built with p5.js, it loads CSV data from a GitHub repository via `loadTable`, processes the data in `preprocess()`, and renders the heat map using `rect()` and HSL color encoding. Hovering over a cell displays the country name and temperature value in a popup, while axis labels and a title provide context.

PPeter Gish

69% match

Loading thumbnail…

box plot A3

This visualization displays the distribution of monthly rainfall data using a box plot. It presents five key statistics—minimum, first quartile, median, third quartile, and maximum—computed from the dataset. The code loads rainfall values from a CSV file using p5.js’s `loadTable()` function, calculates the quartiles with a custom quantile function, and renders the plot on an 800×400 canvas. The p5.js drawing API constructs the box, median line, whiskers, and caps, with the median value labeled beside the plot. The visualization is titled "Rainfall Distribution" and uses a scaling factor of 50 to map data values to canvas coordinates.

KKwasi Acquaye

68% match

Loading thumbnail…

Histogram A3

This visualization displays the monthly rainfall distribution of a year as a histogram. It shows the frequency of rainfall amounts across ten bins, with the data parsed from a CSV file containing month and rainfall measurements. The piece uses p5.js to load the tabular data with `loadTable`, then calculates bin frequencies and renders the histogram bars, axis ticks, grid lines, and labels. The title references the histogram’s role as a frequency analysis chart.

KKwasi Acquaye

67% match

Loading thumbnail…

HeatMap

A heat map of temperature data for ten cities across the months of 2016, rendered as an interactive grid of colored squares using the p5.js `loadTable` API to fetch a CSV from a GitHub Gist. Each cell encodes average temperature through color saturation—cooler temperatures appear darker—while hovering over a cell displays its exact value. The visualization includes manual axis labels, a temperature color scale legend, and city names positioned along the left edge.

AAllen Ho

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

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

65% match

Loading thumbnail…

A2 - Dot Plot

This dot plot visualizes total precipitation in Ecuador from 1995 to 2005, with each blue circle representing a year’s rainfall on a Cartesian grid. The p5.js sketch loads CSV data from a GitHub gist via `loadTable` in `preload()`, then draws the chart in `setup()` using functions like `circle`, `line`, and `text`. Gridlines mark 500-mm intervals, axes are labeled, and the data range is derived from the `total_precipitation` and `Year` columns.

Kkmduncan2@dons.usfca.edu

65% match