{"version":"1.0","type":"rich","title":"how enter-update-exit works","description":"Rectangles in an SVG scene enter, update, and exit as the data array randomly changes size every second. The example demonstrates D3 v4’s data join with a key function, using `d3.selectAll(\"rect\").data(data, d => d)` and `d3.transition()` to animate positions and fill-opacity. Entering rectangles drop from y=60 to y=0 in green, updating ones stay red, and exiting ones fall back to y=60 in brown before removal. A linear `d3.scaleLinear` maps values 1–10 to pixel positions along the x-axis.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-992cc42c3a996629430cb3e1c9269155?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}