{"version":"1.0","type":"rich","title":"The Margin Convention","description":"This example demonstrates the “margin convention” for D3 visualizations by rendering a horizontal bar chart of population data for ten countries in 2020. A React component uses the `useState` and `useEffect` hooks to load CSV data via `d3.csv`, then computes scales with `scaleBand` and `scaleLinear`. The SVG output positions all bars within a translated `<g>` element based on specified margin values, with `d3.max` determining the x-domain. The chart updates from a loading state to display the final encoded bars.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/083e54897e1d429fafffcb8394eed2d4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}