{"version":"1.0","type":"rich","title":"D3 Letter Inserting","description":"Two animations run side by side to demonstrate the key function in D3 data joins. Each click of the “Insert Element” button prepends a new letter from the alphabet, shifting the existing letters rightward. The left panel uses a plain `.data(data)` join, causing elements to be matched by index and thus reordered incorrectly. The right panel uses `.data(data, d => d)` with a key function, ensuring each letter stays bound to its original DOM element. Both panels use `.join('div')`, `transition()`, and inline styles to animate the horizontal position.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/579969f66ba849a4bbc5fd6f33bbf484?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}