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.