# Visualizing Data

Builds dashboards, reports, and data-driven interfaces requiring charts, graphs, or...

- Repository: https://github.com/ancoleman/ai-design-components (526 stars)
- Category: Design
- License: MIT
- Last updated: 2025-12-11
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add ancoleman/ai-design-components --skill visualizing-data -g -a claude-code -y`
Codex: `npx skills add ancoleman/ai-design-components --skill visualizing-data -g -a codex -y`
Cursor: `npx skills add ancoleman/ai-design-components --skill visualizing-data -g -a cursor -y`
Gemini CLI: `npx skills add ancoleman/ai-design-components --skill visualizing-data -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ancoleman/ai-design-components`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as 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:**

The rest: https://github.com/ancoleman/ai-design-components/blob/HEAD/skills/visualizing-data/SKILL.md