{"version":"1.0","type":"rich","title":"Margin Convention","description":"This example demonstrates the D3 margin convention by rendering a horizontal bar chart of the top 10 most populous countries in 2020, using UN population data loaded via `d3.csv`. The chart employs `d3.scaleBand` for country positioning and `d3.scaleLinear` for population values, with an SVG `<g>` element translated by the margin object to inset the visualization. React manages the state and lifecycle, fetching and filtering the data before mapping it to styled `<rect>` elements inside the SVG.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/8624f190fa2e46d8a391ecdd80e047a7?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}