{"version":"1.0","type":"rich","title":"Rendering Data with React & D3","description":"This example shows a horizontal bar chart of the top 10 countries by projected 2020 population, rendered as SVG. It demonstrates how React state manages the loaded data while D3 utilities compute the scales and ticks. The code uses `d3.csv` to fetch the UN Population 2019 dataset, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis. React's `useState` and `useEffect` hooks handle the asynchronous data loading and trigger the declarative rendering of bars, axis lines, and labels.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d75c912f4e3d40ffaa928b4c320607fc?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}