Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axis with React and D3

Public visualization

Axis with React and D3

0 stars1🌍 Public
Iinnocent thomas
Last edited Oct 11, 2021
Created on Oct 10, 2021

This example displays the top 10 most populous countries as a horizontal bar chart with axes, using React components to render SVG elements. The `useData` hook loads the UN World Population Prospects 2019 CSV and parses the population column. D3 scales (`scaleBand`, `scaleLinear`) map data to coordinates, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. React passes scales and data as props to these components, which use D3’s `ticks()` and domain methods to create the axis visuals.

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.

Comments

Sign in to join the discussion.

MIT Licensed