Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Axes with React & D3

Public visualization

Fork of Axes with React & D3

0 stars0🌍 Public
Rrhysg-ps
Last edited Feb 18, 2022
Created on Feb 18, 2022

This example renders a horizontal bar chart of the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. Using React hooks (useState, useEffect) to load and manage data, it creates an SVG with D3’s scaleBand, scaleLinear, and max. Axes are manually drawn by mapping xScale.ticks() to lines and text, while y-axis labels are generated from the domain. React and D3 are combined, with D3 handling scales and data parsing, and React managing the component lifecycle and SVG output.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

Data: United Nations World Population Prospects 2019.

Comments

Sign in to join the discussion.

MIT Licensed