# Data Visualization Patterns

Patterns for creating charts and graphs in SVG.

## Pie Charts

### Basic Pie Chart

Calculate arc segments using the SVG arc command. For a pie slice:

```
startAngle = previous segment end (or -90 for first slice, to start at top)
endAngle = startAngle + (value/total) * 360
```

Convert angles to coordinates:
```
x1 = cx + r * cos(startAngle * PI/180)
y1 = cy + r * sin(startAngle * PI/180)
x2 = cx + r * cos(endAngle * PI/180)
y2 = cy + r * sin(endAngle * PI/180)
largeArc = (endAngle - startAngle) > 180 ? 1 : 0
```

**Pie slice path**: `M cx cy L x1 y1 A r r 0 largeArc 1 x2 y2 Z`

### Example: Two-segment Pie (98%/2%)

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <g transform="translate(200, 200)">
    <!-- 98% slice (352.8 degrees) - Orange -->
    <path d="M 0 0 L 0 -150 A 150 150 0 1 1 -18.59 -148.84 Z" fill="#f97316"/>
    <!-- 2% slice (7.2 degrees) - Light gray -->
    <path d="M 0 0 L -18.59 -148.84 A 150 150 0 0 1 0 -150 Z" fill="#e5e7eb"/>
    <!-- Center percentage label -->
    <text x="0" y="10" text-anchor="middle" font-size="48" font-weight="bold" fill="#f97316">98%</text>
  </g>
  <!-- Legend -->
  <text x="200" y="380" text-anchor="middle" font-size="14" fill="#374151">Yes</text>
</svg>
```

### Donut Chart

Add a white circle in center or use stroke-only approach:

```svg
<!-- Stroke-based donut -->
<circle cx="200" cy="200" r="100" fill="none" stroke="#f97316" stroke-width="40"
        stroke-dasharray="565.48 628.31" stroke-dashoffset="157.08" transform="rotate(-90 200 200)"/>
```

Calculate stroke-dasharray: `segmentLength = (percentage/100) * circumference`

## Bar Charts

### Vertical Bar Chart

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400">
  <!-- Background -->
  <rect width="600" height="400" fill="#faf9f6"/>
  
  <!-- Y-axis -->
  <line x1="60" y1="40" x2="60" y2="340" stroke="#cbd5e1" stroke-width="1"/>
  
  <!-- X-axis -->
  <line x1="60" y1="340" x2="560" y2="340" stroke="#cbd5e1" stroke-width="1"/>
  
  <!-- Grid lines -->
  <g stroke="#e2e8f0" stroke-width="1">
    <line x1="60" y1="100" x2="560" y2="100"/>
    <line x1="60" y1="160" x2="560" y2="160"/>
    <line x1="60" y1="220" x2="560" y2="220"/>
    <line x1="60" y1="280" x2="560" y2="280"/>
  </g>
  
  <!-- Y-axis labels -->
  <g font-size="12" fill="#64748b" text-anchor="end">
    <text x="50" y="44">60</text>
    <text x="50" y="104">50</text>
    <text x="50" y="164">40</text>
    <text x="50" y="224">30</text>
    <text x="50" y="284">20</text>
    <text x="50" y="344">0</text>
  </g>
  
  <!-- Bars (calculate height: barHeight = (value/maxValue) * chartHeight) -->
  <g fill="#c2854a">
    <rect x="80" y="72" width="50" height="268" rx="4"/>  <!-- 56% -->
    <rect x="150" y="96" width="50" height="244" rx="4"/> <!-- 48% -->
    <rect x="220" y="104" width="50" height="236" rx="4"/><!-- 47% -->
    <rect x="290" y="144" width="50" height="196" rx="4"/><!-- 36% -->
    <rect x="360" y="168" width="50" height="172" rx="4"/><!-- 32% -->
    <rect x="430" y="184" width="50" height="156" rx="4"/><!-- 28% -->
    <rect x="500" y="200" width="50" height="140" rx="4"/><!-- 24% -->
  </g>
  
  <!-- X-axis labels (rotated) -->
  <g font-size="11" fill="#64748b">
    <text x="105" y="360" transform="rotate(-45 105 360)">Videos</text>
    <text x="175" y="360" transform="rotate(-45 175 360)">Trainings</text>
    <text x="245" y="360" transform="rotate(-45 245 360)">Courses</text>
  </g>
  
  <!-- Title -->
  <text x="300" y="25" text-anchor="middle" font-size="18" font-weight="600" fill="#1e293b">
    Resources Used to Learn About AI
  </text>
</svg>
```

