{"version":"1.0","type":"rich","title":"Scatter Plot with React & D3","description":"This example shows a scatter plot of the classic Iris dataset, displaying sepal length on the x-axis and sepal width on the y-axis for 150 individual flowers. The visualization is built using React's `useRef` and `useEffect` hooks to manage the SVG element and coordinate the loading of CSV data via D3's `csv` function, after which the `viz` function from `viz.js` renders the chart. The rendering relies on D3 v7 utilities including `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to compute scales and draw axes, while D3's `select` and `.join` operations efficiently append the circles, axis labels, and axis groups to the SVG.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b44f1c3e8a1643de80de2ea360d142ae?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}