{"version":"1.0","type":"rich","title":"Rendering Data with React & D3 - barchart Margin","description":"This example shows a horizontal bar chart of UN population data for 10 countries in 2020, rendered as an SVG. The React component loads the CSV with `d3.csv`, then uses `scaleBand` for the country categories and `scaleLinear` for population values. Margins are applied by translating a `<g>` element with the `d3` coordinate system, and each bar is a `<rect>` whose width reflects the population. React state manages the data loading lifecycle with `useState` and `useEffect`.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/9c5f1e019138457785c5b91990df68e7?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}