{"version":"1.0","type":"rich","title":"Data join and Transition","description":"This example demonstrates the data join pattern with animated transitions in D3 v5, showing how circles representing fruit enter, update, and exit. Starting with five apples, the visualization removes a fruit after one second, changes the third fruit's type to lemon at two seconds, and filters out another item at three seconds. Each change triggers a smooth 1-second transition where new circles grow from radius zero, existing circles adjust their color, size, and position, and removed circles shrink away. The code uses `selection.data()`, `selection.enter()`, `selection.merge()`, and `selection.exit()` with `transition().duration()` for the animations, along with `scaleOrdinal` for color and radius mapping.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/b7d82528d88f4b7fa6b6bf749ebef46a?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}