Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React & D3

Public visualization

Viewing a saved revision (read-only)

062a01161ba3433caa8c0a7fbcff5613

Axes with React & D3

0 stars1🌍 Public
SSong Tao Chen
Last edited Jan 1, 2022
Created on Dec 29, 2021

This example shows a horizontal bar chart of UN population data for 2020, with custom axes rendered using React and D3. The chart displays the top 10 countries by population, using D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Ticks for both axes are manually generated via `xScale.ticks()` and mapped to SVG `<line>` and `<text>` elements, with margins applied via a `<g>` transform. Data is loaded asynchronously from a CSV using `d3.csv`.

AI-generated description

This is to demostrate how to make axis with margins important

5:02:59