{"version":"1.0","type":"rich","title":"Refactoring initial Gapminder Population Growth in React and D3","description":"This example visualizes Gapminder population growth data, plotting total population against year for each country as circles with tooltips showing country names. Built with React and D3 v5, it uses `scaleLinear` for both axes, `scaleOrdinal` for color encoding, and `format` to abbreviate population labels. The SVG rendering includes custom `AxisBottom` and `AxisLeft` components that generate ticks, while `Marks` generates circles with D3’s `interpolateRainbow` color scheme. The data is loaded asynchronously from a CSV via `useData` and D3’s `csv` parser.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/3c39d4f83fc74cce906e053cd5259023?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}