best-practices-d3
Installation
SKILL.md
D3 Best Practices
Production rules for performant, responsive, accessible D3.js visualizations. D3 is a low-level visualization toolkit, not a charting library — these rules enforce the patterns that make D3 code maintainable and fast.
Rule Categories
| Category | Focus | Modern Requirement |
|---|---|---|
rendering |
DOM ownership | Framework-declarative (React/Svelte) for DOM, D3 for math. |
data-join |
Enter/update/exit | Keyed joins are mandatory. Use .join() for concise lifecycle. |
layout |
Responsive SVG | ResizeObserver + viewBox. No hardcoded pixel dimensions. |
interaction |
Pointer events | d3.pointer for unified touch/mouse. Voronoi for precision. |
performance |
Layering | Canvas/Hybrid rendering for >1000 nodes. |
accessibility |
A11y | ARIA roles + Hidden data table + Reduced Motion support. |
architecture |
Documentation | Folder-level DESIGN.md for visual encoding logic. |