{"version":"1.0","type":"rich","title":"Making a Bar Chart with React & D3","description":"This example demonstrates how to build a bar chart by combining React's component model with D3's scaling and data processing utilities. The chart displays the top 10 most populous countries for 2020, sourced from a CSV file of UN population data, with each bar's height determined by the country's population value. The code uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and React's `useState` and `useEffect` hooks to asynchronously load and process the data. The visualization is rendered as an SVG with simple `rect` elements.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/3568093fdfe44da8ad76dba21d9fb6c1?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}