{"version":"1.0","type":"rich","title":"refactor bar chart","description":"This example shows a horizontal bar chart of the 2020 population estimates for the top 10 countries, using D3.js scales and React components to render the visualization. D3 functions like `scaleBand`, `scaleLinear`, and `max` compute the chart’s layout, while the React code splits the rendering into reusable components for the axes and bars. The `Marks` component draws the rectangles, and the `AxisBottom` and `AxisLeft` components generate the tick labels using D3’s `ticks()` and `domain()` methods. The chart renders as an SVG, and the data is loaded from a remote CSV file using D3’s `csv` parser.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/df8bce74c23848d08d5954229c27dbbd?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}