Visualizing Data
Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or...
Install
npx skills add ancoleman/ai-design-components --skill visualizing-data -g -a claude-code -y- Repository
- ancoleman/ai-design-components526
- Category
- Design
- Updated
- 11mo ago
- License
- MIT
- Context cost
- Mediumabout 2,236 tokens
- Runs scripts
- Yes, review before use
What it does
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.
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:
- Selection Framework: Systematic decision trees from data type + purpose → chart type
- 24+ Visualization Methods: Organized by analytical purpose
- Accessibility Patterns: WCAG 2.1 AA compliance, colorblind-safe palettes
- Performance Strategies: Optimize for dataset size (<1000 to >100K points)
- 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:
