D3.selectAll(...).transition() Explained
This visualization explains D3 transitions by animating seven circles, each representing an independently scheduled transition. Using D3 v3, it demonstrates how `selectAll(...).transition()` creates multiple, independent transitions, and how `delay()`, `duration()`, and named transitions manage their lifecycle. The example visualizes each transition’s schedule with graphical “head,” “body,” and “tail” markers, along with labeled start and end times, and includes controls to play or rewind stages, showing how transitions can be interrupted and overridden.