Skip to main content
100%

Axes with React & D3

✓ Published0🌍 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 with axes, using React for component structure and D3 for scales and rendering. The code explicitly builds x-axis ticks with `xScale.ticks()` and y-axis labels from the scale’s domain, drawing SVG lines and text elements. It loads data from the United Nations World Population Prospects 2019 via `d3.csv`, applies a linear scale for population and a band scale for countries, and renders the chart as SVG within a React component.

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.

MIT Licensed

Similar vizzes