Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ICE-6: Rendering Marks and Channels with React and D3 Final

Public visualization

Viewing a saved revision (read-only)

8c05e795dd92408889e7a55ef6d86a4a

ICE-6: Rendering Marks and Channels with React and D3 Final

0 stars0🌍 Public
SSnapika
Last edited Mar 6, 2022
Created on Mar 6, 2022
Forked from Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries, with bars sized by population using an SVG `<rect>` for each mark. Built with React for component state and rendering, it uses D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting (`format`) to position bars and tick labels. The bar widths encode population values, and hover tooltips show formatted numbers. Data comes from the United Nations World Population Prospects 2019 CSV, loaded asynchronously via `d3.csv` and sliced to the top ten entries.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.