| 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', 'PingFang SC', 'Microsoft YaHei', sans-serif" |
| 3 | font-size="12"> |
| 4 | <!-- |
| 5 | Bubble Chart Template |
| 6 | Usage: 3D data visualization (X, Y, bubble size) |
| 7 | Scenarios: Market size vs growth vs share, risk assessment, competitor analysis |
| 8 | Supports: Multiple bubbles, size represents 3rd dimension |
| 9 | --> |
| 10 | <defs> |
| 11 | <!-- Bubble Gradient (Blue) --> |
| 12 | <radialGradient id="bubbleGrad1" cx="30%" cy="30%"> |
| 13 | <stop offset="0%" style="stop-color:#60A5FA;stop-opacity:0.9" /> |
| 14 | <stop offset="100%" style="stop-color:#2563EB;stop-opacity:0.7" /> |
| 15 | </radialGradient> |
| 16 | <!-- Bubble Gradient (Green) --> |
| 17 | <radialGradient id="bubbleGrad2" cx="30%" cy="30%"> |
| 18 | <stop offset="0%" style="stop-color:#34D399;stop-opacity:0.9" /> |
| 19 | <stop offset="100%" style="stop-color:#059669;stop-opacity:0.7" /> |
| 20 | </radialGradient> |
| 21 | <!-- Bubble Gradient (Orange) --> |
| 22 | <radialGradient id="bubbleGrad3" cx="30%" cy="30%"> |
| 23 | <stop offset="0%" style="stop-color:#FBBF24;stop-opacity:0.9" /> |
| 24 | <stop offset="100%" style="stop-color:#D97706;stop-opacity:0.7" /> |
| 25 | </radialGradient> |
| 26 | <!-- Bubble Gradient (Purple) --> |
| 27 | <radialGradient id="bubbleGrad4" cx="30%" cy="30%"> |
| 28 | <stop offset="0%" style="stop-color:#A78BFA;stop-opacity:0.9" /> |
| 29 | <stop offset="100%" style="stop-color:#7C3AED;stop-opacity:0.7" /> |
| 30 | </radialGradient> |
| 31 | <!-- Bubble Gradient (Red) --> |
| 32 | <radialGradient id="bubbleGrad5" cx="30%" cy="30%"> |
| 33 | <stop offset="0%" style="stop-color:#FB7185;stop-opacity:0.9" /> |
| 34 | <stop offset="100%" style="stop-color:#E11D48;stop-opacity:0.7" /> |
| 35 | </radialGradient> |
| 36 | </defs> |
| 37 | <!-- Background --> |
| 38 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 39 | <!-- Title --> |
| 40 | <g id="header" data-pptx-bounds="60 25 760 75"> |
| 41 | <text x="60" y="55" |
| 42 | font-size="34" font-weight="bold" fill="#0F172A">Product Line Market Positioning</text> |
| 43 | <text x="60" y="90" |
| 44 | font-size="18" fill="#64748B">Market Size vs Growth vs Share · Bubble Size = Market Share</text> |
| 45 | </g> |
| 46 | <!-- Chart Area --> |
| 47 | <g id="bubble_chart" data-pptx-bounds="20 110 1042 540" data-pptx-replace-with="chart"> |
| 48 | <metadata type="application/json"> |
| 49 | { |
| 50 | "name": "bubble_chart", |
| 51 | "x": 20, |
| 52 | "y": 122, |
| 53 | "width": 1041.45, |
| 54 | "height": 506.75, |
| 55 | "type": "bubble", |
| 56 | "series": [ |
| 57 | {"name": "Product A", "points": [[120, 35, 28]]}, |
| 58 | {"name": "Product B", "points": [[85, 25, 18]]}, |
| 59 | {"name": "Product C", "points": [[45, 42, 12]]}, |
| 60 | {"name": "Product D", "points": [[130, 8, 25]]}, |
| 61 | {"name": "Product E", "points": [[30, -5, 8]]}, |
| 62 | {"name": "Product F", "points": [[65, 15, 9]]} |
| 63 | ], |
| 64 | "style": {"colors": ["#10B981", "#7C3AED", "#F59E0B", "#2563EB", "#E11D48", "#059669"]} |
| 65 | } |
| 66 | </metadata> |
| 67 | <g id="chartArea"> |
| 68 | <!-- Quadrant Background --> |
| 69 | <rect x="160" y="130" width="440" height="215" fill="#FFF1F2" opacity="0.3"/> |
| 70 | <rect x="600" y="130" width="440" height="215" fill="#ECFDF5" opacity="0.3"/> |
| 71 | <rect x="160" y="345" width="440" height="215" fill="#FFFBEB" opacity="0.3"/> |
| 72 | <rect x="600" y="345" width="440" height="215" fill="#EFF6FF" opacity="0.3"/> |
| 73 | <!-- Quadrant Labels --> |
| 74 | <text x="380" y="160" |
| 75 | font-size="14" fill="#DC2626" text-anchor="middle">Low Size · High Growth</text> |
| 76 | <text x="380" y="178" |
| 77 | fill="#FB7185" text-anchor="middle">Star Product ⭐</text> |
| 78 | <text x="820" y="160" |
| 79 | font-size="14" fill="#059669" text-anchor="middle">High Size · High Growth</text> |
| 80 | <text x="820" y="178" |
| 81 | fill="#34D399" text-anchor="middle">Bull Product 🐂</text> |
| 82 | <text x="380" y="530" |
| 83 | font-size="14" fill="#D97706" text-anchor="middle">Low Size · Low Growth</text> |
| 84 | <text x="380" y="548" |
| 85 | fill="#FBBF24" text-anchor="middle">Problem Product ❓</text> |
| 86 | <text x="820" y="530" |
| 87 | font-size="14" fill="#2563EB" text-anchor="middle">High Size · Low Growth</text> |
| 88 | <text x="820" y="548" |
| 89 | fill="#60A5FA" text-anchor="middle">Cash Cow 💰</text> |
| 90 | <!-- Grid Lines --> |
| 91 | <line x1="160" y1="345" x2="1040" y2="345" stroke="#CBD5E1" stroke-width="2" stroke-dasharray="6,3"/> |
| 92 | <line x1="600" y1="130" x2="600" y2="560" stroke="#CBD5E1" stroke-width="2" stroke-dasharray="6,3"/> |
| 93 | <!-- Y-axis Grid Lines --> |
| 94 | <line x1="160" y1="200" x2="1040" y2="200" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 95 | <line x1="160" y1="270" x2="1040" y2="270" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 96 | <line x1="160" y1="420" x2="1040" y2="420" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 97 | <line x1="160" y1="490" x2="1040" y2="490" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 98 | <!-- X-axis Grid Lines (uniform spacing: 1 unit = 5.5px, 20 units = 110px) --> |
| 99 | <line x1="270" y1="130" x2="270" y2="560" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 100 | <line x1="380" y1="130" x2="380" y2="560" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 101 | <line x1="490" y1="130" x2="490" y2="560" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 102 | <line x1="710" y1="130" x2="710" y2="560" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 103 | <line x1="820" y1="130" x2="820" y2="560" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 104 | <line x1="930" y1="130" x2="930" y2="560" stroke="#E0E0E0" stroke-width="1" stroke-dasharray="4,4"/> |
| 105 | <!-- Y-axis Labels --> |
| 106 | <text x="145" y="565" |
| 107 | font-size="13" fill="#64748B" text-anchor="end">-10%</text> |
| 108 | <text x="145" y="495" |
| 109 | font-size="13" fill="#64748B" text-anchor="end">0%</text> |
| 110 | <text x="145" y="425" |
| 111 | font-size="13" fill="#64748B" text-anchor="end">10%</text> |
| 112 | <text x="145" y="350" |
| 113 | font-size="13" fill="#64748B" text-anchor="end">20%</text> |
| 114 | <text x="145" y="275" |
| 115 | font-size="13" fill="#64748B" text-anchor="end">30%</text> |
| 116 | <text x="145" y="205" |
| 117 | font-size="13" fill="#64748B" text-anchor="end">40%</text> |
| 118 | <text x="145" y="135" |
| 119 | font-size="13" fill="#64748B" text-anchor="end">50%</text> |
| 120 | <!-- Y-axis Title --> |
| 121 | <text x="35" y="345" |
| 122 | font-size="15" fill="#475569" text-anchor="middle" transform="rotate(-90, 35, 345)">Market Growth Rate (%)</text> |
| 123 | <!-- X-axis Labels (uniform spacing: tick n → x = 160 + n × 5.5) --> |
| 124 | <text x="160" y="590" |
| 125 | font-size="13" fill="#64748B" text-anchor="middle">0</text> |
| 126 | <text x="270" y="590" |
| 127 | font-size="13" fill="#64748B" text-anchor="middle">20</text> |
| 128 | <text x="380" y="590" |
| 129 | font-size="13" fill="#64748B" text-anchor="middle">40</text> |
| 130 | <text x="490" y="590" |
| 131 | font-size="13" fill="#64748B" text-anchor="middle">60</text> |
| 132 | <text x="600" y="590" |
| 133 | font-size="13" fill="#64748B" text-anchor="middle">80</text> |
| 134 | <text x="710" y="590" |
| 135 | font-size="13" fill="#64748B" text-anchor="middle">100</text> |
| 136 | <text x="820" y="590" |
| 137 | font-size="13" fill="#64748B" text-anchor="middle">120</text> |
| 138 | <text x="930" y="590" |
| 139 | font-size="13" fill="#64748B" text-anchor="middle">140</text> |
| 140 | <text x="1040" y="590" |
| 141 | font-size="13" fill="#64748B" text-anchor="middle">160</text> |
| 142 | <!-- X-axis Title --> |
| 143 | <text x="600" y="625" |
| 144 | font-size="15" fill="#475569" text-anchor="middle">Market Size (100M)</text> |
| 145 | <!-- Axes --> |
| 146 | <line x1="160" y1="130" x2="160" y2="560" stroke="#94A3B8" stroke-width="2"/> |
| 147 | <line x1="160" y1="560" x2="1040" y2="560" stroke="#94A3B8" stroke-width="2"/> |
| 148 | <!-- |
| 149 | Bubble Data: |
| 150 | X: Market Size (100M) 0-160, every 20 = 110px (1 unit = 5.5px), formula: x = 160 + size * 5.5 |
| 151 | Y: Growth Rate -10% to 50%, every 10% = 70px (approx), baseline (0%) at y=490 |
| 152 | Size: Market Share 5%-35%, radius 15-60px |
| 153 | Product A: Size 120, Growth 35%, Share 28% -> x=820, y=245, r=50 |
| 154 | Product B: Size 85, Growth 25%, Share 18% -> x=627.5, y=315, r=38 |
| 155 | Product C: Size 45, Growth 42%, Share 12% -> x=407.5, y=196, r=28 |
| 156 | Product D: Size 130, Growth 8%, Share 25% -> x=875, y=434, r=45 |
| 157 | Product E: Size 30, Growth -5%, Share 8% -> x=325, y=525, r=22 |
| 158 | Product F: Size 65, Growth 15%, Share 9% -> x=517.5, y=385, r=24 |
| 159 | --> |
| 160 | <!-- Bubble F: Product F (size=65 → x=517.5, growth=15%) --> |
| 161 | <g id="bubble-f"> |
| 162 | <circle cx="517.5" cy="385" r="24" fill="url(#bubbleGrad2)"/> |
| 163 | <text x="517.5" y="390" |
| 164 | font-weight="600" fill="#FFFFFF" text-anchor="middle">F</text> |
| 165 | </g> |
| 166 | <!-- Bubble E: Product E (size=30 → x=325, growth=-5%) --> |
| 167 | <g id="bubble-e"> |
| 168 | <circle cx="325" cy="525" r="22" fill="url(#bubbleGrad5)"/> |
| 169 | <text x="325" y="530" |
| 170 | font-weight="600" fill="#FFFFFF" text-anchor="middle">E</text> |
| 171 | </g> |
| 172 | <!-- Bubble C: Product C (size=45 → x=407.5, growth=42%) --> |
| 173 | <g id="bubble-c"> |
| 174 | <circle cx="407.5" cy="196" r="28" fill="url(#bubbleGrad3)"/> |
| 175 | <text x="407.5" y="201" |
| 176 | font-weight="600" fill="#FFFFFF" text-anchor="middle">C</text> |
| 177 | </g> |
| 178 | <!-- Bubble B: Product B (size=85 → x=627.5, growth=25%) --> |
| 179 | <g id="bubble-b"> |
| 180 | <circle cx="627.5" cy="315" r="38" fill="url(#bubbleGrad4)"/> |
| 181 | <text x="627.5" y="320" |
| 182 | font-size="13" font-weight="600" fill="#FFFFFF" text-anchor="middle">B</text> |
| 183 | </g> |
| 184 | <!-- Bubble D: Product D (size=130 → x=875, growth=8%) --> |
| 185 | <g id="bubble-d"> |
| 186 | <circle cx="875" cy="434" r="45" fill="url(#bubbleGrad1)"/> |
| 187 | <text x="875" y="439" |
| 188 | font-size="14" font-weight="600" fill="#FFFFFF" text-anchor="middle">D</text> |
| 189 | </g> |
| 190 | <!-- Bubble A: Product A (size=120 → x=820, growth=35%) --> |
| 191 | <g id="bubble-a"> |
| 192 | <circle cx="820" cy="245" r="50" fill="url(#bubbleGrad2)"/> |
| 193 | <text x="820" y="250" |
| 194 | font-size="15" font-weight="600" fill="#FFFFFF" text-anchor="middle">A</text> |
| 195 | </g> |
| 196 | </g> |
| 197 | </g> |
| 198 | <!-- Product List --> |
| 199 | <g id="productList" transform="translate(1060, 130)" data-pptx-bounds="1060 130 180 320"> |
| 200 | <rect x="0" y="0" width="180" height="320" rx="8" fill="#F8F9FA" stroke="#E0E0E0" stroke-width="1"/> |
| 201 | <text x="90" y="28" |
| 202 | font-size="14" font-weight="600" fill="#0F172A" text-anchor="middle">Product List</text> |
| 203 | <line x1="15" y1="42" x2="165" y2="42" stroke="#E0E0E0" stroke-width="1"/> |
| 204 | <!-- Product A --> |
| 205 | <g id="list-item-a"> |
| 206 | <circle cx="30" cy="70" r="12" fill="url(#bubbleGrad2)"/> |
| 207 | <text x="50" y="66" |
| 208 | font-size="13" font-weight="600" fill="#0F172A">Product A</text> |
| 209 | <text x="50" y="82" |
| 210 | fill="#64748B">12B | +35% | 28%</text> |
| 211 | </g> |
| 212 | <!-- Product B --> |
| 213 | <g id="list-item-b"> |
| 214 | <circle cx="30" cy="115" r="10" fill="url(#bubbleGrad4)"/> |
| 215 | <text x="50" y="111" |
| 216 | font-size="13" font-weight="600" fill="#0F172A">Product B</text> |
| 217 | <text x="50" y="127" |
| 218 | fill="#64748B">8.5B | +25% | 18%</text> |
| 219 | </g> |
| 220 | <!-- Product C --> |
| 221 | <g id="list-item-c"> |
| 222 | <circle cx="30" cy="160" r="8" fill="url(#bubbleGrad3)"/> |
| 223 | <text x="50" y="156" |
| 224 | font-size="13" font-weight="600" fill="#0F172A">Product C</text> |
| 225 | <text x="50" y="172" |
| 226 | fill="#64748B">4.5B | +42% | 12%</text> |
| 227 | </g> |
| 228 | <!-- Product D --> |
| 229 | <g id="list-item-d"> |
| 230 | <circle cx="30" cy="205" r="11" fill="url(#bubbleGrad1)"/> |
| 231 | <text x="50" y="201" |
| 232 | font-size="13" font-weight="600" fill="#0F172A">Product D</text> |
| 233 | <text x="50" y="217" |
| 234 | fill="#64748B">13B | +8% | 25%</text> |
| 235 | </g> |
| 236 | <!-- Product E --> |
| 237 | <g id="list-item-e"> |
| 238 | <circle cx="30" cy="250" r="7" fill="url(#bubbleGrad5)"/> |
| 239 | <text x="50" y="246" |
| 240 | font-size="13" font-weight="600" fill="#0F172A">Product E</text> |
| 241 | <text x="50" y="262" |
| 242 | fill="#64748B">3B | -5% | 8%</text> |
| 243 | </g> |
| 244 | <!-- Product F --> |
| 245 | <g id="list-item-f"> |
| 246 | <circle cx="30" cy="295" r="7" fill="url(#bubbleGrad2)"/> |
| 247 | <text x="50" y="291" |
| 248 | font-size="13" font-weight="600" fill="#0F172A">Product F</text> |
| 249 | <text x="50" y="307" |
| 250 | fill="#64748B">6.5B | +15% | 9%</text> |
| 251 | </g> |
| 252 | </g> |
| 253 | <!-- Bubble Size Legend --> |
| 254 | <g id="sizeLegend" transform="translate(1060, 470)" data-pptx-bounds="1060 470 180 90"> |
| 255 | <rect x="0" y="0" width="180" height="90" rx="8" fill="#F8F9FA" stroke="#E0E0E0" stroke-width="1"/> |
| 256 | <text x="90" y="25" |
| 257 | fill="#64748B" text-anchor="middle">Bubble Size = Market Share</text> |
| 258 | <circle cx="40" cy="60" r="10" fill="#CBD5E1"/> |
| 259 | <text x="40" y="82" |
| 260 | fill="#64748B" text-anchor="middle">10%</text> |
| 261 | <circle cx="90" cy="55" r="18" fill="#CBD5E1"/> |
| 262 | <text x="90" y="82" |
| 263 | fill="#64748B" text-anchor="middle">20%</text> |
| 264 | <circle cx="145" cy="48" r="25" fill="#CBD5E1"/> |
| 265 | <text x="145" y="82" |
| 266 | fill="#64748B" text-anchor="middle">30%</text> |
| 267 | </g> |
| 268 | <!-- Data Source --> |
| 269 | <g id="source" data-pptx-bounds="60 675 340 25"> |
| 270 | <text x="60" y="695" |
| 271 | font-size="14" fill="#94A3B8">Data Source: Market Research Department</text> |
| 272 | </g> |
| 273 | </svg> |
| 274 |