{"version":"1.0","type":"rich","title":"Idempotent Rendering Pattern","description":"This example demonstrates the idempotent rendering pattern for D3 visualizations, showing a scatter plot of penguin bill length versus bill depth using a clean, green background. The chart renders circles for each data point and includes labeled axes via a reusable `axes` module. The code applies the join pattern with `selection.selectAll(...).data([null]).join(...)` for both SVG elements and axes, ensuring that updates are deterministic and render correctly on each call. It uses `scaleLinear` and `extent` to compute scales, with margins and dimensions passed through a shared state object.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/60bdecfe0259422aa80d20819e9b8e60?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}