{"version":"1.0","type":"rich","title":"Refactor bar chart","description":"This example displays a horizontal bar chart of population data for the top 10 countries from a UN 2019 dataset, rendered as SVG elements within a React component. The code uses d3-scale's `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates, while `AxisBottom` and `AxisLeft` generate the tick marks and labels using D3's tick system. Bars are drawn as `rect` elements via the `Marks` component, with width proportional to each country's population. Data is fetched asynchronously using the `csv` function from D3 v6.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/0d6e8abd04624ca4abf2b1afce12a7f1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}