This example demonstrates the margin convention by rendering a horizontal bar chart of the top ten most populous countries from United Nations 2019 data loaded via `d3.csv`. React manages the component state and renders SVG rectangles using JSX, while D3’s `scaleBand` and `scaleLinear` map country names and population values to pixel positions. The chart applies fixed top, right, bottom, and left margins by translating a group element, ensuring the visualization area is neatly inset within the 960×500 SVG canvas. D3 v7 provides the data-loading and scaling utilities, while React 18 handles the reactive DOM updates.