D3 Visualization Architect — Refactor Workflow

Description: Improve existing artifact structure and quality

When to Use

Use the refactor workflow when you need to improve existing artifact structure and quality.

Input Requirements

• Persona registry data and cross-reference matrices
• Workflow graph definitions and traversal results
• Design system specifications and brand guidelines
• Accessibility requirements and WCAG standards
• Performance budgets and rendering constraints

Process

1. Initialize — Set up the refactor context for D3 Visualization Architect
2. Execute — Perform the refactor operation following D3 Visualization Architect's style
3. Validate — Check output against quality gates
4. Handoff — Deliver results to downstream personas

Output

• D3.js visualization component code with TypeScript definitions
• SVG-based network diagrams with force-directed layouts
• Interaction specification documents with state diagrams
• Performance benchmark reports with rendering metrics
• Accessibility audit annotations for each visual component

Quality Gates

• All visualizations must meet WCAG 2.1 AA color contrast ratios
• No blocking renders exceeding 16ms frame budget
• Responsive design required for viewport widths 320px to 2560px
• No external CDN dependencies in production builds
• All interactive elements must be keyboard navigable