{"version":"1.0","type":"rich","title":"The Margin Convention","description":"This example visualizes a horizontal bar chart of population estimates for the top 10 countries, ordered by their 2020 population data from the United Nations. The chart uses a margin convention to properly size the plotting area, with rect elements positioned by d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. The visualization is built with React (using hooks for state and effects) and renders to SVG, with data loaded asynchronously via d3.csv.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/f7f2b74b338b4be0893a1e0c9adba0a6?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}