Data Visualization Component Library

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:

Visualization Catalog

Tier 1: Fundamental Primitives

General audiences, straightforward data stories:

• Bar Chart: Compare categories
• Line Chart: Show trends over time
• Scatter Plot: Explore relationships
• Pie Chart: Part-to-whole (max 5-6 slices)
• Area Chart: Emphasize magnitude over time

Tier 2: Purpose-Driven

Specific analytical insights:

• Comparison: Grouped Bar, Lollipop, Bullet Chart
• Trend: Stream Graph, Slope Graph, Sparklines
• Distribution: Violin Plot, Box Plot, Histogram
• Relationship: Bubble Chart, Hexbin Plot
• Composition: Treemap, Sunburst, Waterfall
• Flow: Sankey Diagram, Chord Diagram

Tier 3: Advanced

Complex data, sophisticated audiences:

• Multi-dimensional: Parallel Coordinates, Radar Chart, Small Multiples
• Temporal: Gantt Chart, Calendar Heatmap, Candlestick
• Network: Force-Directed Graph, Adjacency Matrix

Detailed descriptions: See references/chart-catalog.md

Accessibility Requirements (WCAG 2.1 AA)

Text Alternatives

<figure role="img" aria-label="Sales increased 15% from Q3 to Q4">
  <svg>...</svg>
</figure>

Color Requirements

• Non-text UI elements: 3:1 minimum contrast
• Text: 4.5:1 minimum (or 3:1 for large text ≥24px)
• Don't rely on color alone - use patterns/textures + labels

Colorblind-Safe Palettes

IBM Palette (Recommended):

#648FFF (Blue), #785EF0 (Purple), #DC267F (Magenta),
#FE6100 (Orange), #FFB000 (Yellow)

Avoid: Red/Green combinations (8% of males have red-green colorblindness)

Keyboard Navigation

• Tab through interactive elements
• Enter/Space to activate tooltips
• Arrow keys to navigate data points

Complete accessibility guide: See references/accessibility.md

Performance by Data Volume

JavaScript/TypeScript Implementation

Recharts (Business Dashboards)

Composable React components, declarative API, responsive by default.

npm install recharts

import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

const data = [
  { month: 'Jan', sales: 4000 },
  { month: 'Feb', sales: 3000 },
  { month: 'Mar', sales: 5000 },
];

export function SalesChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="sales" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

D3.js (Custom Visualizations)

Maximum flexibility, industry standard, unlimited chart types.

npm install d3

Plotly (Scientific/Interactive)

3D visualizations, statistical charts, interactive out-of-box.

npm install react-plotly.js plotly.js

Detailed examples: See references/javascript/

Python Implementation

Common Libraries:

• Plotly - Interactive charts (same API as JavaScript)
• Matplotlib - Publication-quality static plots
• Seaborn - Statistical visualizations
• Altair - Declarative visualization grammar

When building Python implementations:

1. Follow universal patterns above
2. Use RESEARCH_GUIDE.md to research libraries
3. Add to references/python/

Integration with Design Tokens

Reference the design-tokens skill for theming:

--chart-color-primary
--chart-color-1 through --chart-color-10
--chart-axis-color
--chart-grid-color
--chart-tooltip-bg

<Line stroke="var(--chart-color-primary)" />

Light/dark/high-contrast themes work automatically via design tokens.

Common Mistakes to Avoid

1. Chart-first thinking - Choose based on data + purpose, not aesthetics
2. Pie charts for >6 categories - Use sorted bar chart instead
3. Dual-axis charts - Usually misleading, use small multiples
4. 3D when 2D sufficient - Adds complexity, reduces clarity
5. Rainbow color scales - Not perceptually uniform, not colorblind-safe
6. Truncated y-axis - Indicate clearly or start at zero
7. Too many colors - Limit to 6-8 distinct categories
8. Missing context - Always label axes, include units

Quick Decision Tree

START: What is your data?

Categorical (categories/groups)
  ├─ Compare values → Bar Chart
  ├─ Show composition → Treemap or Pie Chart (<6 slices)
  └─ Show flow → Sankey Diagram

Continuous (numbers)
  ├─ Single variable → Histogram, Violin Plot
  └─ Two variables → Scatter Plot

Temporal (time series)
  ├─ Single metric → Line Chart
  ├─ Multiple metrics → Small Multiples
  └─ Daily patterns → Calendar Heatmap

Hierarchical (nested)
  ├─ Proportions → Treemap
  └─ Show depth → Sunburst, Dendrogram

Geographic (locations)
  ├─ Regional aggregates → Choropleth Map
  └─ Point locations → Symbol Map

References

Selection Guides:

• references/chart-catalog.md - All 24+ visualization types
• references/selection-matrix.md - Complete decision trees

Technical Guides:

• references/accessibility.md - WCAG 2.1 AA patterns
• references/color-systems.md - Colorblind-safe palettes
• references/performance.md - Optimization by data volume

Language-Specific:

• references/javascript/ - React, D3.js, Plotly examples
• references/python/ - Plotly, Matplotlib, Seaborn

Assets:

• assets/color-palettes/ - Accessible color schemes
• assets/example-datasets/ - Sample data for testing

Examples

Working code examples:

• examples/javascript/bar-chart.tsx
• examples/javascript/line-chart.tsx
• examples/javascript/scatter-plot.tsx
• examples/javascript/accessible-chart.tsx

cd examples/javascript && npm install && npm start

Validation

# Validate accessibility
scripts/validate_accessibility.py <chart-html>

# Test colorblind
# Use browser DevTools color vision deficiency emulator

Progressive disclosure: This SKILL.md provides overview and quick start. Detailed documentation, code examples, and language-specific implementations in references/ and examples/ directories.