{"version":"1.0","type":"rich","title":"Rendering Data with React & D3 - Refactored barchart Axis","description":"This example shows a horizontal bar chart of the top 10 countries by population in 2020, with axes and bars rendered as SVG elements. React manages the component structure, while D3.js provides the `scaleBand` and `scaleLinear` functions for positioning the bars and tick marks. The axes are separated into reusable components—`AxisBottom` and `AxisLeft`—that generate SVG lines and text elements using D3's scale ticks and domain. Data is loaded from a CSV file via D3's `csv()` function within a custom `useData` React hook.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/10edfbf1d49d42309eda35b7833da36b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}