Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Refactored Bar Chart

Public visualization

Viewing a saved revision (read-only)

c8dfaf708b7c4ec3ad1acc863be61697

Refactored Bar Chart

0 stars1🌍 Public
SSong Tao Chen
Last edited Jan 1, 2022
Created on Jan 1, 2022

This visualization displays a horizontal bar chart of the top 10 countries by population in 2020, using data loaded from a CSV file of UN population estimates. The example demonstrates how to structure a React-based D3 chart with clearly separated axis and mark components, with margins applied to position the left and bottom axes. It uses D3 v7’s scaleBand and scaleLinear for scales, react-fragments to render SVG groups, and a custom useData hook with d3.csv for data fetching. The chart highlights the importance of margin configuration for effective axis placement.

AI-generated description

This is to demostrate how to make axis with margins important

5:02:59