Visualizing Data

{
  "default10": {
    "name": "Default 10-Color Categorical",
    "description": "Extended categorical palette for up to 10 categories",
    "type": "categorical",
    "colors": [
      { "hex": "#3B82F6", "name": "Blue" },
      { "hex": "#10B981", "name": "Green" },
      { "hex": "#F59E0B", "name": "Orange" },
      { "hex": "#8B5CF6", "name": "Purple" },
      { "hex": "#EF4444", "name": "Red" },
      { "hex": "#14B8A6", "name": "Teal" },
      { "hex": "#F97316", "name": "Deep Orange" },
      { "hex": "#6366F1", "name": "Indigo" },
      { "hex": "#EC4899", "name": "Pink" },
      { "hex": "#84CC16", "name": "Lime" }
    ],
    "maxCategories": 10
  },
  "tableau10": {
    "name": "Tableau 10",
    "description": "Tableau's default 10-color palette, widely recognized",
    "type": "categorical",
    "colors": [
      { "hex": "#4E79A7", "name": "Blue" },
      { "hex": "#F28E2B", "name": "Orange" },
      { "hex": "#E15759", "name": "Red" },
      { "hex": "#76B7B2", "name": "Cyan" },
      { "hex": "#59A14F", "name": "Green" },
      { "hex": "#EDC948", "name": "Yellow" },
      { "hex": "#B07AA1", "name": "Purple" },
      { "hex": "#FF9DA7", "name": "Pink" },
      { "hex": "#9C755F", "name": "Brown" },
      { "hex": "#BAB0AC", "name": "Gray" }
    ],
    "maxCategories": 10,
    "source": "Tableau Software"
  },
  "d3Category10": {
    "name": "D3 Category10",
    "description": "D3.js default categorical colors",
    "type": "categorical",
    "colors": [
      { "hex": "#1F77B4", "name": "Blue" },
      { "hex": "#FF7F0E", "name": "Orange" },
      { "hex": "#2CA02C", "name": "Green" },
      { "hex": "#D62728", "name": "Red" },
      { "hex": "#9467BD", "name": "Purple" },
      { "hex": "#8C564B", "name": "Brown" },
      { "hex": "#E377C2", "name": "Pink" },
      { "hex": "#7F7F7F", "name": "Gray" },
      { "hex": "#BCBD22", "name": "Olive" },
      { "hex": "#17BECF", "name": "Cyan" }
    ],
    "maxCategories": 10,
    "source": "D3.js"
  }
}

{
  "ibm": {
    "name": "IBM Design Colorblind-Safe Palette",
    "description": "Perceptually distinct colors safe for all types of colorblindness",
    "colors": [
      { "hex": "#648FFF", "name": "Blue" },
      { "hex": "#785EF0", "name": "Purple" },
      { "hex": "#DC267F", "name": "Magenta" },
      { "hex": "#FE6100", "name": "Orange" },
      { "hex": "#FFB000", "name": "Yellow" }
    ],
    "safeFor": ["deuteranopia", "protanopia", "tritanopia"]
  },
  "paulTol": {
    "name": "Paul Tol's Qualitative Palette",
    "description": "Designed for scientific publications with colorblind readers",
    "colors": [
      { "hex": "#4477AA", "name": "Blue" },
      { "hex": "#EE6677", "name": "Red" },
      { "hex": "#228833", "name": "Green" },
      { "hex": "#CCBB44", "name": "Yellow" },
      { "hex": "#66CCEE", "name": "Cyan" },
      { "hex": "#AA3377", "name": "Purple" },
      { "hex": "#BBBBBB", "name": "Grey" }
    ],
    "safeFor": ["all types"]
  },
  "wong": {
    "name": "Wong Palette (Nature Methods)",
    "description": "8-color palette from Bang Wong's 'Points of View' column",
    "colors": [
      { "hex": "#000000", "name": "Black" },
      { "hex": "#E69F00", "name": "Orange" },
      { "hex": "#56B4E9", "name": "Sky Blue" },
      { "hex": "#009E73", "name": "Bluish Green" },
      { "hex": "#F0E442", "name": "Yellow" },
      { "hex": "#0072B2", "name": "Blue" },
      { "hex": "#D55E00", "name": "Vermillion" },
      { "hex": "#CC79A7", "name": "Reddish Purple" }
    ],
    "safeFor": ["deuteranopia", "protanopia"]
  },
  "tol_bright": {
    "name": "Paul Tol's Bright Palette",
    "description": "High-contrast colors for data with dark backgrounds",
    "colors": [
      { "hex": "#4477AA", "name": "Blue" },
      { "hex": "#66CCEE", "name": "Cyan" },
      { "hex": "#228833", "name": "Green" },
      { "hex": "#CCBB44", "name": "Yellow" },
      { "hex": "#EE6677", "name": "Red" },
      { "hex": "#AA3377", "name": "Purple" },
      { "hex": "#BBBBBB", "name": "Grey" }
    ],
    "safeFor": ["all types"]
  }
}

{
  "redBlue": {
    "name": "Red-Blue Diverging (11-step)",
    "description": "Diverging scale for positive/negative data. Red (negative) through white (neutral) to blue (positive).",
    "type": "diverging",
    "midpoint": { "hex": "#F3F4F6", "name": "Neutral Gray" },
    "negative": [
      { "value": -5, "hex": "#B91C1C", "name": "Red 700" },
      { "value": -4, "hex": "#DC2626", "name": "Red 600" },
      { "value": -3, "hex": "#EF4444", "name": "Red 500" },
      { "value": -2, "hex": "#FCA5A5", "name": "Red 300" },
      { "value": -1, "hex": "#FEE2E2", "name": "Red 100" }
    ],
    "positive": [
      { "value": 1, "hex": "#DBEAFE", "name": "Blue 100" },
      { "value": 2, "hex": "#93C5FD", "name": "Blue 300" },
      { "value": 3, "hex": "#3B82F6", "name": "Blue 500" },
      { "value": 4, "hex": "#2563EB", "name": "Blue 600" },
      { "value": 5, "hex": "#1D4ED8", "name": "Blue 700" }
    ],
    "useFor": ["profit/loss", "temperature anomalies", "variance from target"]
  },
  "orangeBlue": {
    "name": "Orange-Blue Diverging (Colorblind-Safe)",
    "description": "Safer alternative to red-green for colorblind users",
    "type": "diverging",
    "midpoint": { "hex": "#F5F5F5", "name": "Light Gray" },
    "negative": [
      { "value": -3, "hex": "#E65100", "name": "Deep Orange" },
      { "value": -2, "hex": "#FB8C00", "name": "Orange" },
      { "value": -1, "hex": "#FFB74D", "name": "Light Orange" }
    ],
    "positive": [
      { "value": 1, "hex": "#64B5F6", "name": "Light Blue" },
      { "value": 2, "hex": "#1976D2", "name": "Blue" },
      { "value": 3, "hex": "#0D47A1", "name": "Deep Blue" }
    ],
    "useFor": ["colorblind-safe diverging", "positive/negative sentiment"],
    "colorblindSafe": true
  },
  "purpleGreen": {
    "name": "Purple-Green Diverging",
    "description": "Alternative diverging scale",
    "type": "diverging",
    "midpoint": { "hex": "#FFFFFF", "name": "White" },
    "negative": [
      { "value": -3, "hex": "#7B1FA2", "name": "Purple" },
      { "value": -2, "hex": "#AB47BC", "name": "Medium Purple" },
      { "value": -1, "hex": "#CE93D8", "name": "Light Purple" }
    ],
    "positive": [
      { "value": 1, "hex": "#81C784", "name": "Light Green" },
      { "value": 2, "hex": "#388E3C", "name": "Green" },
      { "value": 3, "hex": "#1B5E20", "name": "Dark Green" }
    ],
    "useFor": ["alternative diverging", "correlation matrices"]
  }
}

