{"version":"1.0","type":"rich","title":"Fade Out Fade In 2","description":"Two groups of circles swap places on a D3.js SVG stage: two blue circles fade out and are removed, then four red circles fade in. The example demonstrates a common sequencing pitfall—the new data join executes before the old elements’ removal transition completes, causing selection conflicts. It uses d3.selectAll, data joins, .enter(), and transition().remove() in D3 v7, with fill-opacity transitions timed via .delay() to coordinate the fade-out and fade-in phases.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d07739010961443c897ac59c8d90d605?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}