{"version":"1.0","type":"rich","title":"axes with react d3","description":"This example displays a horizontal bar chart of the top 10 countries by 2020 population, using React to render SVG elements and D3.js for data processing and scales. It fetches UN population data from a CSV file via `d3.csv`, then applies `scaleBand` for the y-axis and `scaleLinear` for the x-axis to position bars and grid lines. Axis ticks are generated with `xScale.ticks()` and placed using SVG `<line>` and `<text>` elements, while country labels appear on the left. The chart updates asynchronously, showing a loading message until the data arrives.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/c74bbd92fbc7438ca9e2e0644bd154d7?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}