{"version":"1.0","type":"rich","title":"Gapminder Data in React and D3 - colored world map rebuilt with interactions","description":"This interactive Gapminder visualization combines a world map with an animated scatterplot to explore country-level data from 1950 onward. Users select a y-axis attribute (income, population, life expectancy, or fertility) via a dropdown, while the map colors countries by World Bank region using a d3.scaleOrdinal. Hovering over the color legend filters both the map and scatterplot to highlight matching countries. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for the map, d3.scaleLinear for axes, and React state to manage selections, with data loaded via d3.csv and topojson.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/414f79ac0795446c84855b399ff158ee?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}