skills/d3-data-visualization/references/d3-interaction-and-annotation.md

# D3 Interaction and Annotation

## What Problem This Solves

This reference helps pair custom interaction with readable explanation.

## When to Use It

Use this when the chart needs brushing, zooming, panning, drag interactions, or annotation-rich explanatory behavior.

## Key Takeaways

- Interaction should preserve orientation, provide reset paths, and reveal more rather than conceal basics.
- Annotation belongs in the architecture from the start, not as final decoration.
- SVG is especially useful when labels, callouts, and export quality matter.

## Common Mistakes

- Building sophisticated zoom behavior without obvious orientation cues.
- Using hover as the only way to reveal essential values or labels.

## Adjacent Skills

- `../SKILL.md`
- `../../accessibility-and-inclusive-visualization/SKILL.md`

## Source Links

- [D3 API](https://d3js.org/api)