{"version":"1.0","type":"rich","title":"axis with react and D3","description":"This example shows a horizontal bar chart of population estimates for the top 10 countries, rendered as SVG via React. It uses D3’s `csv` loader to fetch data from a UN population CSV and stores it in React state. The chart draws axes manually with `scaleBand` and `scaleLinear`, maps ticks to grid lines and labels, and renders bars with `rect` elements. The code demonstrates a hybrid approach where React manages the DOM while D3 provides scales, data parsing, and tick generation.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/998da08220b6416b970c4826945a395c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}