{"version":"1.0","type":"rich","title":"The Margin Convention with React & D3","description":"This example demonstrates the margin convention in a React-based bar chart, showing the top ten countries by 2020 population. The visualization uses D3's `scaleBand` and `scaleLinear` to map country names and population values, respectively, while React handles rendering of SVG rectangles. Data is loaded asynchronously from a CSV file using D3's `csv` utility, and a margin object creates inner dimensions for the chart’s plotting area, with all bars grouped inside a translated `<g>` element.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/0c1d078949c34bb0b528cf986067d708?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}