{"version":"1.0","type":"rich","title":"The Margin Convention","description":"This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 10 most populous countries from a UN population dataset (2020 estimates). The code uses D3’s `csv` loader, `scaleBand`, and `scaleLinear` to position and size the bars within an inner plotting area defined by explicit margins, while React’s `useState` and `useEffect` manage data fetching and component state. All SVG elements are generated declaratively through React, with the root group translated by the margin values to align the chart inside the fixed 960×500 viewport.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/8041c37eba5449a2a39cac8eb8802900?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}