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
RRedSorrel
Last edited Sep 20, 2021
Created on Sep 20, 2021

A horizontal bar chart displays United Nations population estimates for ten countries in 2020, with D3 scales mapping country names to the y-axis and population values to the x-axis. The example integrates D3's `scaleBand`, `scaleLinear`, and `max` functions within a React component, rendering SVG elements through ReactDOM. CSV data loads asynchronously via `d3.csv`, and the chart draws tick marks, labels, and bars using SVG `<line>`, `<text>`, and `<rect>` elements, with axes positioned using explicit margin calculations.

AI-generated description

A program that loads in some data about World Population Prospects from the UN.

Comments

Sign in to join the discussion.

MIT Licensed