{"version":"1.0","type":"rich","title":"The Margin Convention","description":"This example shows the population of the top 20 countries as a horizontal bar chart, using a tidy margin convention to position the chart within an SVG. The React app fetches UN population data with d3.csv, parses the 2020 column, and scales the bars with d3.scaleLinear and d3.scaleBand. Bars are rendered as SVG `<rect>` elements inside a translated `<g>` group, with loading state handled by React state and useEffect. The code uses `d3.max` to set the x-domain and includes d3.v7 and React 17.0.2 via CDN.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/1992826f7a11457ea21f99b60e4a3b3f?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}