Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or visual analytics. Provides systematic framework for selecting appropriate visualizations based on data characteristics and analytical purpose. Includes 24+ visualization types organized by purpose (trends, comparisons, distributions, relationships, flows, hierarchies, geospatial), accessibility patterns (WCAG 2.1 AA compliance), colorblind-safe palettes, and performance optimization strategies. Use when creating visualizations, choosing chart types, displaying data graphically, or designing data interfaces.
View on GitHubskills/visualizing-data/SKILL.md
February 1, 2026
Select agents to install to:
npx add-skill https://github.com/ancoleman/ai-design-components/blob/main/skills/visualizing-data/SKILL.md -a claude-code --skill visualizing-dataInstallation paths:
.claude/skills/visualizing-data/# Data Visualization Component Library Systematic guidance for selecting and implementing effective data visualizations, matching data characteristics with appropriate visualization types, ensuring clarity, accessibility, and impact. ## Overview Data visualization transforms raw data into visual representations that reveal patterns, trends, and insights. This skill provides: 1. **Selection Framework**: Systematic decision trees from data type + purpose → chart type 2. **24+ Visualization Methods**: Organized by analytical purpose 3. **Accessibility Patterns**: WCAG 2.1 AA compliance, colorblind-safe palettes 4. **Performance Strategies**: Optimize for dataset size (<1000 to >100K points) 5. **Multi-Language Support**: JavaScript/TypeScript (primary), Python, Rust, Go --- ## Quick Start Workflow ### Step 1: Assess Data ``` What type? [categorical | continuous | temporal | spatial | hierarchical] How many dimensions? [1D | 2D | multivariate] How many points? [<100 | 100-1K | 1K-10K | >10K] ``` ### Step 2: Determine Purpose ``` What story to tell? [comparison | trend | distribution | relationship | composition | flow | hierarchy | geographic] ``` ### Step 3: Select Chart Type **Quick Selection:** - Compare 5-10 categories → Bar Chart - Show sales over 12 months → Line Chart - Display distribution of ages → Histogram or Violin Plot - Explore correlation → Scatter Plot - Show budget breakdown → Treemap or Stacked Bar **Complete decision trees:** See `references/selection-matrix.md` ### Step 4: Implement See language sections below for recommended libraries. ### Step 5: Apply Accessibility - Add text alternative (aria-label) - Ensure 3:1 color contrast minimum - Use colorblind-safe palette - Provide data table alternative ### Step 6: Optimize Performance - <1000 points: Standard SVG rendering - >1000 points: Sampling or Canvas rendering - Very large: Server-side aggregation --- ## Purpose-First Selection **Match analytical purpose to chart type:** | Pur