Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Making a Bar Chart with React & D3

Public visualization

Making a Bar Chart with React & D3

0 stars0🌍 Public
MMauricio García Benítez
Last edited Dec 31, 2020
Created on Dec 29, 2020

This bar chart visualizes the top 10 most populous countries using United Nations World Population Prospects 2019 data, rendered with React and D3.js (v5). The chart displays horizontal bars ordered by population, with formatted tick labels (e.g., “1.4B”) and interactive tooltips showing exact values. D3’s scaleBand and scaleLinear handle axes and positioning, while React components (AxisBottom, AxisLeft, Marks) compose the SVG output. The bottom axis includes custom formatting via D3’s format API, and the styling uses the Poppins font.

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