Heatmap

100%

✓ Published0🌍 Public

Last edited Feb 6, 2024

Created on Feb 5, 2024

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.

AI-generated description

Heatmap featuring the average life expectancy's from various countries. Note: The data was modified to only show a few countries compared to all countries in the dataset Data from: https://github.com/rfordatascience/tidytuesday/blob/master/data/2023/2023-12-05/readme.md

MIT Licensed

Similar vizzes

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

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

73% match

Loading thumbnail…

Heatmap

A heatmap displays the value of a product across five countries, with each cell color-coded by the numeric value. The visualization uses a threshold color scale to map values into three colors, while missing data appears as blank cells. The code loads data from a CSV file and renders the heatmap as SVG rectangles using d3.csv, d3.scale.ordinal, d3.svg.axis, and d3.scale.threshold.

CCasperHogenboom

73% match

Loading thumbnail…

A5_BubbleChart

This visualization shows life expectancy across various countries using a bar chart with a sequential color scale. The chart maps average life expectancy values to a light-to-dark green gradient, with color intensity and bar height both encoding the data. Built with D3 v7 and rendered as SVG, it uses d3.scaleSequential with d3.interpolateRgb for coloring, d3.scaleBand for the x-axis, and d3.legendColor from the d3-legend library for the legend. The data comes from a CSV file hosted on GitHub containing country-level expectancy metrics.

DDuc Pham

73% match

Loading thumbnail…

A6 Diverging Color Scale Bar Chart

This example visualizes life expectancy in 1960 for a selection of countries using a diverging color scale bar chart. The bars are colored on a green-to-red gradient via a sequential scale with an RdYlGn interpolator, where higher life expectancies appear greener and lower ones redder. The chart uses D3 v7 to load data from a CSV file, create SVG bars with band and linear scales, and render axes with tick labels. A custom legend and axis titles are added using D3’s selection and axis methods, while the underlying data is sourced from a shortened TidyTuesday dataset.

AAllen Jake Polintan

72% match

Loading thumbnail…

Interactive Color Legend Scatter Plot for Health Expenditure Vs Life Expectancy

This interactive scatter plot visualizes the relationship between health expenditure and life expectancy across countries, with continents encoded by color. A dropdown menu allows users to switch which attribute maps to the X and Y axes, while hovering over the color legend highlights points from that continent and fades others. Built with React and D3 v5, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles rendered via the `Marks` component. Data comes from a CSV file loaded with `d3.csv`.

Aaishwarya8615

72% match

Loading thumbnail…

Time Series Visualization - Search by Country

This interactive visualization displays life expectancy trends from 1960 to 2016 for a user-selected country. The code loads CSV data from a GitHub gist via `d3.csv`, filters rows by matching the entered country name against the 'Country Name' column, and renders a line chart using `d3.line` with `d3.scaleLinear` for the x and y axes. A custom tooltip built with D3 pointer events reveals the precise year and life expectancy value as the user moves over the SVG path.

Ssrikkanth05

72% match

Loading thumbnail…

Interactive Color Legend Scatter Plot for Life Expectancy Data with Menu for Mortality

This interactive scatter plot visualizes correlations between life expectancy, infant deaths, and adult mortality across continents. Using React and D3 v5, the visualization includes dropdown menus to switch the x- and y-axis attributes, while continent data drives the ordinal color scale for the legend. Circle sizes encode GDP, and tooltips display life expectancy values. The color legend supports hover interaction with fade effects for highlighting specific continents, and the data originates from a CSV file loaded via d3.csv.

Aaishwarya8615

72% match