{"version":"1.0","type":"rich","title":"Margin Convention with React & D3","description":"This example loads United Nations population data from a CSV file and renders it as a horizontal bar chart using React and D3. The visualization displays the top ten countries by 2020 population, with bar widths proportional to population values and y-axis positions determined by country names. The React component manages the data fetching and state, while D3 utilities handle CSV parsing, linear scaling for the x-axis, and band scaling for categorical y-axis placement. The SVG output respects a margin convention around the plot area.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/e35f14d3559e45ac812c74d9bd1fade1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}