{"version":"1.0","type":"rich","title":"Refactored Bar Chart","description":"This example presents a horizontally oriented bar chart displaying the top 10 countries by population for 2020, as loaded from a CSV file of UN population data using D3’s `csv` function. React state manages the fetched data via a custom `useData` hook, and the chart is rendered as SVG with components for the axes and marks. The y-axis uses a D3 `scaleBand` for categorical country labels, while the x-axis uses a `scaleLinear` for population values. The `AxisBottom`, `AxisLeft`, and `Marks` components are built with React, passing scales and data as props, with tick and bar geometry computed using D3 utilities.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/47e295e8755145498944f197657c7121?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}