Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axis with React & D3

Public visualization

Axis with React & D3

0 stars1🌍 Public
YYenTingWu
Last edited Jul 8, 2021
Created on Jul 8, 2021
Forked from Margin Convention

This example shows the top 10 most populous countries as a horizontal bar chart with axes, using population data from the United Nations World Population Prospects 2019. The chart renders as SVG through React, with state managed via `useState` and `useEffect`. Axes are built manually using D3 scales: `scaleBand` positions country labels on the y-axis, while `scaleLinear` positions numeric tick marks on the x-axis, with tick values generated by `xScale.ticks()`. D3’s `csv` loader fetches and parses the data, and `max` determines the domain for the x-scale.

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