{"version":"1.0","type":"rich","title":"Learn Reusable Scatter plot","description":"This example demonstrates a reusable scatter plot component built with React and D3.js, visualizing the classic Iris dataset. The plot maps petal length to the x-axis and sepal length to the y-axis, with each flower represented as a circle. The reusable component, created via a custom `scatterPlot` function, encapsulates axis rendering and point positioning, configured through a fluent API for dimensions, margins, and data accessors. The SVG output uses D3’s scale functions and axis helpers, with styling applied via CSS.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/a475bfa12dc848a68b6f3dd8141aa721?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}