Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

axes with react d3

Public visualization

Viewing a saved revision (read-only)

1dfb91c68e1e47a6a4448397178c2666

axes with react d3

0 stars1🌍 Public
BBurak Senel
Last edited Mar 16, 2021
Created on Mar 16, 2021
Forked from Margin convention

This example displays a horizontal bar chart of the top 10 countries by 2020 population, using React to render SVG elements and D3.js for data processing and scales. It fetches UN population data from a CSV file via `d3.csv`, then applies `scaleBand` for the y-axis and `scaleLinear` for the x-axis to position bars and grid lines. Axis ticks are generated with `xScale.ticks()` and placed using SVG `<line>` and `<text>` elements, while country labels appear on the left. The chart updates asynchronously, showing a loading message until the data arrives.

AI-generated description

A program to load CSV data