{"version":"1.0","type":"rich","title":"The Margin Convention - Continuation of Making a Bar Chart with React & D3","description":"This example demonstrates the margin convention for a horizontal bar chart, displaying the top 10 most populous countries from a 2019 UN population dataset. The visualization uses React components to manage state and render SVG elements, while d3.scaleBand and d3.scaleLinear map country names to bar positions and population values to bar widths. The code leverages d3.csv for data loading, applies a consistent margin around the plotting area, and assigns random, non-repeating colors to each bar through a custom selectColor utility.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/353bc9329721490fab4110e77fda64a1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}