Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axis with React

Public visualization

Viewing a saved revision (read-only)

5f57196c281c4d148d6eae9db0395a37

Axis with React

0 stars1🌍 Public
Ddumbdataguy@gmail.com
Last edited Nov 26, 2023
Created on Nov 26, 2023
Forked from Margin Conventions

This example shows a horizontal bar chart of the top 10 countries by population in 2020, using data loaded from a CSV file via `d3.csv`. React renders an SVG containing scaleBand and scaleLinear axes, with custom tick marks and labels generated from `xScale.ticks()`. The bars are drawn as `<rect>` elements using D3’s scale functions, while React hooks (useState, useEffect) manage data loading and state. The chart updates automatically once the data arrives, displaying a clean, styled visualization with a left margin for country names.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!