Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

axes with react d3

Public visualization

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

Comments

Sign in to join the discussion.

MIT Licensed