D3.js Animated Transitions Guide

Implement animated transitions in D3.js visualizations:

Visualization Context:
- Chart type: [specify]
- Data update scenario: [filter/sort/new data/resize]
- Current implementation: [describe or paste code]

Transition Types Needed:

1. Enter Transitions
   - New elements appearance
   - Initial position: [from where]
   - Final position: [to where]
   - Properties to animate: [opacity, scale, position]

2. Update Transitions
   - Existing elements changing
   - Property changes: [list what changes]
   - Maintaining object constancy

3. Exit Transitions
   - Elements being removed
   - Removal animation: [fade, shrink, move out]
   - When to remove from DOM

Transition Configuration:
- Duration: [milliseconds]
- Easing: [d3.easeLinear/easeCubic/easeElastic/custom]
- Delay: [staggered delays if needed]
- Interruption handling

Animation Sequences:
- Chained animations: [sequential steps]
- Synchronized animations: [parallel updates]
- Orchestration: [how different elements coordinate]

Data Key Function:
- How to identify elements across updates
- Key function implementation
- Handling of ID changes

Performance Considerations:
- Element count: [approximate]
- Frame rate target
- CSS vs D3 transitions
- Will-change optimization

Provide complete implementation with:
- Before/after state code
- Transition choreography
- Easing function selection rationale
- Interrupt handling