147 lines
14 KiB
XML
147 lines
14 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
|
|
<!--
|
|
Scatter Chart Template
|
|
Purpose: Correlation analysis, data distribution
|
|
Use cases: Ad spend vs Revenue, Height vs Weight, Investment vs Return
|
|
Feature: Linear regression lines, confidence intervals, AI insights panel
|
|
-->
|
|
<defs>
|
|
<!-- Modern Shadow for Points -->
|
|
<filter id="pointShadow" x="-20%" y="-20%" width="140%" height="140%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
|
|
<feOffset dx="0" dy="1" result="offsetblur"/>
|
|
<feFlood flood-color="#0F172A" flood-opacity="0.15" result="shadowColor"/>
|
|
<feComposite in="shadowColor" in2="offsetblur" operator="in" result="shadow"/>
|
|
<feMerge>
|
|
<feMergeNode in="shadow"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
<!-- Deep Shadow for Panels -->
|
|
<filter id="panelShadow" x="-10%" y="-10%" width="120%" height="120%">
|
|
<feGaussianBlur in="SourceAlpha" stdDeviation="6"/>
|
|
<feOffset dx="0" dy="4" result="offsetblur"/>
|
|
<feFlood flood-color="#0F172A" flood-opacity="0.08" result="shadowColor"/>
|
|
<feComposite in="shadowColor" in2="offsetblur" operator="in" result="shadow"/>
|
|
<feMerge>
|
|
<feMergeNode in="shadow"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
<!-- Background -->
|
|
<rect width="1280" height="720" fill="#F8FAFC"/>
|
|
<!-- ==================== Header ==================== -->
|
|
<text x="60" y="70" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="32" font-weight="800" fill="#0F172A">Ad Spend vs. Sales Revenue Correlation</text>
|
|
<text x="60" y="100" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="700" fill="#64748B" letter-spacing="1">2025 REGIONAL DATA · SAMPLE SIZE N=28</text>
|
|
<!-- ==================== Chart Area ==================== -->
|
|
<g id="chartArea">
|
|
<!-- Horizontal Grid Lines -->
|
|
<line x1="120" y1="560" x2="1020" y2="560" stroke="#E2E8F0" stroke-width="1.5"/>
|
|
<line x1="120" y1="480" x2="1020" y2="480" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<line x1="120" y1="400" x2="1020" y2="400" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<line x1="120" y1="320" x2="1020" y2="320" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<line x1="120" y1="240" x2="1020" y2="240" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<line x1="120" y1="160" x2="1020" y2="160" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<!-- Vertical Grid Lines -->
|
|
<line x1="120" y1="160" x2="120" y2="560" stroke="#E2E8F0" stroke-width="1.5"/>
|
|
<line x1="300" y1="160" x2="300" y2="560" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<line x1="480" y1="160" x2="480" y2="560" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<line x1="660" y1="160" x2="660" y2="560" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<line x1="840" y1="160" x2="840" y2="560" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<line x1="1020" y1="160" x2="1020" y2="560" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<!-- Y-Axis Labels -->
|
|
<text x="105" y="565" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="end">0</text>
|
|
<text x="105" y="485" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="end">200</text>
|
|
<text x="105" y="405" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="end">400</text>
|
|
<text x="105" y="325" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="end">600</text>
|
|
<text x="105" y="245" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="end">800</text>
|
|
<text x="105" y="165" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="end">1,000</text>
|
|
<!-- Y-Axis Title -->
|
|
<text x="45" y="360" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15" font-weight="700" fill="#475569" text-anchor="middle" transform="rotate(-90, 45, 360)">Sales Revenue ($K)</text>
|
|
<!-- X-Axis Labels -->
|
|
<text x="120" y="585" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="middle">0</text>
|
|
<text x="300" y="585" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="middle">20</text>
|
|
<text x="480" y="585" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="middle">40</text>
|
|
<text x="660" y="585" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="middle">60</text>
|
|
<text x="840" y="585" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="middle">80</text>
|
|
<text x="1020" y="585" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="600" fill="#64748B" text-anchor="middle">100</text>
|
|
<!-- X-Axis Title -->
|
|
<text x="570" y="625" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="15" font-weight="700" fill="#475569" text-anchor="middle">Ad Spend ($K)</text>
|
|
<!-- Main Axes Lines -->
|
|
<line x1="120" y1="160" x2="120" y2="560" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round"/>
|
|
<line x1="120" y1="560" x2="1020" y2="560" stroke="#94A3B8" stroke-width="2.5" stroke-linecap="round"/>
|
|
<!-- chart-plot-area: 120,160,1020,560 -->
|
|
<!-- Confidence Interval Areas -->
|
|
<polygon points="210,483 975,207 975,257 210,533" fill="#4F46E5" fill-opacity="0.08"/>
|
|
<polygon points="228,456 1002,288 1002,328 228,496" fill="#E11D48" fill-opacity="0.08"/>
|
|
<!-- Linear Regression Trend Lines -->
|
|
<line x1="210" y1="508" x2="975" y2="232" stroke="#4F46E5" stroke-width="3" stroke-dasharray="6,4"/>
|
|
<line x1="228" y1="476" x2="1002" y2="308" stroke="#E11D48" stroke-width="3" stroke-dasharray="6,4"/>
|
|
<!-- Online Series Data Points (Indigo) -->
|
|
<circle cx="210" cy="508" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="255" cy="496" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="318" cy="464" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="372" cy="452" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="435" cy="424" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="498" cy="404" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="552" cy="392" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="615" cy="368" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="660" cy="340" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="732" cy="328" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="795" cy="296" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="858" cy="284" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="912" cy="252" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="975" cy="232" r="7" fill="#4F46E5" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<!-- Offline Series Data Points (Rose) -->
|
|
<circle cx="228" cy="476" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="282" cy="460" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="345" cy="448" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="390" cy="444" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="462" cy="424" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="525" cy="412" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="588" cy="396" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="642" cy="388" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="705" cy="372" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="768" cy="356" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="822" cy="340" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="885" cy="328" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="948" cy="312" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
<circle cx="1002" cy="308" r="7" fill="#E11D48" stroke="#FFFFFF" stroke-width="2.5" filter="url(#pointShadow)"/>
|
|
</g>
|
|
<!-- ==================== Right Dashboard Panel ==================== -->
|
|
<g id="dashboardPanel">
|
|
<!-- Dashboard Base -->
|
|
<rect x="1060" y="160" width="180" height="400" rx="12" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5" filter="url(#panelShadow)"/>
|
|
<!-- Header -->
|
|
<text x="1150" y="195" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="800" fill="#0F172A" text-anchor="middle">Statistical Summary</text>
|
|
<line x1="1060" y1="210" x2="1240" y2="210" stroke="#F1F5F9" stroke-width="1.5"/>
|
|
<!-- Online Series Legend & Stats -->
|
|
<rect x="1080" y="225" width="12" height="12" rx="3" fill="#4F46E5"/>
|
|
<text x="1100" y="236" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="700" fill="#1E293B">Online</text>
|
|
<text x="1080" y="260" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="600" fill="#64748B">R² Score</text>
|
|
<text x="1220" y="260" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="800" fill="#0F172A" text-anchor="end">0.94</text>
|
|
<text x="1080" y="280" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="600" fill="#64748B">ROI Slope</text>
|
|
<text x="1220" y="280" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="800" fill="#4F46E5" text-anchor="end">6.8x</text>
|
|
<!-- Separator -->
|
|
<line x1="1080" y1="298" x2="1220" y2="298" stroke="#F1F5F9" stroke-width="1"/>
|
|
<!-- Offline Series Legend & Stats -->
|
|
<rect x="1080" y="315" width="12" height="12" rx="3" fill="#E11D48"/>
|
|
<text x="1100" y="326" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="14" font-weight="700" fill="#1E293B">Offline</text>
|
|
<text x="1080" y="350" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="600" fill="#64748B">R² Score</text>
|
|
<text x="1220" y="350" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="800" fill="#0F172A" text-anchor="end">0.88</text>
|
|
<text x="1080" y="370" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="600" fill="#64748B">ROI Slope</text>
|
|
<text x="1220" y="370" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="800" fill="#E11D48" text-anchor="end">5.2x</text>
|
|
<!-- AI Insight Box -->
|
|
<rect x="1075" y="405" width="150" height="140" rx="8" fill="#EEF2FF" stroke="#C7D2FE" stroke-width="1"/>
|
|
<text x="1090" y="430" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="800" fill="#4338CA">💡 AI Insight</text>
|
|
<text x="1090" y="455" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="600" fill="#3730A3">Online ROI</text>
|
|
<text x="1090" y="475" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="600" fill="#3730A3">outperforms offline</text>
|
|
<text x="1090" y="495" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="12" font-weight="800" fill="#312E81">by 31%.</text>
|
|
<text x="1090" y="525" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="10" font-weight="700" fill="#4338CA">Recommendation:</text>
|
|
<text x="1090" y="538" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="11" font-weight="800" fill="#312E81">SCALE ONLINE SPEND</text>
|
|
</g>
|
|
<!-- ==================== Footer ==================== -->
|
|
<text x="60" y="690" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-size="13" font-weight="600" fill="#94A3B8">Data Source: Marketing Analytics Department</text>
|
|
</svg>
|