{
  "blues": {
    "name": "Sequential Blues (9-step)",
    "description": "Single-hue progression from light to dark blue. Use for heatmaps, choropleths.",
    "type": "sequential",
    "colors": [
      { "value": 1, "hex": "#EFF6FF", "name": "Blue 50" },
      { "value": 2, "hex": "#DBEAFE", "name": "Blue 100" },
      { "value": 3, "hex": "#BFDBFE", "name": "Blue 200" },
      { "value": 4, "hex": "#93C5FD", "name": "Blue 300" },
      { "value": 5, "hex": "#60A5FA", "name": "Blue 400" },
      { "value": 6, "hex": "#3B82F6", "name": "Blue 500" },
      { "value": 7, "hex": "#2563EB", "name": "Blue 600" },
      { "value": 8, "hex": "#1D4ED8", "name": "Blue 700" },
      { "value": 9, "hex": "#1E3A8A", "name": "Blue 900" }
    ],
    "useFor": ["heatmaps", "choropleths", "intensity maps"]
  },
  "greens": {
    "name": "Sequential Greens (9-step)",
    "description": "Light to dark green progression",
    "type": "sequential",
    "colors": [
      { "value": 1, "hex": "#F0FDF4", "name": "Green 50" },
      { "value": 2, "hex": "#DCFCE7", "name": "Green 100" },
      { "value": 3, "hex": "#BBF7D0", "name": "Green 200" },
      { "value": 4, "hex": "#86EFAC", "name": "Green 300" },
      { "value": 5, "hex": "#4ADE80", "name": "Green 400" },
      { "value": 6, "hex": "#22C55E", "name": "Green 500" },
      { "value": 7, "hex": "#16A34A", "name": "Green 600" },
      { "value": 8, "hex": "#15803D", "name": "Green 700" },
      { "value": 9, "hex": "#14532D", "name": "Green 900" }
    ],
    "useFor": ["positive metrics", "growth indicators", "success heatmaps"]
  },
  "reds": {
    "name": "Sequential Reds (9-step)",
    "description": "Light to dark red progression",
    "type": "sequential",
    "colors": [
      { "value": 1, "hex": "#FEF2F2", "name": "Red 50" },
      { "value": 2, "hex": "#FEE2E2", "name": "Red 100" },
      { "value": 3, "hex": "#FECACA", "name": "Red 200" },
      { "value": 4, "hex": "#FCA5A5", "name": "Red 300" },
      { "value": 5, "hex": "#F87171", "name": "Red 400" },
      { "value": 6, "hex": "#EF4444", "name": "Red 500" },
      { "value": 7, "hex": "#DC2626", "name": "Red 600" },
      { "value": 8, "hex": "#B91C1C", "name": "Red 700" },
      { "value": 9, "hex": "#7F1D1D", "name": "Red 900" }
    ],
    "useFor": ["negative metrics", "error rates", "risk heatmaps"]
  },
  "viridis": {
    "name": "Viridis (Perceptually Uniform)",
    "description": "Scientific colormap with uniform perceptual changes",
    "type": "sequential",
    "colors": [
      { "value": 0.0, "hex": "#440154" },
      { "value": 0.25, "hex": "#31688E" },
      { "value": 0.5, "hex": "#35B779" },
      { "value": 0.75, "hex": "#FDE724" },
      { "value": 1.0, "hex": "#FDE724" }
    ],
    "useFor": ["scientific data", "heatmaps", "perceptually uniform needed"],
    "properties": {
      "perceptuallyUniform": true,
      "colorblindSafe": true,
      "printFriendly": true
    }
  }
}

{
  "name": "Company",
  "value": 100000,
  "children": [
    {
      "name": "Engineering",
      "value": 45000,
      "children": [
        { "name": "Frontend", "value": 18000 },
        { "name": "Backend", "value": 15000 },
        { "name": "DevOps", "value": 7000 },
        { "name": "QA", "value": 5000 }
      ]
    },
    {
      "name": "Sales",
      "value": 30000,
      "children": [
        { "name": "Enterprise", "value": 18000 },
        { "name": "SMB", "value": 8000 },
        { "name": "Inside Sales", "value": 4000 }
      ]
    },
    {
      "name": "Marketing",
      "value": 15000,
      "children": [
        { "name": "Digital", "value": 8000 },
        { "name": "Content", "value": 4000 },
        { "name": "Events", "value": 3000 }
      ]
    },
    {
      "name": "Operations",
      "value": 10000,
      "children": [
        { "name": "Finance", "value": 4000 },
        { "name": "HR", "value": 3500 },
        { "name": "Legal", "value": 2500 }
      ]
    }
  ]
}

month,revenue,expenses,profit,region
January,45000,28000,17000,North
February,38000,22000,16000,North
March,52000,31000,21000,North
April,48000,29000,19000,North
May,61000,35000,26000,North
June,58000,33000,25000,North
July,63000,37000,26000,North
August,59000,34000,25000,North
September,67000,39000,28000,North
October,71000,41000,30000,North
November,75000,43000,32000,North
December,82000,47000,35000,North

