{"version":"1.0","type":"rich","title":"Axes with React and D3","description":"This example shows a horizontal bar chart of the top ten countries by 2020 population, using D3 scales to map data to SVG positions and React to render the elements. It loads CSV data via `d3.csv`, then uses `d3.scaleBand` for country categories and `d3.scaleLinear` for population values. The chart displays axes with tick marks and labels generated from `xScale.ticks()`, and bars are drawn as SVG `rect` elements. D3’s `max` utility computes the domain, while React’s `useState` and `useEffect` manage the asynchronous data loading.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/1a21785c2aef4153865aef1273ead8e4?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}