advanced-data-visualization

# Advanced Data Visualization Skill ## 🔴 AI FIRST Quality Principle > **Apply the AI FIRST principle: never accept first-pass quality. Minimum 2 iterations. Read all output, improve every section. No shortcuts.** ## Purpose Expert knowledge in creating interactive, accessible data visualizations using Chart.js and D3.js for complex political intelligence data. ## Core Principles 1. **Accessibility First** - WCAG 2.1 AA compliant 2. **Responsive Always** - Mobile-first design 3. **Performance Critical** - Optimize for large datasets 4. **Clarity Over Complexity** - Clear data storytelling 5. **Interactive Insight** - Enable user exploration ## Enforces - Chart.js bar/line/scatter/pie charts - D3.js network/force/geo diagrams - Interactive tooltips and legends - Responsive chart design - Screen reader compatibility - Performance optimization (lazy loading, canvas vs SVG) ## Chart Types - **Election Forecasting**: Confidence intervals, seat predictions - **Risk Heat Maps**: Multi-dimensional risk scoring - **Network Diagrams**: Influence and power structures - **Time Series**: Historical trends (50+ years) - **Scatter Plots**: Correlation and clustering - **Sankey Diagrams**: Coalition flows ## When to Use - Creating interactive dashboards - Visualizing complex datasets - Building political intelligence displays - Network/influence mapping - Time series analysis ## References - [Chart.js Documentation](https://www.chartjs.org/) - [D3.js Gallery](https://observablehq.com/@d3/gallery) - [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/) --- **Version**: 1.0 | **Last Updated**: 2026-02-06 | **Category**: UI/UX & Design