### Horizontal Bar Chart

```svg
<rect x="60" y="50" width="280" height="30" rx="4" fill="#2563eb"/>  <!-- 70% -->
<rect x="60" y="90" width="200" height="30" rx="4" fill="#2563eb"/>  <!-- 50% -->
<text x="55" y="70" text-anchor="end" font-size="12">Category A</text>
```

## Line Charts

### Basic Line Chart

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300">
  <!-- Grid -->
  <g stroke="#e2e8f0" stroke-width="1">
    <line x1="50" y1="250" x2="550" y2="250"/>
    <line x1="50" y1="50" x2="50" y2="250"/>
  </g>
  
  <!-- Area fill (optional) -->
  <path d="M 50 250 L 50 200 L 150 180 L 250 150 L 350 120 L 450 100 L 550 80 L 550 250 Z"
        fill="url(#gradient)" opacity="0.3"/>
  
  <!-- Line -->
  <path d="M 50 200 L 150 180 L 250 150 L 350 120 L 450 100 L 550 80"
        stroke="#2563eb" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
  
  <!-- Data points -->
  <g fill="#2563eb">
    <circle cx="50" cy="200" r="5"/>
    <circle cx="150" cy="180" r="5"/>
    <circle cx="250" cy="150" r="5"/>
    <circle cx="350" cy="120" r="5"/>
    <circle cx="450" cy="100" r="5"/>
    <circle cx="550" cy="80" r="5"/>
  </g>
  
  <!-- Gradient definition -->
  <defs>
    <linearGradient id="gradient" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#2563eb"/>
      <stop offset="100%" stop-color="#2563eb" stop-opacity="0"/>
    </linearGradient>
  </defs>
</svg>
```

### Smooth Line (using Bezier curves)

For smooth curves, use quadratic or cubic Bezier:
```svg
<path d="M 50 200 Q 100 180 150 180 T 250 150 T 350 120 T 450 100 T 550 80"
      stroke="#2563eb" stroke-width="2" fill="none"/>
```

## Multi-Series Charts

### Side-by-Side Comparison (Two Pie Charts)

```svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
  <!-- Chart 1 -->
  <g transform="translate(200, 200)">
    <text x="0" y="-170" text-anchor="middle" font-size="16" font-weight="600">Organizations Increasing AI Investment</text>
    <!-- Pie slices here -->
  </g>
  
  <!-- Chart 2 -->
  <g transform="translate(600, 200)">
    <text x="0" y="-170" text-anchor="middle" font-size="16" font-weight="600">Employees Eager to Use AI</text>
    <!-- Pie slices here -->
  </g>
</svg>
```

## Chart Labels and Legends

### Value Labels on Bars

```svg
<text x="105" y="65" text-anchor="middle" font-size="12" font-weight="600" fill="#1e293b">56%</text>
```

### Legend

```svg
<g transform="translate(450, 320)">
  <rect x="0" y="0" width="16" height="16" rx="2" fill="#f97316"/>
  <text x="24" y="13" font-size="12" fill="#374151">Category A</text>
  
  <rect x="0" y="24" width="16" height="16" rx="2" fill="#e5e7eb"/>
  <text x="24" y="37" font-size="12" fill="#374151">Category B</text>
</g>
```

## Responsive Considerations

Use `viewBox` and percentage-based sizing:
- `viewBox="0 0 800 600"` maintains aspect ratio
- Use `preserveAspectRatio="xMidYMid meet"` for centering

## Common Calculations

**Pie chart arc**: 
- circumference = 2 * PI * radius
- arcLength = (percentage / 100) * circumference

**Bar chart**:
- barHeight = (value / maxValue) * chartHeight
- barY = chartBottom - barHeight

**Scale factor**:
- scale = chartHeight / (maxValue - minValue)
- plotY = chartBottom - ((value - minValue) * scale)
