Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Axes with React & D3

Public visualization

Viewing a saved revision (read-only)

fd2d99c46c2e49b1aa231bf63d16fbce

Axes with React & D3

0 stars1🌍 Public
SSerind Joshua McCue
Last edited Aug 20, 2022
Created on Aug 20, 2022

This example demonstrates a horizontal bar chart of the top 10 countries by population for 2020, with D3 scales and axes rendered as React SVG components. It uses `d3.csv` to load UN population data, `scaleBand` for the y-axis categories, and `scaleLinear` for the x-axis values. Axis ticks are generated manually via `xScale.ticks()` and `yScale.domain()`, drawing lines, text, and rectangles directly in JSX. The visualization updates from a loading state to the chart once data arrives.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.