| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720" |
| 2 | font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Treemap Chart Template |
| 6 | Purpose: Hierarchical data proportion visualization |
| 7 | Use cases: Budget allocation, market share, storage analysis, portfolio |
| 8 | Feature: Proportional tile layout, hierarchical labels, and semantic category colors |
| 9 | --> |
| 10 | <!-- Background --> |
| 11 | <rect width="1280" height="720" fill="#FAFBFC"/> |
| 12 | <!-- ==================== Header ==================== --> |
| 13 | <g id="header" data-pptx-bounds="40 15 1200 125"> |
| 14 | <text x="60" y="70" font-size="32" font-weight="800" fill="#0F172A">Annual Budget Allocation</text> |
| 15 | <text x="60" y="100" font-size="14" font-weight="700" fill="#64748B" letter-spacing="1">2025 BUDGET · TOTAL $12.0M · AREA REPRESENTS ALLOCATION %</text> |
| 16 | </g> |
| 17 | <!-- ==================== Treemap Area (1000x480) ==================== --> |
| 18 | <g id="treemap_chart" data-pptx-bounds="0 98 1142 544" data-pptx-replace-with="chart"> |
| 19 | <metadata type="application/json"> |
| 20 | { |
| 21 | "name": "treemap_chart", |
| 22 | "x": 60, |
| 23 | "y": 130, |
| 24 | "width": 1011.3, |
| 25 | "height": 480, |
| 26 | "type": "treemap", |
| 27 | "levels": [ |
| 28 | ["Human Resources", "Human Resources", "Human Resources", "Operations", "Operations", "Operations", "Marketing", "Marketing", "R&D", "Other"], |
| 29 | ["Salaries & Benefits", "Training", "Recruitment", "Office Space", "Equipment", "Daily Ops", "Advertising", "Brand Events", "R&D", "Other"] |
| 30 | ], |
| 31 | "values": [3.36, 0.72, 0.72, 1.5, 0.9, 0.6, 1.44, 0.96, 1.2, 0.6], |
| 32 | "parent_label_layout": "overlapping", |
| 33 | "style": {"colors": ["#0284C7", "#0EA5E9", "#38BDF8", "#059669", "#10B981", "#34D399", "#D97706", "#F59E0B", "#7C3AED", "#64748B"]} |
| 34 | } |
| 35 | </metadata> |
| 36 | <g id="treemapArea" transform="translate(60, 130)"> |
| 37 | <!-- 1. HUMAN RESOURCES (40%) - Sky Palette --> |
| 38 | <g id="hr_cost"> |
| 39 | <!-- 1.1 Salaries & Benefits (28%) --> |
| 40 | <rect x="0" y="0" width="400" height="336" rx="8" fill="#0284C7"/> |
| 41 | <text x="20" y="32" font-size="14" font-weight="800" fill="#E0F2FE" letter-spacing="1">HUMAN RESOURCES (40%)</text> |
| 42 | <text x="200" y="170" font-size="24" font-weight="800" fill="#FFFFFF" text-anchor="middle">Salaries & Benefits</text> |
| 43 | <text x="200" y="210" font-size="36" font-weight="800" fill="#FFFFFF" text-anchor="middle">$3.36M</text> |
| 44 | <text x="200" y="240" font-size="16" font-weight="700" fill="#BAE6FD" text-anchor="middle">28% of total</text> |
| 45 | <!-- 1.2 Training (6%) --> |
| 46 | <rect x="0" y="340" width="198" height="140" rx="8" fill="#0EA5E9"/> |
| 47 | <text x="99" y="395" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Training</text> |
| 48 | <text x="99" y="425" font-size="24" font-weight="800" fill="#FFFFFF" text-anchor="middle">$0.72M</text> |
| 49 | <text x="99" y="450" font-size="13" font-weight="700" fill="#E0F2FE" text-anchor="middle">6%</text> |
| 50 | <!-- 1.3 Recruitment (6%) --> |
| 51 | <rect x="202" y="340" width="198" height="140" rx="8" fill="#38BDF8"/> |
| 52 | <text x="301" y="395" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Recruitment</text> |
| 53 | <text x="301" y="425" font-size="24" font-weight="800" fill="#FFFFFF" text-anchor="middle">$0.72M</text> |
| 54 | <text x="301" y="450" font-size="13" font-weight="700" fill="#E0F2FE" text-anchor="middle">6%</text> |
| 55 | </g> |
| 56 | <!-- 2. OPERATIONS (25%) - Emerald Palette --> |
| 57 | <g id="operation_cost"> |
| 58 | <!-- 2.1 Office Space (12.5%) --> |
| 59 | <rect x="404" y="0" width="296" height="200" rx="8" fill="#059669"/> |
| 60 | <text x="424" y="32" font-size="14" font-weight="800" fill="#D1FAE5" letter-spacing="1">OPERATIONS (25%)</text> |
| 61 | <text x="552" y="110" font-size="20" font-weight="800" fill="#FFFFFF" text-anchor="middle">Office Space</text> |
| 62 | <text x="552" y="145" font-size="32" font-weight="800" fill="#FFFFFF" text-anchor="middle">$1.50M</text> |
| 63 | <text x="552" y="170" font-size="14" font-weight="700" fill="#A7F3D0" text-anchor="middle">12.5%</text> |
| 64 | <!-- 2.2 Equipment (7.5%) --> |
| 65 | <rect x="704" y="0" width="176" height="200" rx="8" fill="#10B981"/> |
| 66 | <text x="792" y="90" font-size="16" font-weight="800" fill="#FFFFFF" text-anchor="middle">Equipment</text> |
| 67 | <text x="792" y="125" font-size="24" font-weight="800" fill="#FFFFFF" text-anchor="middle">$0.90M</text> |
| 68 | <text x="792" y="150" font-size="13" font-weight="700" fill="#A7F3D0" text-anchor="middle">7.5%</text> |
| 69 | <!-- 2.3 Daily Ops (5%) --> |
| 70 | <rect x="884" y="0" width="116" height="200" rx="8" fill="#34D399"/> |
| 71 | <text x="942" y="90" font-size="14" font-weight="800" fill="#FFFFFF" text-anchor="middle">Daily Ops</text> |
| 72 | <text x="942" y="120" font-size="20" font-weight="800" fill="#FFFFFF" text-anchor="middle">$0.60M</text> |
| 73 | <text x="942" y="145" font-weight="700" fill="#A7F3D0" text-anchor="middle">5%</text> |
| 74 | </g> |
| 75 | <!-- 3. MARKETING (20%) - Amber Palette --> |
| 76 | <g id="marketing_cost"> |
| 77 | <!-- 3.1 Advertising (12%) --> |
| 78 | <rect x="404" y="204" width="356" height="156" rx="8" fill="#D97706"/> |
| 79 | <text x="424" y="236" font-size="14" font-weight="800" fill="#FEF3C7" letter-spacing="1">MARKETING (20%)</text> |
| 80 | <text x="582" y="295" font-size="20" font-weight="800" fill="#FFFFFF" text-anchor="middle">Advertising</text> |
| 81 | <text x="582" y="330" font-size="28" font-weight="800" fill="#FFFFFF" text-anchor="middle">$1.44M</text> |
| 82 | <!-- 3.2 Brand Events (8%) --> |
| 83 | <rect x="764" y="204" width="236" height="156" rx="8" fill="#F59E0B"/> |
| 84 | <text x="882" y="280" font-size="18" font-weight="800" fill="#FFFFFF" text-anchor="middle">Brand Events</text> |
| 85 | <text x="882" y="315" font-size="24" font-weight="800" fill="#FFFFFF" text-anchor="middle">$0.96M</text> |
| 86 | <text x="882" y="340" font-size="13" font-weight="700" fill="#FEF3C7" text-anchor="middle">8%</text> |
| 87 | </g> |
| 88 | <!-- 4. R&D (10%) - Violet Palette --> |
| 89 | <g id="rd_cost"> |
| 90 | <rect x="404" y="364" width="296" height="116" rx="8" fill="#7C3AED"/> |
| 91 | <text x="424" y="396" font-size="14" font-weight="800" fill="#EDE9FE" letter-spacing="1">R&D (10%)</text> |
| 92 | <text x="552" y="440" font-size="28" font-weight="800" fill="#FFFFFF" text-anchor="middle">$1.20M</text> |
| 93 | </g> |
| 94 | <!-- 5. OTHER (5%) - Slate Palette --> |
| 95 | <g id="other_cost"> |
| 96 | <rect x="704" y="364" width="296" height="116" rx="8" fill="#64748B"/> |
| 97 | <text x="724" y="396" font-size="14" font-weight="800" fill="#F1F5F9" letter-spacing="1">OTHER (5%)</text> |
| 98 | <text x="852" y="440" font-size="28" font-weight="800" fill="#FFFFFF" text-anchor="middle">$0.60M</text> |
| 99 | </g> |
| 100 | </g> |
| 101 | </g> |
| 102 | <!-- ==================== UI Panels ==================== --> |
| 103 | <!-- Dashboard Legend Panel --> |
| 104 | <g id="legend" data-pptx-bounds="1058 112 204 296" transform="translate(1080, 130)"> |
| 105 | <rect x="0" y="0" width="160" height="260" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5"/> |
| 106 | <text x="80" y="32" font-size="13" font-weight="800" fill="#0F172A" text-anchor="middle" letter-spacing="0.5">BUDGET SUMMARY</text> |
| 107 | <line x1="20" y1="50" x2="140" y2="50" stroke="#F1F5F9" stroke-width="2"/> |
| 108 | <rect x="20" y="65" width="16" height="16" rx="4" fill="#0284C7"/> |
| 109 | <text x="46" y="78" font-weight="700" fill="#475569">HR (40%)</text> |
| 110 | <rect x="20" y="95" width="16" height="16" rx="4" fill="#059669"/> |
| 111 | <text x="46" y="108" font-weight="700" fill="#475569">Ops (25%)</text> |
| 112 | <rect x="20" y="125" width="16" height="16" rx="4" fill="#D97706"/> |
| 113 | <text x="46" y="138" font-weight="700" fill="#475569">Market (20%)</text> |
| 114 | <rect x="20" y="155" width="16" height="16" rx="4" fill="#7C3AED"/> |
| 115 | <text x="46" y="168" font-weight="700" fill="#475569">R&D (10%)</text> |
| 116 | <rect x="20" y="185" width="16" height="16" rx="4" fill="#64748B"/> |
| 117 | <text x="46" y="198" font-weight="700" fill="#475569">Other (5%)</text> |
| 118 | <line x1="20" y1="215" x2="140" y2="215" stroke="#F1F5F9" stroke-width="2"/> |
| 119 | <text x="80" y="240" font-size="15" font-weight="800" fill="#0F172A" text-anchor="middle">Total: $12.0M</text> |
| 120 | </g> |
| 121 | <!-- Info Panel --> |
| 122 | <g id="note" data-pptx-bounds="1058 402 204 106" transform="translate(1080, 410)"> |
| 123 | <rect x="0" y="0" width="160" height="90" rx="12" fill="#F0F9FF" stroke="#BAE6FD" stroke-width="1.5"/> |
| 124 | <text x="16" y="28" font-weight="800" fill="#0284C7" letter-spacing="0.5">HOW TO READ</text> |
| 125 | <text x="16" y="48" font-weight="600" fill="#475569">Area size directly<tspan x="16" dy="16">represents the</tspan><tspan x="16" dy="16">budget allocation %</tspan></text> |
| 126 | </g> |
| 127 | <!-- ==================== Footer ==================== --> |
| 128 | <g id="source" data-pptx-bounds="40 666 1200 39"> |
| 129 | <text x="60" y="690" font-size="13" font-weight="600" fill="#94A3B8">Data Source: Finance Dept Annual Budget Report</text> |
| 130 | </g> |
| 131 | </svg> |
| 132 |