Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactored Bar Chart

Public visualization

Viewing a saved revision (read-only)

8895ea557fe749b9b3f2aa8936aa2e7a

Refactored Bar Chart

0 stars0🌍 Public
YYibo Zhang
Last edited Jan 13, 2022
Created on Jan 13, 2022

This example displays the top 10 most populous countries as a horizontal bar chart using SVG. The chart is rendered with React and D3 v5, featuring axes created by the `AxisBottom` and `AxisLeft` components, which use `xScale.ticks()` and `yScale.domain()` respectively. The bars are drawn by the `Marks` component, which maps data to `rect` elements using `scaleBand` and `scaleLinear`. Data is loaded asynchronously from a UN World Population Prospects 2019 CSV file using D3’s `csv` function.

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.