{"version":"1.0","type":"rich","title":"Margins and Axes","description":"This example presents a horizontal bar chart of 2019 UN population data for the top ten countries, emphasizing the layout margins that separate the plotting area from the axes. The chart uses D3’s `scaleBand` and `scaleLinear` to map country names and population counts into a fixed `svg` coordinate system, with explicit `margin` constants controlling the left, right, top, and bottom spacing. React manages the component state, while the data is loaded via D3’s `csv` helper. The code renders tick marks and labels for the x-axis using `xScale.ticks()` and custom `<g>` elements, with the y-axis labels positioned manually using `yScale.bandwidth()`.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/db091a7b865c454ca5268eed97e6851b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}