{"version":"1.0","type":"rich","title":"The Margin Convention","description":"This example demonstrates the Margin Convention by rendering a bar chart of the top 10 most populous countries from UN population data. It loads CSV data with `d3.csv`, then uses `scaleBand` and `scaleLinear` to position and size rectangles within an SVG, with a grouped `<g>` element applying the margin offsets. React manages state and rendering. The chart shows horizontal bars whose widths correspond to each country’s 2020 population, with the margin ensuring axes and labels remain inside the viewport.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/5468054452504ee295a756e445adbca4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}