{"version":"1.0","type":"rich","title":"Axis With React and D3","description":"This example shows a horizontal bar chart of the top 10 countries by population from the UN Population 2019 dataset. It uses React hooks like `useState` and `useEffect` to load and store the data, while d3’s `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle data parsing and scaling. React renders the SVG elements—including gridlines, ticks, and rectangles—by iterating over the scales, resulting in a fully React-managed visualization. The axis ticks are generated from the linear scale’s `ticks` method.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c36f10a6adb244049c3c8739f0b6dcdf?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}