p5 Climate Change Bar Chart

100%

p5 Climate Change Bar Chart

✓ Published1🌍 Public

Last edited Feb 8, 2022

Created on Feb 8, 2022

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.

AI-generated description

USF 360 Data Visualization - Assignment #2, Part 1

MIT Licensed

Similar vizzes

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

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

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

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

78% match

Loading thumbnail…

Histogram for Temperature Count of January

This histogram displays the count of average temperatures recorded in January 2016 across the first ten cities in a weather dataset. The visualization uses p5.js to draw the chart and axes, with mouse hover interactions revealing exact counts for each temperature range. Data is loaded dynamically from a CSV file hosted on GitHub using p5.js’s `loadTable` function, and the bars are rendered as rectangles on the Canvas API.

AAllen Ho

72% match

Loading thumbnail…

Bar chart

This bar chart displays monthly average temperatures, with each month on the vertical axis and temperature values extending horizontally. The chart uses an SVG canvas with pink bars, rendered using D3 version 5. The code employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for ticks, reading data from a CSV file. Months appear in order from January through December, showing a peak in May.

RRichard Wong

72% match

Loading thumbnail…

barChart

This example displays a vertical bar chart of carbon intensity data (gCO2/kWh) for 2020, loaded from a CSV file hosted on a GitHub gist. Each bar’s height represents a data value, with categorical labels drawn beneath the bars and a rotated axis title at the bottom left. The visualization is built using the p5.js library, with custom functions `drawTickYAxes` and `drawTickXAxes` that render grid lines and tick marks on the plot. A maximum value from the data drives the y-axis scale, labeled in increments of 50.

Hhollyjpotter

71% match

Loading thumbnail…

Fork of Colm Lang A2 Bar Chart

A fork of Colm Lang's bar chart, this p5.js visualization displays the average share of renewable energy production from 2000 to 2020 across EU member states. The data is loaded via `loadTable` from a remote CSV file, with a canvas rendering gridlines, axis ticks, and labeled axes using custom drawing functions. Each bar's height is scaled proportionally to the maximum value in the dataset, with country years plotted along the x-axis. The sketch uses p5.js 1.4.0 and processes the data directly from the CSV without additional libraries.

VVReddy913

69% match