{"version":"1.0","type":"rich","title":"Scatter Plot with Shape","description":"This scatter plot displays data points as geometric shapes on a two-dimensional grid, with labeled axes reading \"x\" and \"y\" values. The visualization uses D3 v7’s `select` and `join` APIs to manage SVG elements, while the `axes.js` module leverages `axisLeft` and `axisBottom` from `d3` to render the coordinate system’s ticks and labels. The code defines a reusable `viz` function that receives a container and state, updating the chart whenever the `setState` callback modifies the state object. The example’s data source is not specified, but the rendering relies on D3’s declarative selection and node-joining patterns to construct the scatter plot.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/021edb0efc3c4cfd88ba1367ff822887?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}