{"version":"1.0","type":"rich","title":"The Margin Convention","description":"This example demonstrates the margin convention in D3, rendering a horizontal bar chart of the ten most populous countries using UN World Population Prospects 2019 data. The SVG visualization maps each country’s 2020 population to a bar width via `d3.scaleLinear` and uses `d3.scaleBand` for the categorical y-axis, with bars grouped inside a translated `<g>` element that respects the specified margin. The React component asynchronously loads CSV data with `d3.csv`, and the chart updates only after the data is fetched, displaying a loading message beforehand.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/06be4a6c18b54b58b359ed12fc0c5515?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}