{"version":"1.0","type":"rich","title":"[Ep.10] Reusable d3 Scatter Plot (idempotent version)","description":"This example shows a reusable D3.js scatter plot built with React, visualizing the classic Iris dataset. The plot animates through different feature pairs (petal width, sepal width, petal length, sepal length) on the x-axis, updating every two seconds. It uses d3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to create the axes and render SVG circles. The chart is idempotent, meaning it can be re-invoked with new data or configurations without duplicating elements, thanks to D3's `join` method.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/12b2efa8b1ab4373b523d6f3f90c9292?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}