{"version":"1.0","type":"rich","title":"Margin Convention","description":"This example demonstrates the margin convention for D3 visualizations by rendering a horizontal bar chart of United Nations population data. The chart displays the top 10 countries by 2020 population, with bars scaled linearly along the x-axis and categorically arranged along the y-axis. Using React hooks to manage state, the code loads CSV data with `d3.csv` and creates scales with `scaleBand` and `scaleLinear`. The SVG output groups all rectangles inside a translated `<g>` element, applying the specified margins to position the chart within the 960×500 viewport.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/223e9e4f99274c53a96b62eb8be2a1cd?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}