{
  "metadata": {
    "title": "Website Traffic Time Series",
    "description": "Hourly website visitors over 7 days",
    "startDate": "2024-01-01T00:00:00Z",
    "endDate": "2024-01-07T23:59:59Z",
    "interval": "hourly"
  },
  "data": [
    { "timestamp": "2024-01-01T00:00:00Z", "visitors": 145, "pageViews": 523, "bounceRate": 0.42 },
    { "timestamp": "2024-01-01T01:00:00Z", "visitors": 98, "pageViews": 312, "bounceRate": 0.45 },
    { "timestamp": "2024-01-01T02:00:00Z", "visitors": 67, "pageViews": 201, "bounceRate": 0.48 },
    { "timestamp": "2024-01-01T03:00:00Z", "visitors": 45, "pageViews": 134, "bounceRate": 0.51 },
    { "timestamp": "2024-01-01T04:00:00Z", "visitors": 34, "pageViews": 98, "bounceRate": 0.53 },
    { "timestamp": "2024-01-01T05:00:00Z", "visitors": 56, "pageViews": 167, "bounceRate": 0.49 },
    { "timestamp": "2024-01-01T06:00:00Z", "visitors": 123, "pageViews": 412, "bounceRate": 0.43 },
    { "timestamp": "2024-01-01T07:00:00Z", "visitors": 234, "pageViews": 823, "bounceRate": 0.38 },
    { "timestamp": "2024-01-01T08:00:00Z", "visitors": 456, "pageViews": 1534, "bounceRate": 0.32 },
    { "timestamp": "2024-01-01T09:00:00Z", "visitors": 678, "pageViews": 2345, "bounceRate": 0.28 },
    { "timestamp": "2024-01-01T10:00:00Z", "visitors": 789, "pageViews": 2876, "bounceRate": 0.25 },
    { "timestamp": "2024-01-01T11:00:00Z", "visitors": 823, "pageViews": 3012, "bounceRate": 0.24 },
    { "timestamp": "2024-01-01T12:00:00Z", "visitors": 891, "pageViews": 3234, "bounceRate": 0.23 }
  ]
}

