p5 Climate Change Heat Map

100%

p5 Climate Change Heat Map

✓ Published0🌍 Public

Last edited Feb 8, 2022

Created on Feb 8, 2022

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.

AI-generated description

USF 360 Data Visualization - Assignment #2, Part 3

MIT Licensed

Similar vizzes

Loading thumbnail…

p5 Climate Change Bar Chart

This visualization is a horizontal bar chart that presents a histogram of global land temperature data. It shows the distribution of average temperature readings across all countries, with each horizontal bar representing a range of temperatures and its length indicating the number of data points within that range. The chart is built using the p5.js library, which reads a CSV file from a GitHub repository and preprocesses the data into buckets. The code uses `loadTable` to fetch the data, `createCanvas` to set the drawing space, and `rect` and `line` functions to render the bars and axes.

PPeter Gish

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

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

78% match

Loading thumbnail…

Climate change

This visualization displays the distribution of global land temperatures using a horizontal bar chart built with the p5.js library. The chart groups temperature readings from the GlobalLandTemperaturesByCountry dataset into buckets, showing the frequency of data points across temperature ranges. Each bar’s length represents the count of readings in that bucket, while the y-axis labels the temperature spans in Celsius. The code processes the CSV data in `preload()` and `preprocess()`, then renders the chart with p5.js drawing functions like `rect()` and `line()`.

SSamanvitha1

77% match

Loading thumbnail…

p5 Climate Change Dot Plot

This dot plot visualizes the relationship between average temperature and average temperature uncertainty across global country-level climate data from September 2013 onward. Each blue dot represents a country-month observation, with temperature on the x-axis and uncertainty on the y-axis, using a dataset loaded from a GitHub-hosted CSV file. The p5.js sketch maps raw data values to screen coordinates, draws axes with labeled ticks, and renders approximately 2,500 points per frame using the `point()` API. The visualization reveals how temperature uncertainty varies across different temperature ranges.

PPeter Gish

76% match

Loading thumbnail…

Fork of Climate change

This bar chart visualizes the distribution of global land temperatures by country, showing the frequency of data points across temperature ranges in Celsius. Using the p5.js library, the sketch loads CSV data from a GitHub repository and sorts the raw temperature values into 2,500-point buckets. The preprocessing function calculates bucket spans and counts, then renders horizontal bars with labeled axes, tick marks, and a rotated y-axis title. The visualization reveals the overall shape and concentration of temperature records across different climate zones.

Vvenkatajayanth03

75% match

Loading thumbnail…

Heatmap

A heatmap displays average life expectancy for selected countries across seven decades, from 1960 to 2020. Each row represents a country, with colored cells encoding age values using a blue-green gradient where higher life expectancies appear brighter. The visualization uses p5.js, loading CSV data via `loadTable` and mapping numeric values to fill colors through the `color()` function. Country labels and a legend with age ranges are rendered alongside the grid, with axis annotations for years and life expectancy values.

AAllen Jake Polintan

74% match

Loading thumbnail…

Heat Map

This heat map visualizes monthly temperature variances across years for a global temperature dataset. The SVG graphic uses a color-coded grid of rectangles to represent data points, with the x-axis showing year and the y-axis displaying months. Built with React and D3 v5, the code leverages `scaleLinear` and `scaleBand` for positioning, along with `axisBottom` and `axisLeft` for the chart axes. The data comes from a JSON file loaded via `d3.json`, and hover effects are implemented with CSS styling on the rectangle elements.

Eezzep66

73% match