Climate change

100%

Climate change

✓ Published1🌍 Public

Last edited Jun 25, 2022

Created on Jun 25, 2022

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()`.

AI-generated description

CSCE 5320 Data Visualization-11550333

MIT Licensed

Similar vizzes

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

88% match

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

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

77% match

Loading thumbnail…

Climate Change

This visualization presents an interactive climate change dashboard blending a world map with a scatterplot of global average temperatures since 2000. The map uses data from a GeoJSON file, while temperature records come from an Our World in Data dataset. The plot encodes each year as a circle, with its horizontal position scaled by year and vertical position by temperature, colored by value. An input panel offers a mock linear prediction of future temperatures. The implementation relies on D3 v7 projections like `d3.geoNaturalEarth1` and `d3.geoPath`, alongside `d3.select`, `d3.json`, and `d3.csv`.

SSai Sandhya Nannapaneni

75% match

Loading thumbnail…

Monthly Global Land Surface Temperatures

This visualization displays monthly global land surface temperatures from 1753 to 2015, with each cell’s color representing variance from the 1951–1980 average. A hover tooltip reveals the exact month, year, and temperature anomaly. The SVG chart uses d3.scaleTime for the x-axis, d3.scaleQuantize for color mapping, and d3.json to load the FreeCodeCamp dataset. Animated transitions appear only in the tooltip’s opacity changes, while a gradient legend is built with d3.scaleLinear and linearGradient stops.

Vvaynexie

72% match

Loading thumbnail…

Heat Map: Monthly Global Land-Surface Temperature

This heat map visualizes monthly global land-surface temperatures from 1753 to 2015, with each cell colored according to temperature variance from a base of 8.66°C. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the year and month axes, `scaleOrdinal` with a custom color range for temperature values, and `d3-tip` for interactive tooltips displaying month, temperature, and variance details. A color legend with discrete temperature bands appears beneath the chart. Data comes from the FreeCodeCamp ProjectReferenceData GitHub repository.

Ssriramvsharma

72% match

Loading thumbnail…

Monthly Global Land-Surface Temperature

This visualization displays monthly global land-surface temperature anomalies from 1753 to 2015, using a base temperature of 8.66°C. A heatmap grid shows each month-year combination as a colored cell, with colors ranging from deep red (cold) to dark blue (warm). The D3.js code fetches JSON data from a FreeCodeCamp repository, scales the temperature values linearly, and renders an SVG with axes for years and months. d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft handle the scales and axes, while a separate legend shows the color scale.

Ssriramvsharma

71% match

Loading thumbnail…

Heat Map: Monthly Global Land-Surface Temperature

This heat map visualizes monthly global land-surface temperature anomalies from 1753 to 2015, with a base temperature of 8.66°C. Each cell represents a month and year, colored by temperature variance using a custom 14-color scale. The visualization is built with D3 v5, using `scaleTime` for axes, `scaleLinear` for color mapping, and SVG rectangles for rendering. Data is fetched from the FreeCodeCamp ProjectReferenceData JSON source, while the legend and axis labels are generated with `axisBottom` and `axisLeft`. The code includes commented-out tooltip logic, but no interactive tooltips are active in the final render.

Ssriramvsharma

71% match