SKILL: D3 Visualization & Diagram Design

Use when

• Implementing interactive visualizations using D3 (SVG/Canvas) in the Angular UI.
• You need to choose a diagram type and map it to a D3 layout/module.

Workflow

1. Clarify purpose: compare / rank / part-to-whole / flow / hierarchy / network / geo / schedule.
2. Choose the simplest representation that answers the question (avoid novelty charts).
3. Define a chart view model (VM) at the Application boundary; UI receives it as Signals.
4. Pick render tech:
   • SVG for readability + a11y (small/medium)
   • Canvas/hybrid for density/perf (large)
5. Add interaction only if it reduces cognitive load (zoom/pan/hover/select/filter).
6. Build in a11y: text summary + keyboard navigation + reduced motion.