# Data Visualization Components — Supplement to components.md These components use **pure HTML+CSS** to render charts and data visualizations without relying on PptxGenJS chart API. They convert directly through html2pptx into shapes. **When to use**: Prefer data visualization components whenever the content contains numbers, comparisons, percentages, or structured data. Every PPT with 6+ slides **MUST** include at least 1-2 data visualization pages. **Selection principle**: Concrete data → prioritize data viz components (bars/tables/funnels/donuts) over plain text lists. Alternate between text pages and data pages for visual rhythm. For PptxGenJS native charts (BAR/LINE/PIE/DOUGHNUT), use `content-chart-focus` with placeholder + `slide.addChart()` in compile.js. --- ### content-horizontal-bars — Horizontal Bar Comparison `data | medium | light | none` Multi-item value comparison. Best for: market share, KPI benchmarks, quarterly comparisons. ```html

Market Share Comparison

Product A

70%

Product B

52%

Product C

38%

Product D

22%

``` **Variation**: Use `${accent}` for the highlighted/top bar to draw attention. --- ### content-stacked-bars — Stacked Progress Bars `data | medium | light | shadow` Multi-dimension proportional data. Best for: budget allocation, resource distribution, composition analysis. ```html

Budget Allocation by Department

Q1 2024

$2.4M Total

R&D 35%

Marketing 25%

Sales 20%

Ops 12%

Q2 2024

$2.8M Total

``` --- ### content-data-table — Structured Data Table `data | medium | light | none` Multi-row multi-column structured data. Best for: quarterly reports, feature comparisons, competitive analysis. ```html

Quarterly Performance Summary

Department

Q1

Q2

Q3

Q4

Engineering

$1.2M

$1.5M

$1.8M

$2.1M

Marketing

$800K

$920K

$1.1M

$1.3M

Sales

$2.0M

$2.3M

$2.5M

$2.8M

Total

$4.0M

$4.7M

$5.4M

$6.2M

``` --- ### content-quadrant-matrix — 2x2 Quadrant Matrix `data | medium | light | none` Two-axis classification framework. Best for: BCG matrix, priority matrix, SWOT, evaluation frameworks. ```html

Priority Matrix

Impact

Do First

High Impact + High Effort. Critical items requiring attention.

Quick Wins

High Impact + Low Effort. Prioritize for maximum ROI.

Schedule

Low Impact + High Effort. Plan for later.

Eliminate

Low Impact + Low Effort. Drop these tasks.

LOW Effort → HIGH

``` --- ### content-funnel — Sales/Conversion Funnel `data | medium | light | none` Multi-stage progressive filtering. Best for: sales pipeline, conversion funnel, qualification process. ```html

Sales Conversion Funnel

Leads: 10,000

Qualified: 6,500

Proposals: 3,200

Negotiation: 1,800

Closed: 850

8.5%

Overall Conversion Rate

46%

Qualified to Proposal Rate

``` --- ### content-before-after — Before vs After Comparison `data | medium | light | none` Side-by-side comparison panels. Best for: optimization results, before/after, pros/cons. ```html

Before vs After Optimization

B

Before

Load Time

4.2s

Bounce Rate

38%

Conversion

2.1%

A

After

Load Time

1.8s

Bounce Rate

22%

Conversion

4.7%

``` --- ### content-dashboard — Data Dashboard / KPI Grid `data | medium | light | shadow` Multi-metric overview. Best for: dashboards, weekly/monthly reports, KPI summaries. ```html

Monthly Performance Dashboard

$4.2M

Revenue

+12.3% vs last month

2,847

Active Users

+8.7% vs last month

94.2%

Uptime

+0.3% vs last month

156

New Signups

$148

Avg Revenue/User

4.6

NPS Score

23ms

Avg Response

``` --- ### content-pyramid — Pyramid / Layered Hierarchy `data | medium | light | none` Layered hierarchy. Best for: Maslow pyramid, org levels, tech stack layers, priority hierarchy. ```html

Strategy Implementation Pyramid

Vision & Mission

Strategic Objectives

Tactical Plans & Programs

Operations & Daily Execution

Top Level

Long-term direction, 5-10 year horizon

Strategy

3-5 year measurable targets

Tactics

1-2 year initiatives and projects

Operations

Daily tasks and short-term goals

```