{"version":"1.0","type":"rich","title":"Gapminder Data in React and D3 - rotated menu","description":"This example displays Hans Rosling's Gapminder dataset as an animated scatterplot in SVG, plotting annual data from 1950 with country points colored teal. A rotated dropdown menu lets users select which attribute appears on the y-axis, including income per capita, total population, life expectancy, or fertility rate, while the x-axis represents years. Using React's `useState` hook and D3's `scaleLinear`, `extent`, and `csv` data loading, the visualization renders axes and marks via custom SVG components. The React dropdown library provides the interactive control, and the code filters out rows with zero values.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/bfb802ca36e242329ae43ec4df38c482?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}