Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

treemap

Public visualization

Viewing a saved revision (read-only)

7cc56a6b4c124a0ba75cd32ddacf8488

treemap

0 stars0🌍 Public
RRenato Magalhães
Last edited Sep 26, 2022
Created on Sep 26, 2022

This example shows a treemap visualization of population data, with three vertical columns of stacked rectangles representing different data groupings. The chart uses React to render SVG rectangles, with D3’s `scaleBand` and `scaleLinear` computing x and y positions and heights. Data comes from the United Nations World Population Prospects 2019. Mouse interactions highlight individual rectangles by adding a pink stroke via DOM event listeners. The visualization also includes a manually placed gray rectangle spanning multiple columns.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.