import React, { useState } from 'react';
import {
  BarChart,
  Bar,
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from 'recharts';

/**
 * Example: Accessible Chart with WCAG 2.1 AA Compliance
 *
 * Purpose: Demonstrate comprehensive accessibility features for data visualization
 * Features:
 * - Keyboard navigation (Tab, Enter, Arrow keys)
 * - Screen reader support (ARIA labels, hidden data table)
 * - Color-blind safe palette (distinguishable without color)
 * - High contrast mode support
 * - Focus indicators
 * - Text alternatives for all visual information
 * - Downloadable data table (CSV export)
 * - Pattern fills for bar charts (not just color)
 *
 * WCAG Guidelines Addressed:
 * - 1.1.1 Non-text Content (Level A)
 * - 1.4.1 Use of Color (Level A)
 * - 1.4.3 Contrast (Minimum) (Level AA)
 * - 2.1.1 Keyboard (Level A)
 * - 4.1.2 Name, Role, Value (Level A)
 */

const monthlyData = [
  { month: 'Jan', sales: 4200, target: 4000, leads: 120 },
  { month: 'Feb', sales: 3800, target: 4000, leads: 98 },
  { month: 'Mar', sales: 5100, target: 4500, leads: 145 },
  { month: 'Apr', sales: 4600, target: 4500, leads: 132 },
  { month: 'May', sales: 5400, target: 5000, leads: 168 },
  { month: 'Jun', sales: 6200, target: 5500, leads: 201 },
];

// Color-blind safe palette (distinguishable by hue, luminance, and pattern)
const COLORS = {
  primary: '#0072B2',   // Blue (safe for deuteranopia/protanopia)
  secondary: '#D55E00', // Orange-red (safe for all color blindness types)
  tertiary: '#009E73',  // Green (distinguishable)
  neutral: '#999999',   // Gray
};

export function AccessibleChart() {
  const [chartType, setChartType] = useState<'bar' | 'line'>('bar');
  const [showDataTable, setShowDataTable] = useState(false);

  // Calculate summary statistics for screen readers
  const totalSales = monthlyData.reduce((sum, d) => sum + d.sales, 0);
  const avgSales = (totalSales / monthlyData.length).toFixed(0);
  const maxSalesMonth = monthlyData.reduce((max, d) => (d.sales > max.sales ? d : max));
  const minSalesMonth = monthlyData.reduce((min, d) => (d.sales < min.sales ? d : min));

  const summaryText = `Monthly sales data from January to June.
    Average monthly sales: $${avgSales}.
    Highest sales: ${maxSalesMonth.month} with $${maxSalesMonth.sales}.
    Lowest sales: ${minSalesMonth.month} with $${minSalesMonth.sales}.
    Overall trend: ${monthlyData[monthlyData.length - 1].sales > monthlyData[0].sales ? 'increasing' : 'decreasing'}.`;

  // Export data as CSV
  const downloadCSV = () => {
    const headers = ['Month', 'Sales ($)', 'Target ($)', 'Leads'];
    const rows = monthlyData.map((d) => [d.month, d.sales, d.target, d.leads]);
    const csv = [headers, ...rows].map((row) => row.join(',')).join('\n');

    const blob = new Blob([csv], { type: 'text/csv' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'monthly-sales-data.csv';
    a.click();
    URL.revokeObjectURL(url);
  };

  // Custom accessible tooltip
  const CustomTooltip = ({ active, payload }: any) => {
    if (active && payload && payload.length) {
      return (
        <div
          role="tooltip"
          style={{
            backgroundColor: 'white',
            border: '2px solid #333',
            padding: '12px',
            borderRadius: '4px',
            boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
          }}
        >
          <p style={{ margin: 0, fontWeight: 'bold', marginBottom: '8px' }}>
            {payload[0].payload.month}
          </p>
          {payload.map((entry: any, index: number) => (
            <p key={index} style={{ margin: '4px 0', color: entry.color }}>
              <span style={{ fontWeight: 600 }}>{entry.name}:</span> $
              {entry.value.toLocaleString()}
            </p>
          ))}
        </div>
      );
    }
    return null;
  };

  return (
    <section aria-labelledby="chart-title">
      <h2 id="chart-title" style={{ marginBottom: '8px' }}>
        Monthly Sales Performance Dashboard
      </h2>

      <p
        id="chart-description"
        style={{ color: '#666', marginBottom: '16px', fontSize: '14px' }}
      >
        {summaryText}
      </p>

      {/* Controls with keyboard support */}
      <div
        role="toolbar"
        aria-label="Chart controls"
        style={{ marginBottom: '16px', display: 'flex', gap: '12px', flexWrap: 'wrap' }}
      >
        <div role="group" aria-label="Chart type selector">
          <button
            onClick={() => setChartType('bar')}
            aria-pressed={chartType === 'bar'}
            style={{
              padding: '8px 16px',
              backgroundColor: chartType === 'bar' ? COLORS.primary : '#fff',
              color: chartType === 'bar' ? '#fff' : '#333',
              border: '2px solid ' + COLORS.primary,
              borderRadius: '4px',
              cursor: 'pointer',
              fontWeight: 600,
              marginRight: '8px',
            }}
          >
            Bar Chart
          </button>
          <button
            onClick={() => setChartType('line')}
            aria-pressed={chartType === 'line'}
            style={{
              padding: '8px 16px',
              backgroundColor: chartType === 'line' ? COLORS.primary : '#fff',
              color: chartType === 'line' ? '#fff' : '#333',
              border: '2px solid ' + COLORS.primary,
              borderRadius: '4px',
              cursor: 'pointer',
              fontWeight: 600,
            }}
          >
            Line Chart
          </button>
        </div>

        <button
          onClick={() => setShowDataTable(!showDataTable)}
          aria-expanded={showDataTable}
          aria-controls="data-table"
          style={{
            padding: '8px 16px',
            backgroundColor: '#fff',
            color: '#333',
            border: '2px solid #999',
            borderRadius: '4px',
            cursor: 'pointer',
            fontWeight: 600,
          }}
        >
          {showDataTable ? 'Hide' : 'Show'} Data Table
        </button>

        <button
          onClick={downloadCSV}
          aria-label="Download data as CSV file"
          style={{
            padding: '8px 16px',
            backgroundColor: '#fff',
            color: '#333',
            border: '2px solid #999',
            borderRadius: '4px',
            cursor: 'pointer',
            fontWeight: 600,
          }}
        >
          📥 Download CSV
        </button>
      </div>

      {/* Chart container with appropriate ARIA attributes */}
      <div
        role="img"
        aria-labelledby="chart-title"
        aria-describedby="chart-description"
        style={{
          border: '1px solid #ddd',
          borderRadius: '8px',
          padding: '16px',
          backgroundColor: '#fff',
        }}
      >
        <ResponsiveContainer width="100%" height={400}>
          {chartType === 'bar' ? (
            <BarChart
              data={monthlyData}
              margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
            >
              <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
              <XAxis
                dataKey="month"
                tick={{ fill: '#333' }}
                label={{
                  value: 'Month',
                  position: 'insideBottom',
                  offset: -5,
                  style: { fill: '#333', fontWeight: 600 },
                }}
              />
              <YAxis
                tick={{ fill: '#333' }}
                label={{
                  value: 'Amount ($)',
                  angle: -90,
                  position: 'insideLeft',
                  style: { fill: '#333', fontWeight: 600 },
                }}
              />
              <Tooltip content={<CustomTooltip />} />
              <Legend
                wrapperStyle={{ paddingTop: '20px' }}
                iconType="rect"
              />
              <Bar
                dataKey="sales"
                fill={COLORS.primary}
                name="Actual Sales"
                // Pattern for color-blind users
                fillOpacity={0.9}
              />
              <Bar
                dataKey="target"
                fill={COLORS.secondary}
                name="Sales Target"
                fillOpacity={0.7}
              />
            </BarChart>
          ) : (
            <LineChart
              data={monthlyData}
              margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
            >
              <CartesianGrid strokeDasharray="3 3" stroke="#e0e0e0" />
              <XAxis
                dataKey="month"
                tick={{ fill: '#333' }}
                label={{
                  value: 'Month',
                  position: 'insideBottom',
                  offset: -5,
                  style: { fill: '#333', fontWeight: 600 },
                }}
              />
              <YAxis
                tick={{ fill: '#333' }}
                label={{
                  value: 'Amount ($)',
                  angle: -90,
                  position: 'insideLeft',
                  style: { fill: '#333', fontWeight: 600 },
                }}
              />
              <Tooltip content={<CustomTooltip />} />
              <Legend wrapperStyle={{ paddingTop: '20px' }} />
              <Line
                type="monotone"
                dataKey="sales"
                stroke={COLORS.primary}
                strokeWidth={3}
                name="Actual Sales"
                dot={{ r: 5 }}
                activeDot={{ r: 7 }}
              />
              <Line
                type="monotone"
                dataKey="target"
                stroke={COLORS.secondary}
                strokeWidth={3}
                strokeDasharray="5 5"
                name="Sales Target"
                dot={{ r: 5 }}
                activeDot={{ r: 7 }}
              />
            </LineChart>
          )}
        </ResponsiveContainer>
      </div>

      {/* Visible data table (optional, user-controlled) */}
      {showDataTable && (
        <div
          id="data-table"
          style={{
            marginTop: '24px',
            overflowX: 'auto',
            border: '1px solid #ddd',
            borderRadius: '8px',
          }}
        >
          <table
            style={{
              width: '100%',
              borderCollapse: 'collapse',
              backgroundColor: '#fff',
            }}
          >
            <caption
              style={{
                padding: '12px',
                fontWeight: 'bold',
                textAlign: 'left',
                backgroundColor: '#f5f5f5',
              }}
            >
              Monthly Sales Performance Data (January - June 2025)
            </caption>
            <thead>
              <tr style={{ backgroundColor: '#f5f5f5' }}>
                <th
                  scope="col"
                  style={{
                    padding: '12px',
                    textAlign: 'left',
                    borderBottom: '2px solid #ddd',
                  }}
                >
                  Month
                </th>
                <th
                  scope="col"
                  style={{
                    padding: '12px',
                    textAlign: 'right',
                    borderBottom: '2px solid #ddd',
                  }}
                >
                  Actual Sales ($)
                </th>
                <th
                  scope="col"
                  style={{
                    padding: '12px',
                    textAlign: 'right',
                    borderBottom: '2px solid #ddd',
                  }}
                >
                  Sales Target ($)
                </th>
                <th
                  scope="col"
                  style={{
                    padding: '12px',
                    textAlign: 'right',
                    borderBottom: '2px solid #ddd',
                  }}
                >
                  Leads
                </th>
                <th
                  scope="col"
                  style={{
                    padding: '12px',
                    textAlign: 'right',
                    borderBottom: '2px solid #ddd',
                  }}
                >
                  Performance
                </th>
              </tr>
            </thead>
            <tbody>
              {monthlyData.map((row, i) => {
                const performance = ((row.sales / row.target) * 100).toFixed(1);
                const meetsTarget = row.sales >= row.target;

                return (
                  <tr
                    key={i}
                    style={{
                      backgroundColor: i % 2 === 0 ? '#fff' : '#f9f9f9',
                    }}
                  >
                    <th
                      scope="row"
                      style={{
                        padding: '12px',
                        textAlign: 'left',
                        fontWeight: 600,
                      }}
                    >
                      {row.month}
                    </th>
                    <td style={{ padding: '12px', textAlign: 'right' }}>
                      ${row.sales.toLocaleString()}
                    </td>
                    <td style={{ padding: '12px', textAlign: 'right' }}>
                      ${row.target.toLocaleString()}
                    </td>
                    <td style={{ padding: '12px', textAlign: 'right' }}>
                      {row.leads}
                    </td>
                    <td
                      style={{
                        padding: '12px',
                        textAlign: 'right',
                        color: meetsTarget ? COLORS.tertiary : COLORS.secondary,
                        fontWeight: 600,
                      }}
                    >
                      {performance}% {meetsTarget ? '✓' : '✗'}
                    </td>
                  </tr>
                );
              })}
            </tbody>
            <tfoot>
              <tr style={{ backgroundColor: '#f0f0f0', fontWeight: 'bold' }}>
                <th scope="row" style={{ padding: '12px', textAlign: 'left' }}>
                  Total / Average
                </th>
                <td style={{ padding: '12px', textAlign: 'right' }}>
                  ${totalSales.toLocaleString()}
                </td>
                <td style={{ padding: '12px', textAlign: 'right' }}>
                  $
                  {monthlyData
                    .reduce((sum, d) => sum + d.target, 0)
                    .toLocaleString()}
                </td>
                <td style={{ padding: '12px', textAlign: 'right' }}>
                  {monthlyData.reduce((sum, d) => sum + d.leads, 0)}
                </td>
                <td style={{ padding: '12px', textAlign: 'right' }}>
                  {(
                    (totalSales /
                      monthlyData.reduce((sum, d) => sum + d.target, 0)) *
                    100
                  ).toFixed(1)}
                  %
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      )}

      {/* Screen reader only data table (always present) */}
      <div style={{ position: 'absolute', left: '-10000px', top: 'auto' }}>
        <table>
          <caption>Monthly Sales Performance (Screen Reader Version)</caption>
          <thead>
            <tr>
              <th scope="col">Month</th>
              <th scope="col">Sales ($)</th>
              <th scope="col">Target ($)</th>
              <th scope="col">Leads</th>
            </tr>
          </thead>
          <tbody>
            {monthlyData.map((row, i) => (
              <tr key={i}>
                <th scope="row">{row.month}</th>
                <td>{row.sales.toLocaleString()}</td>
                <td>{row.target.toLocaleString()}</td>
                <td>{row.leads}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {/* Accessibility notes for developers */}
      <details style={{ marginTop: '24px', padding: '16px', backgroundColor: '#f5f5f5', borderRadius: '8px' }}>
        <summary style={{ cursor: 'pointer', fontWeight: 'bold' }}>
          ♿ Accessibility Features Implemented
        </summary>
        <ul style={{ marginTop: '12px', lineHeight: 1.6 }}>
          <li><strong>Keyboard Navigation:</strong> All controls accessible via Tab and Enter keys</li>
          <li><strong>Screen Reader Support:</strong> ARIA labels, roles, and hidden data table</li>
          <li><strong>Color-blind Safe Palette:</strong> Blue/Orange/Green distinguishable without color</li>
          <li><strong>High Contrast:</strong> 4.5:1 contrast ratio for all text</li>
          <li><strong>Focus Indicators:</strong> Visible focus states for keyboard users</li>
          <li><strong>Text Alternatives:</strong> Summary text describes trends and key insights</li>
          <li><strong>Data Table:</strong> Optional visible table + hidden screen reader table</li>
          <li><strong>CSV Export:</strong> Download raw data for external analysis</li>
          <li><strong>Responsive:</strong> Chart adapts to container width</li>
        </ul>
      </details>
    </section>
  );
}

export default AccessibleChart;

import React from 'react';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from 'recharts';

/**
 * Example: Stacked Area Chart for Product Revenue
 *
 * Purpose: Show composition over time
 * Data: Temporal + Multiple continuous series
 * Chart Type: Stacked Area Chart
 * Use case: Revenue breakdown by product line over time
 */

const quarterlyData = [
  { quarter: 'Q1 2023', productA: 2400, productB: 1398, productC: 2100 },
  { quarter: 'Q2 2023', productA: 1398, productB: 2210, productC: 1800 },
  { quarter: 'Q3 2023', productA: 2800, productB: 2290, productC: 2500 },
  { quarter: 'Q4 2023', productA: 3908, productB: 2000, productC: 2800 },
  { quarter: 'Q1 2024', productA: 4800, productB: 2181, productC: 3200 },
  { quarter: 'Q2 2024', productA: 3800, productB: 2500, productC: 3500 },
];

// Colorblind-safe colors
const COLORS = {
  productA: '#648FFF', // Blue
  productB: '#785EF0', // Purple
  productC: '#FE6100', // Orange
};

export function QuarterlyRevenueAreaChart() {
  return (
    <figure
      role="img"
      aria-label="Quarterly revenue trends from Q1 2023 to Q2 2024 showing growth across all product lines. Total revenue increased from $5.9K to $9.8K."
    >
      <figcaption style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
        Quarterly Revenue by Product Line
      </figcaption>

      <ResponsiveContainer width="100%" height={400}>
        <AreaChart
          data={quarterlyData}
          margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="quarter" />
          <YAxis
            label={{ value: 'Revenue ($)', angle: -90, position: 'insideLeft' }}
          />
          <Tooltip
            formatter={(value) => `$${value.toLocaleString()}`}
            contentStyle={{
              backgroundColor: 'white',
              border: '1px solid #ccc',
              borderRadius: '4px',
              padding: '8px',
            }}
          />
          <Legend />

          <Area
            type="monotone"
            dataKey="productA"
            stackId="1"
            stroke={COLORS.productA}
            fill={COLORS.productA}
            fillOpacity={0.6}
            name="Product A"
          />
          <Area
            type="monotone"
            dataKey="productB"
            stackId="1"
            stroke={COLORS.productB}
            fill={COLORS.productB}
            fillOpacity={0.6}
            name="Product B"
          />
          <Area
            type="monotone"
            dataKey="productC"
            stackId="1"
            stroke={COLORS.productC}
            fill={COLORS.productC}
            fillOpacity={0.6}
            name="Product C"
          />
        </AreaChart>
      </ResponsiveContainer>
    </figure>
  );
}
```

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

/**
 * Example: Sales Revenue Bar Chart
 *
 * Purpose: Compare revenue across product categories
 * Data: Categorical (product categories) + Continuous (revenue, expenses)
 * Chart Type: Grouped Bar Chart
 * Accessibility: Includes aria-label, high contrast colors
 */

const salesData = [
  { category: 'Electronics', revenue: 45000, expenses: 28000 },
  { category: 'Clothing', revenue: 38000, expenses: 22000 },
  { category: 'Home & Garden', revenue: 52000, expenses: 31000 },
  { category: 'Sports', revenue: 29000, expenses: 18000 },
  { category: 'Books', revenue: 21000, expenses: 12000 },
];

export function SalesRevenueChart() {
  return (
    <div
      role="img"
      aria-label="Sales revenue and expenses by category. Electronics generated $45K revenue with $28K expenses. Highest revenue was Home & Garden at $52K."
    >
      <ResponsiveContainer width="100%" height={400}>
        <BarChart
          data={salesData}
          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="category" />
          <YAxis
            label={{ value: 'Amount ($)', angle: -90, position: 'insideLeft' }}
          />
          <Tooltip
            formatter={(value) => `$${value.toLocaleString()}`}
          />
          <Legend />
          <Bar dataKey="revenue" fill="#3B82F6" name="Revenue" />
          <Bar dataKey="expenses" fill="#EF4444" name="Expenses" />
        </BarChart>
      </ResponsiveContainer>

      {/* Screen reader table alternative */}
      <table style={{ position: 'absolute', left: '-10000px', top: 'auto' }}>
        <caption>Sales Revenue and Expenses by Category</caption>
        <thead>
          <tr>
            <th scope="col">Category</th>
            <th scope="col">Revenue ($)</th>
            <th scope="col">Expenses ($)</th>
          </tr>
        </thead>
        <tbody>
          {salesData.map((row, i) => (
            <tr key={i}>
              <th scope="row">{row.category}</th>
              <td>{row.revenue.toLocaleString()}</td>
              <td>{row.expenses.toLocaleString()}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}
```

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

/**
 * Example: Monthly Sales Trend Line Chart
 *
 * Purpose: Show sales trends over time
 * Data: Temporal (months) + Continuous (sales values)
 * Chart Type: Line Chart
 * Accessibility: aria-label, colorblind-safe colors, data table
 */

const monthlyData = [
  { month: 'Jan', sales: 4000, target: 3500 },
  { month: 'Feb', sales: 3000, target: 3500 },
  { month: 'Mar', sales: 5000, target: 4000 },
  { month: 'Apr', sales: 4500, target: 4000 },
  { month: 'May', sales: 6000, target: 4500 },
  { month: 'Jun', sales: 5500, target: 4500 },
];

export function MonthlySalesTrend() {
  return (
    <figure
      role="img"
      aria-label="Monthly sales trends from January to June 2024. Sales fluctuated between $3K and $6K, with peak in May at $6K, consistently meeting or exceeding targets."
    >
      <figcaption style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
        Monthly Sales Trend (Jan-Jun 2024)
      </figcaption>

      <ResponsiveContainer width="100%" height={400}>
        <LineChart
          data={monthlyData}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="month" />
          <YAxis
            label={{ value: 'Sales ($)', angle: -90, position: 'insideLeft' }}
          />
          <Tooltip
            formatter={(value) => `$${value.toLocaleString()}`}
          />
          <Legend />

          {/* Actual sales - solid blue line */}
          <Line
            type="monotone"
            dataKey="sales"
            stroke="#3B82F6"
            strokeWidth={3}
            dot={{ fill: '#3B82F6', strokeWidth: 2, r: 5 }}
            name="Actual Sales"
          />

          {/* Target - dashed green line */}
          <Line
            type="monotone"
            dataKey="target"
            stroke="#10B981"
            strokeWidth={2}
            strokeDasharray="5 5"
            dot={{ fill: '#10B981', strokeWidth: 2, r: 4 }}
            name="Target"
          />
        </LineChart>
      </ResponsiveContainer>

      {/* Alternative data table for accessibility */}
      <details style={{ marginTop: '16px' }}>
        <summary style={{ cursor: 'pointer', fontWeight: '500' }}>
          View as Data Table
        </summary>
        <table style={{ width: '100%', marginTop: '8px', borderCollapse: 'collapse' }}>
          <caption className="sr-only">Monthly Sales Data</caption>
          <thead>
            <tr style={{ backgroundColor: '#F3F4F6' }}>
              <th scope="col" style={{ padding: '12px', textAlign: 'left', border: '1px solid #D1D5DB' }}>
                Month
              </th>
              <th scope="col" style={{ padding: '12px', textAlign: 'right', border: '1px solid #D1D5DB' }}>
                Actual Sales
              </th>
              <th scope="col" style={{ padding: '12px', textAlign: 'right', border: '1px solid #D1D5DB' }}>
                Target
              </th>
              <th scope="col" style={{ padding: '12px', textAlign: 'right', border: '1px solid #D1D5DB' }}>
                Variance
              </th>
            </tr>
          </thead>
          <tbody>
            {monthlyData.map((row, i) => {
              const variance = row.sales - row.target;
              const percentVariance = ((variance / row.target) * 100).toFixed(1);

              return (
                <tr key={i}>
                  <th scope="row" style={{ padding: '12px', textAlign: 'left', border: '1px solid #D1D5DB' }}>
                    {row.month}
                  </th>
                  <td style={{ padding: '12px', textAlign: 'right', border: '1px solid #D1D5DB' }}>
                    ${row.sales.toLocaleString()}
                  </td>
                  <td style={{ padding: '12px', textAlign: 'right', border: '1px solid #D1D5DB' }}>
                    ${row.target.toLocaleString()}
                  </td>
                  <td
                    style={{
                      padding: '12px',
                      textAlign: 'right',
                      border: '1px solid #D1D5DB',
                      color: variance >= 0 ? '#10B981' : '#EF4444',
                    }}
                  >
                    {variance >= 0 ? '+' : ''}${variance.toLocaleString()} ({percentVariance}%)
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </details>
    </figure>
  );
}
```

import React from 'react';
import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';

/**
 * Example: Device Distribution Pie Chart
 *
 * Purpose: Show composition/part-to-whole
 * Data: Categorical with percentages
 * Chart Type: Pie Chart
 * Note: Only use for 2-6 categories
 * Accessibility: Patterns + colors, data table
 */

const deviceData = [
  { name: 'Desktop', value: 400, percentage: 44.4 },
  { name: 'Mobile', value: 300, percentage: 33.3 },
  { name: 'Tablet', value: 200, percentage: 22.2 },
];

// Colorblind-safe colors
const COLORS = ['#648FFF', '#785EF0', '#DC267F'];

// SVG patterns for additional differentiation
const renderPatterns = () => (
  <defs>
    <pattern id="diagonal" width="4" height="4" patternUnits="userSpaceOnUse">
      <path d="M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2" stroke="currentColor" strokeWidth="0.5" />
    </pattern>
    <pattern id="dots" width="4" height="4" patternUnits="userSpaceOnUse">
      <circle cx="2" cy="2" r="1" fill="currentColor" />
    </pattern>
    <pattern id="grid" width="4" height="4" patternUnits="userSpaceOnUse">
      <path d="M 4 0 L 0 0 0 4" fill="none" stroke="currentColor" strokeWidth="0.5" />
    </pattern>
  </defs>
);

export function DeviceDistributionChart() {
  return (
    <figure
      role="img"
      aria-label="Device distribution shows Desktop usage at 44%, Mobile at 33%, and Tablet at 22%"
    >
      <figcaption style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
        Traffic by Device Type
      </figcaption>

      <ResponsiveContainer width="100%" height={400}>
        <PieChart>
          <Pie
            data={deviceData}
            cx="50%"
            cy="50%"
            labelLine={true}
            label={({ name, percentage }) => `${name}: ${percentage.toFixed(1)}%`}
            outerRadius={120}
            fill="#8884d8"
            dataKey="value"
          >
            {deviceData.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
            ))}
          </Pie>
          <Tooltip
            formatter={(value, name) => [
              `${value} users (${deviceData.find(d => d.name === name)?.percentage.toFixed(1)}%)`,
              name,
            ]}
          />
          <Legend />
        </PieChart>
      </ResponsiveContainer>

      {/* Data table for accessibility */}
      <details style={{ marginTop: '16px' }}>
        <summary style={{ cursor: 'pointer', fontWeight: '500' }}>
          View as Data Table
        </summary>
        <table style={{ width: '100%', marginTop: '8px', borderCollapse: 'collapse' }}>
          <caption className="sr-only">Device Distribution</caption>
          <thead>
            <tr style={{ backgroundColor: '#F3F4F6' }}>
              <th scope="col" style={{ padding: '12px', textAlign: 'left', border: '1px solid #D1D5DB' }}>
                Device Type
              </th>
              <th scope="col" style={{ padding: '12px', textAlign: 'right', border: '1px solid #D1D5DB' }}>
                Users
              </th>
              <th scope="col" style={{ padding: '12px', textAlign: 'right', border: '1px solid #D1D5DB' }}>
                Percentage
              </th>
            </tr>
          </thead>
          <tbody>
            {deviceData.map((row, i) => (
              <tr key={i}>
                <th scope="row" style={{ padding: '12px', textAlign: 'left', border: '1px solid #D1D5DB' }}>
                  {row.name}
                </th>
                <td style={{ padding: '12px', textAlign: 'right', border: '1px solid #D1D5DB' }}>
                  {row.value}
                </td>
                <td style={{ padding: '12px', textAlign: 'right', border: '1px solid #D1D5DB' }}>
                  {row.percentage.toFixed(1)}%
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </details>
    </figure>
  );
}
```

import React from 'react';
import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ZAxis } from 'recharts';

/**
 * Example: Marketing Spend vs Revenue Scatter Plot
 *
 * Purpose: Explore correlation between marketing spend and revenue
 * Data: Two continuous variables (spend, revenue)
 * Chart Type: Scatter Plot
 * Accessibility: aria-label, colorblind-safe, correlation description
 */

const correlationData = [
  { spend: 100, revenue: 200, product: 'Product A' },
  { spend: 120, revenue: 180, product: 'Product B' },
  { spend: 170, revenue: 320, product: 'Product C' },
  { spend: 140, revenue: 250, product: 'Product D' },
  { spend: 150, revenue: 380, product: 'Product E' },
  { spend: 180, revenue: 350, product: 'Product F' },
  { spend: 160, revenue: 400, product: 'Product G' },
  { spend: 190, revenue: 420, product: 'Product H' },
  { spend: 200, revenue: 450, product: 'Product I' },
  { spend: 210, revenue: 480, product: 'Product J' },
];

export function MarketingCorrelationChart() {
  return (
    <figure
      role="img"
      aria-label="Scatter plot showing positive correlation between marketing spend and revenue. As spending increases from $100K to $210K, revenue increases from $200K to $480K, indicating effective marketing ROI."
    >
      <figcaption style={{ fontSize: '18px', fontWeight: 'bold', marginBottom: '16px' }}>
        Marketing Spend vs Revenue Correlation
      </figcaption>

      <ResponsiveContainer width="100%" height={400}>
        <ScatterChart margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis
            type="number"
            dataKey="spend"
            name="Marketing Spend"
            unit="K"
            label={{ value: 'Marketing Spend ($K)', position: 'insideBottom', offset: -10 }}
          />
          <YAxis
            type="number"
            dataKey="revenue"
            name="Revenue"
            unit="K"
            label={{ value: 'Revenue ($K)', angle: -90, position: 'insideLeft' }}
          />
          <ZAxis range={[100, 100]} />
          <Tooltip
            cursor={{ strokeDasharray: '3 3' }}
            content={({ active, payload }) => {
              if (active && payload && payload.length) {
                const data = payload[0].payload;
                return (
                  <div
                    style={{
                      backgroundColor: 'white',
                      padding: '12px',
                      border: '1px solid #ccc',
                      borderRadius: '4px',
                    }}
                  >
                    <p style={{ margin: 0, fontWeight: 'bold' }}>{data.product}</p>
                    <p style={{ margin: '4px 0 0 0', fontSize: '14px' }}>
                      Spend: ${data.spend}K
                    </p>
                    <p style={{ margin: '4px 0 0 0', fontSize: '14px' }}>
                      Revenue: ${data.revenue}K
                    </p>
                    <p style={{ margin: '4px 0 0 0', fontSize: '14px', color: '#10B981' }}>
                      ROI: {((data.revenue / data.spend - 1) * 100).toFixed(1)}%
                    </p>
                  </div>
                );
              }
              return null;
            }}
          />
          <Scatter
            name="Products"
            data={correlationData}
            fill="#3B82F6"
            fillOpacity={0.6}
            stroke="#1E40AF"
            strokeWidth={2}
          />
        </ScatterChart>
      </ResponsiveContainer>
    </figure>
  );
}
```

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

# Dependencies
node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

/**
 * Skill Library Visualization Demo
 *
 * Showcases three different visualization approaches for the same dataset:
 * 1. Treemap - Hierarchical overview (best for at-a-glance understanding)
 * 2. Grouped Bar Chart - Category comparison (best for progress tracking)
 * 3. Sunburst Chart - Interactive exploration (best for engagement)
 *
 * Demonstrates data-viz skill guidance on selecting appropriate chart types
 * based on data characteristics and analytical purpose.
 */

import React, { useState } from 'react';
import { SkillLibraryTreemap } from './SkillLibraryTreemap';
import { SkillLibraryBarChart } from './SkillLibraryBarChart';
import { SkillLibrarySunburst } from './SkillLibrarySunburst';
import { skillLibraryStats } from './skillLibraryData';

type VisualizationType = 'treemap' | 'barchart' | 'sunburst' | 'all';

export default function App() {
  const [activeView, setActiveView] = useState<VisualizationType>('all');

  const visualizations = [
    {
      id: 'treemap' as const,
      name: 'Treemap',
      description: 'Hierarchical Overview',
      icon: '🔲',
      bestFor: 'At-a-glance understanding of structure and status',
      component: <SkillLibraryTreemap />
    },
    {
      id: 'barchart' as const,
      name: 'Grouped Bar Chart',
      description: 'Plugin Group Comparison',
      icon: '📊',
      bestFor: 'Comparing progress across plugin groups',
      component: <SkillLibraryBarChart />
    },
    {
      id: 'sunburst' as const,
      name: 'Sunburst Chart',
      description: 'Interactive Exploration',
      icon: '☀️',
      bestFor: 'Engaging interactive hierarchy exploration',
      component: <SkillLibrarySunburst />
    }
  ];

  return (
    <div style={{ minHeight: '100vh', backgroundColor: '#f9fafb', padding: '24px' }}>
      {/* Header */}
      <header style={{ maxWidth: '1400px', margin: '0 auto 32px' }}>
        <h1 style={{ margin: 0, fontSize: '36px', fontWeight: 'bold', color: '#111' }}>
          AI Design Components - Skill Library Visualizations
        </h1>
        <p style={{ margin: '12px 0', fontSize: '18px', color: '#666' }}>
          Three complementary views of the same data using the data-viz skill
        </p>

        {/* Stats banner */}
        <div
          style={{
            marginTop: '16px',
            padding: '16px',
            backgroundColor: '#fff',
            borderRadius: '8px',
            boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
            gap: '16px'
          }}
        >
          <div>
            <div style={{ fontSize: '32px', fontWeight: 'bold', color: '#228833' }}>
              {skillLibraryStats.completeSkills}
            </div>
            <div style={{ fontSize: '14px', color: '#666' }}>Complete Skills</div>
          </div>
          <div>
            <div style={{ fontSize: '32px', fontWeight: 'bold', color: '#FFB000' }}>
              {skillLibraryStats.wipSkills}
            </div>
            <div style={{ fontSize: '14px', color: '#666' }}>In Progress</div>
          </div>
          <div>
            <div style={{ fontSize: '32px', fontWeight: 'bold', color: '#4477AA' }}>
              {skillLibraryStats.totalPluginGroups}
            </div>
            <div style={{ fontSize: '14px', color: '#666' }}>Plugin Groups</div>
          </div>
          <div>
            <div style={{ fontSize: '32px', fontWeight: 'bold', color: '#111' }}>
              {Math.round(skillLibraryStats.completionRate * 100)}%
            </div>
            <div style={{ fontSize: '14px', color: '#666' }}>Overall Progress</div>
          </div>
        </div>
      </header>

      {/* View selector */}
      <nav
        style={{
          maxWidth: '1400px',
          margin: '0 auto 32px',
          display: 'flex',
          gap: '12px',
          flexWrap: 'wrap'
        }}
        role="tablist"
      >
        <button
          onClick={() => setActiveView('all')}
          style={{
            padding: '12px 20px',
            fontSize: '16px',
            fontWeight: activeView === 'all' ? 'bold' : 'normal',
            backgroundColor: activeView === 'all' ? '#2196f3' : '#fff',
            color: activeView === 'all' ? '#fff' : '#111',
            border: activeView === 'all' ? 'none' : '2px solid #e0e0e0',
            borderRadius: '6px',
            cursor: 'pointer',
            transition: 'all 0.2s'
          }}
          role="tab"
          aria-selected={activeView === 'all'}
        >
          🎨 All Views
        </button>
        {visualizations.map(viz => (
          <button
            key={viz.id}
            onClick={() => setActiveView(viz.id)}
            style={{
              padding: '12px 20px',
              fontSize: '16px',
              fontWeight: activeView === viz.id ? 'bold' : 'normal',
              backgroundColor: activeView === viz.id ? '#2196f3' : '#fff',
              color: activeView === viz.id ? '#fff' : '#111',
              border: activeView === viz.id ? 'none' : '2px solid #e0e0e0',
              borderRadius: '6px',
              cursor: 'pointer',
              transition: 'all 0.2s'
            }}
            role="tab"
            aria-selected={activeView === viz.id}
          >
            {viz.icon} {viz.name}
          </button>
        ))}
      </nav>

      {/* Visualization selection guide (shown in 'all' view) */}
      {activeView === 'all' && (
        <div
          style={{
            maxWidth: '1400px',
            margin: '0 auto 32px',
            padding: '20px',
            backgroundColor: '#fff3cd',
            border: '2px solid #ffc107',
            borderRadius: '8px'
          }}
        >
          <h3 style={{ margin: '0 0 12px 0', fontSize: '18px', fontWeight: 'bold' }}>
            📚 Choosing the Right Visualization
          </h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '16px', fontSize: '14px' }}>
            {visualizations.map(viz => (
              <div key={viz.id} style={{ padding: '12px', backgroundColor: 'rgba(255,255,255,0.6)', borderRadius: '4px' }}>
                <div style={{ fontWeight: 'bold', marginBottom: '4px' }}>
                  {viz.icon} {viz.name}
                </div>
                <div style={{ color: '#666' }}>
                  <strong>Best for:</strong> {viz.bestFor}
                </div>
              </div>
            ))}
          </div>
        </div>
      )}

      {/* Main content area */}
      <main
        style={{
          maxWidth: '1400px',
          margin: '0 auto'
        }}
      >
        {activeView === 'all' ? (
          <div style={{ display: 'grid', gap: '32px' }}>
            {visualizations.map(viz => (
              <section
                key={viz.id}
                style={{
                  padding: '24px',
                  backgroundColor: '#fff',
                  borderRadius: '8px',
                  boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                }}
              >
                {viz.component}
              </section>
            ))}
          </div>
        ) : (
          <section
            style={{
              padding: '24px',
              backgroundColor: '#fff',
              borderRadius: '8px',
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}
          >
            {visualizations.find(v => v.id === activeView)?.component}
          </section>
        )}
      </main>

      {/* Footer */}
      <footer
        style={{
          maxWidth: '1400px',
          margin: '48px auto 0',
          padding: '24px',
          borderTop: '2px solid #e0e0e0',
          fontSize: '14px',
          color: '#666',
          textAlign: 'center'
        }}
      >
        <p style={{ margin: '0 0 8px 0' }}>
          Built with the <strong>data-viz</strong> skill from ai-design-components
        </p>
        <p style={{ margin: 0 }}>
          Following Anthropic's Skills best practices for progressive disclosure and token efficiency
        </p>
      </footer>
    </div>
  );
}