Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bar Chart 2

Public visualization

Viewing a saved revision (read-only)

3083617d54554352a481c965c89203e0

Bar Chart 2

0 stars0🌍 Public
AAndres Perdomo
Last edited Nov 7, 2023
Created on Nov 7, 2023

This example renders a horizontal bar chart of the top 10 most populous countries using React and D3.js v5, drawing SVG rectangles with `Marks.js` and labeling them with custom `AxisBottom` and `AxisLeft` components. The chart displays population values from the UN World Population Prospects 2019 dataset, loaded via `d3.csv` in `useData.js`. The x-axis uses a linear scale (`d3.scaleLinear`) and the y-axis a band scale (`d3.scaleBand`), but the visualization omits an explicit x-axis title or population gridlines, appearing sparse due to minimal margins and no tick labels on the x-axis. It relies on ReactDOM to mount the `App` component into the HTML page.

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.