# Visualization Chart Template Library

This file contains all chart templates and code examples used for SEO and GEO reports.

## 📊 Chart Type Index

1. [Line Chart (Trend Analysis)](#1-line-chart-trend-analysis)
2. [Bar Chart (Comparative Analysis)](#2-bar-chart-comparative-analysis)
3. [Pie Chart (Distribution Analysis)](#3-pie-chart-distribution-analysis)
4. [Heatmap (Opportunity Analysis)](#4-heatmap-opportunity-analysis)
5. [Funnel Chart (Conversion Analysis)](#5-funnel-chart-conversion-analysis)
6. [Radar Chart (Multi-dimensional Analysis)](#6-radar-chart-multi-dimensional-analysis)

---

## 1. Line Chart (Trend Analysis)

### Usage
Displays time-series data trends, suitable for showing:
- Changes in AI citation count
- GEO score trends
- Traffic growth curves
- Competitor comparison trends

### Markdown Template

```markdown
## {Chart Title}

**Data Source:** {Source Description}
**Time Period:** {Start Date} to {End Date}
**Data Type:** {Data Type}

```
Citation Count
{Max Value} │                         {Data Point}
    │                     {Data Point}
    │                 {Data Point}
{Mid Value} │             {Data Point}
    │         {Data Point}
    │     {Data Point}
{Min Value} │ {Data Point}
    │
  0 └────────────────────────────
    {Timeline Labels}

{Legend Description}
```

**Key Insights:**
- {Insight Point 1}
- {Insight Point 2}
- {Insight Point 3}
```

### HTML/Chart.js Template

```html
<div class="chart-container">
    <canvas id="{chartId}"></canvas>
</div>

<script>
const ctx = document.getElementById('{chartId}');
new Chart(ctx, {
    type: 'line',
    data: {
        labels: [{Timeline Data}],
        datasets: [{
            label: '{Dataset 1 Name}',
            data: [{Data Points 1}],
            borderColor: '#00FF00',
            backgroundColor: 'rgba(0, 255, 0, 0.1)',
            tension: 0.4,
            fill: true
        }, {
            label: '{Dataset 2 Name}',
            data: [{Data Points 2}],
            borderColor: '#FF6B6B',
            backgroundColor: 'rgba(255, 107, 107, 0.1)',
            tension: 0.4,
            fill: true
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            },
            tooltip: {
                mode: 'index',
                intersect: false,
            }
        },
        interaction: {
            mode: 'nearest',
            axis: 'x',
            intersect: false
        },
        scales: {
            y: {
                beginAtZero: true,
                title: {
                    display: true,
                    text: '{Y-axis Label}'
                }
            },
            x: {
                title: {
                    display: true,
                    text: '{X-axis Label}'
                }
            }
        }
    }
});
</script>
```

### Real Example

```markdown
## AI Citation Trend (30 Days)

**Data Source:** GEO Citation Monitoring System
**Time Period:** 2026-01-15 to 2026-02-15
**Data Type:** Daily citation count

```
Citation Count
250 │                         ●
    │                     ●
    │                 ●
200 │             ●
    │         ●
    │     ●
150 │ ●
    │
    │
100 │
    │
    │
 50 │
    │
  0 └────────────────────────────
    D1  D5  D10 D15 D20 D25 D30

ChatGPT ─●─●─●─●─●─●─●─●─●─●─ (+18% growth)
Gemini ────●─●─●─●─●─●─●─●─ (+22% growth)
Perplexity ──●─●─●─●─●─●─●─ (+15% growth)
Google SGE ─●─●─●─●─●─●─ (Stable)
```

**Key Insights:**
- Gemini grew the fastest (+22%), likely due to structural content optimization.
- Google SGE growth has stalled; adding structured data is recommended.
- Overall trend is positive, with monthly growth at +18%.
```

---

## 2. Bar Chart (Comparative Analysis)

### Usage
Compares data across different categories or dimensions, suitable for showing:
- GEO scores across different engines
- Us vs. Competitor A
- Content type performance
- Keyword ranking comparisons

### Markdown Template

```markdown
## {Chart Title}

| Category | Metric 1 | Metric 2 | Gap |
|----------|----------|----------|-----|
| {Cat 1} | {Val 1} | {Val 2} | {Gap} |
| {Cat 2} | {Val 1} | {Val 2} | {Gap} |
| {Cat 3} | {Val 1} | {Val 2} | {Gap} |

Visualization:
{Cat 1}:    {Progress Bar 1} {Val 1}
{Cat 2}:    {Progress Bar 2} {Val 2}
{Cat 3}:    {Progress Bar 3} {Val 3}
```

### HTML/Chart.js Template

```html
<div class="chart-container">
    <canvas id="{chartId}"></canvas>
</div>

<script>
const ctx = document.getElementById('{chartId}');
new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [{Cat 1}, {Cat 2}, {Cat 3}],
        datasets: [{
            label: '{Dataset 1}',
            data: [{Val 1}, {Val 2}, {Val 3}],
            backgroundColor: 'rgba(76, 175, 80, 0.8)',
            borderColor: 'rgba(76, 175, 80, 1)',
            borderWidth: 1
        }, {
            label: '{Dataset 2}',
            data: [{Val 1}, {Val 2}, {Val 3}],
            backgroundColor: 'rgba(255, 152, 0, 0.8)',
            borderColor: 'rgba(255, 152, 0, 1)',
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                max: 100,
                title: {
                    display: true,
                    text: '{Y-axis Label}'
                }
            }
        }
    }
});
</script>
```

### Real Example

```markdown
## GEO Score Comparison by Engine

| Engine | Us | Competitor A | Gap |
|--------|----|--------------|-----|
| ChatGPT | 68 | 45 | +23 ✅ |
| Gemini | 75 | 52 | +23 ✅ |
| Perplexity | 70 | 48 | +22 ✅ |
| Google SGE | 55 | 62 | -7 ⚠️ |

Visualization:
ChatGPT:    ████████████████████████████ 68
Gemini:     █████████████████████████████ 75
Perplexity: █████████████████████████████ 70
Google SGE: ███████████████████ 55

Competitor A: ████████████████████████ 45
            ████████████████████ 52
            ██████████████████ 48
            ████████████████████████ 62

**Competitive Standing:**
- ✅ Leading in 3 engines
- ⚠️ Google SGE requires optimization
- 🎯 Overall lead of 61 points
```

---

## 3. Pie Chart (Distribution Analysis)

### Usage
Displays the percentage distribution of categorical data, suitable for:
- Content type distribution
- Citation source distribution
- Social media platform split
- Traffic channel distribution

### Markdown Template

```markdown
## {Chart Title}

| Type | Count | Percentage |
|------|-------|------------|
| {Type 1} | {Count} | {Percentage}% |
| {Type 2} | {Count} | {Percentage}% |
| {Type 3} | {Count} | {Percentage}% |

Visualization:
{Type 1}     {Progress Bar} {Percentage}%
{Type 2}     {Progress Bar} {Percentage}%
{Type 3}     {Progress Bar} {Percentage}%
```

### HTML/Chart.js Template

```html
<div class="chart-container">
    <canvas id="{chartId}"></canvas>
</div>

<script>
const ctx = document.getElementById('{chartId}');
new Chart(ctx, {
    type: 'pie',
    data: {
        labels: [{Type 1}, {Type 2}, {Type 3}],
        datasets: [{
            data: [{Value 1}, {Value 2}, {Value 3}],
            backgroundColor: [
                'rgba(76, 175, 80, 0.8)',
                'rgba(33, 150, 243, 0.8)',
                'rgba(255, 152, 0, 0.8)'
            ],
            borderColor: [
                'rgba(76, 175, 80, 1)',
                'rgba(33, 150, 243, 1)',
                'rgba(255, 152, 0, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'right',
            },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        let label = context.label || '';
                        if (label) {
                            label += ': ';
                        }
                        label += context.parsed + '%';
                        return label;
                    }
                }
            }
        }
    }
});
</script>
```

### Real Example

```markdown
## Content Type Distribution

| Type | Count | Percentage |
|------|-------|------------|
| Guides/Tutorials | 45 | 45% |
| Case Studies | 25 | 25% |
| News/Articles | 15 | 15% |
| Tool Pages | 10 | 10% |
| Product Pages | 5 | 5% |

Visualization:
Guides/Tutorials ████████████████████████████████ 45%
Case Studies     ████████████████████ 25%
News/Articles    ██████████ 15%
Tool Pages       ██████ 10%
Product Pages    ███ 5%

**Insights:**
- ✅ Guides dominate (highest AI citation rate)
- ✅ Sufficient case studies (25%)
- ⚠️ Product pages are insufficient; more educational content needed
```

---

## 4. Heatmap (Opportunity Analysis)

### Usage
Displays two-dimensional matrix data to identify opportunities, suitable for:
- Search Volume vs. Keyword Difficulty
- AI Citation Potential Matrix
- Priority Matrix
- Risk Assessment Matrix

### Markdown Template

```markdown
## {Chart Title}

|        | Col 1 | Col 2 | Col 3 |
|--------|-------|-------|-------|
| Row 1 | {Val 1} | {Val 2} | {Val 3} |
| Row 2 | {Val 4} | {Val 5} | {Val 6} |
| Row 3 | {Val 7} | {Val 8} | {Val 9} |

Legend:
🟢 High Opportunity (>70)
🟡 Medium Opportunity (40-70)
🔴 Low Opportunity (<40)
```

### Real Example

```markdown
## Keyword Opportunity Analysis (Search Volume vs. Difficulty)

|          | Low Competition | Med Competition | High Competition |
|----------|-----------------|-----------------|------------------|
| High Vol | 🟢 85           | 🟡 65           | 🔴 35            |
| Med Vol  | 🟢 70           | 🟡 50           | 🔴 25            |
| Low Vol  | 🟡 40           | 🟡 30           | 🔴 15            |

Legend:
🟢 High Opportunity (Priority) >70
🟡 Medium Opportunity (Consider) 40-70
🔴 Low Opportunity (Defer) <40

**Strategic Advice:**
1. 🔴 **Create Immediately:** "High Vol + Low Comp" (85)
   - Expected Citations: 45/mo
   - Expected Traffic: 2,500 visitors/mo

2. 🟡 **Create This Week:** "High Vol + Med Comp" (65)
   - Expected Citations: 32/mo
   - Expected Traffic: 1,800 visitors/mo

3. 🟡 **Create This Month:** "Med Vol + Low Comp" (70)
   - Expected Citations: 28/mo
   - Expected Traffic: 1,200 visitors/mo
```

---

## 5. Funnel Chart (Conversion Analysis)

### Usage
Displays step-by-step conversion flows, suitable for:
- Content conversion funnel
- User journey
- SEO conversion path
- AI citation conversion

### Markdown Template

```markdown
## {Chart Title}

```
{Stage 1} {Count 1} ({Percentage 1}%)
  └─ {Drop-off 1}% Drop-off
{Stage 2} {Count 2} ({Percentage 2}%)
  └─ {Drop-off 2}% Drop-off
{Stage 3} {Count 3} ({Percentage 3}%)
  └─ {Drop-off 3}% Drop-off
{Stage 4} {Count 4} ({Percentage 4}%)
```

Overall Conversion Rate: {Final Percentage}%
```

### Real Example

```markdown
## Content Conversion Funnel

```
Visitors 10,000 (100%)
  └─ 40% Drop-off
Content Views 6,000 (60%)
  └─ 60% Drop-off
Stay >30s 2,400 (24%)
  └─ 50% Drop-off
Social Shares 1,200 (12%)
  └─ 60% Drop-off
Return Visits 480 (4.8%)
```

Overall Conversion Rate: 4.8%

**Optimization Advice:**
1. 🔴 **Reduce Initial Bounce** (40% → 30%)
   - Optimize headlines and meta descriptions
   - Improve page load speed
   - Improve mobile experience

2. 🟡 **Increase Social Shares** (12% → 20%)
   - Add clear share buttons
   - Create quotable snippets
   - Optimize share timing

3. 🟢 **Boost Return Rate** (4.8% → 8%)
   - Add subscription features
   - Regular content updates
   - Email marketing integration
```

---

## 6. Radar Chart (Multi-dimensional Analysis)

### Usage
Displays comprehensive performance across multiple dimensions, suitable for:
- 6-dimension GEO scores
- Multi-dimensional competitor comparison
- Content quality assessment
- Skills assessment

### HTML/Chart.js Template

```html
<div class="chart-container">
    <canvas id="{chartId}"></canvas>
</div>

<script>
const ctx = document.getElementById('{chartId}');
new Chart(ctx, {
    type: 'radar',
    data: {
        labels: [{Dim 1}, {Dim 2}, {Dim 3}, {Dim 4}, {Dim 5}, {Dim 6}],
        datasets: [{
            label: '{Dataset 1}',
            data: [{Val 1}, {Val 2}, {Val 3}, {Val 4}, {Val 5}, {Val 6}],
            backgroundColor: 'rgba(76, 175, 80, 0.2)',
            borderColor: 'rgba(76, 175, 80, 1)',
            pointBackgroundColor: 'rgba(76, 175, 80, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(76, 175, 80, 1)'
        }, {
            label: '{Dataset 2}',
            data: [{Val 1}, {Val 2}, {Val 3}, {Val 4}, {Val 5}, {Val 6}],
            backgroundColor: 'rgba(255, 152, 0, 0.2)',
            borderColor: 'rgba(255, 152, 0, 1)',
            pointBackgroundColor: 'rgba(255, 152, 0, 1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(255, 152, 0, 1)'
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            }
        },
        scales: {
            r: {
                beginAtZero: true,
                max: 100,
                ticks: {
                    stepSize: 20
                }
            }
        }
    }
});
</script>
```

### Real Example

```markdown
## 6-Dimension GEO Score Comparison

**Chart Type:** Radar Chart
**Data Source:** GEO Audit System

| Dimension | Us | Competitor A | Gap |
|-----------|----|--------------|-----|
| Authority | 42 | 55 | -13 |
| Entity Rel | 68 | 45 | +23 ✅ |
| Structure | 55 | 60 | -5 |
| Data Quality| 75 | 70 | +5 ✅ |
| Citation Den| 60 | 50 | +10 ✅ |
| Technical | 50 | 65 | -15 |

**Visualization:** (See radar chart in the HTML report)

**Key Insights:**
- ✅ **Strengths:** Entity Relationships, Data Quality, Citation Density
- ⚠️ **Weaknesses:** Authority (-13), Technical Optimization (-15)
- 🎯 **Quick Win:** Add Author Schema (+13)

**Optimization Priorities:**
1. 🔴 Authority: Add author info and citation sources
2. 🔴 Technical: Add full Schema.org markup
3. 🟡 Structure: Optimize paragraph lengths
```

---

## 📋 Chart Usage Guide

### Choosing the Right Chart

**Show Trends:** Use Line Charts
**Compare Data:** Use Bar Charts
**Distribution/Proportions:** Use Pie Charts
**Opportunity Analysis:** Use Heatmaps
**Process Conversion:** Use Funnel Charts
**Multi-dimensional Assessment:** Use Radar Charts

### Design Principles

1. **Clarity:** Ensure data is easy to read and understand.
2. **Accuracy:** Data must be precise and truthful.
3. **Consistency:** Maintain uniform colors and styles.
4. **Simplicity:** Avoid over-decoration.
5. **Interactivity:** HTML charts should support interactive hover states.

### Color Schemes

**Success/Growth:** Green (#4CAF50)
**Warning/Caution:** Orange (#FF9800)
**Danger/Decline:** Red (#F44336)
**Information/Neutral:** Blue (#2196F3)
**Highlight/Emphasis:** Purple (#9C27B0)

---

**Template Version:** 1.0.0
**Last Updated:** 2026-01-15
**Maintainer:** report-generator skill