{"version":"1.0","type":"rich","title":"Refactor Bar Chart","description":"This example presents a horizontal bar chart from United Nations population data for ten countries, showing each country's 2020 population as a bar whose length is proportional to the value. Built with React components, it demonstrates a refactored approach to composing SVG visualizations using D3’s `scaleBand` and `scaleLinear` for positioning and scaling. The chart reads a CSV file via D3’s `csv` utility, and separate React components (`AxisBottom`, `AxisLeft`, and `Marks`) render the axes and bars, with React state managing the loaded data.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a549612735e948689659b244084e4d70?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}