{"version":"1.0","type":"rich","title":"Margin Convention","description":"This example displays a horizontal bar chart that contrasts the populations of ten countries. The bar lengths are proportional to each country’s 2020 population, with country names listed along the vertical axis. The code uses React’s `useState` and `useEffect` to asynchronously fetch CSV data from a remote URL, then leverages D3 utilities like `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The SVG rendering applies a margin convention, translating a group element by the top and left margin values to position the chart within the 960x500 canvas.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a5260fe18f87422ab00b095560425b2d?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}