{"version":"1.0","type":"rich","title":"D3.js - join() with enter, update, and exit","description":"This example demonstrates D3.js’s `join()` method by binding an array of numbers to SVG circles, with buttons to prepend, append, or drop data items. Entering circles animate their radius from zero and color to hotpink via `transition.attr`, while updated circles shift horizontally and exiting circles shrink to zero before removal. The code uses a key function `(d) => d` for datum identity, `d3.selectAll`, `.data()`, and `.join()` with separate enter, update, and exit handling. Rendering uses SVG and transitions with 500-millisecond durations.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/803e93c8077e4765a07d5242abaac49c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}