Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ComicLab - Advanced Research Dashboard</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| fontFamily: { | |
| mono: ['IBM Plex Mono', 'monospace'], | |
| }, | |
| colors: { | |
| lab: { | |
| dark: '#121212', | |
| panel: '#1e1e1e', | |
| border: '#333333', | |
| accent: '#00ff88', | |
| highlight: '#0088ff', | |
| warning: '#ff6600', | |
| danger: '#ff0033', | |
| teal: '#00f5d4', | |
| purple: '#9b5de5' | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #121212; | |
| color: #e0e0e0; | |
| font-family: 'IBM Plex Mono', monospace; | |
| } | |
| .data-panel { | |
| border: 1px solid #333; | |
| background-color: #1e1e1e; | |
| } | |
| .data-header { | |
| border-bottom: 1px solid #333; | |
| background-color: #1a1a1a; | |
| } | |
| .data-table { | |
| font-size: 0.875rem; | |
| } | |
| .data-table th { | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| font-size: 0.75rem; | |
| letter-spacing: 0.05em; | |
| } | |
| .data-table td, .data-table th { | |
| padding: 0.5rem 1rem; | |
| border-bottom: 1px solid #333333; | |
| } | |
| .data-value { | |
| font-family: 'IBM Plex Mono', monospace; | |
| font-weight: 600; | |
| } | |
| .positive-trend { | |
| color: #00ff88; | |
| } | |
| .negative-trend { | |
| color: #ff0033; | |
| } | |
| .neutral-trend { | |
| color: #0088ff; | |
| } | |
| .status-indicator { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .trend-icon { | |
| margin-right: 4px; | |
| } | |
| .section-divider { | |
| border: none; | |
| border-top: 1px solid #333; | |
| margin: 1.5rem 0; | |
| } | |
| .metric-card { | |
| background-color: #252525; | |
| border-left: 4px solid; | |
| padding: 0.75rem 1rem; | |
| } | |
| .metric-title { | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| opacity: 0.7; | |
| } | |
| .metric-value { | |
| font-size: 1.5rem; | |
| line-height: 1; | |
| margin: 0.25rem 0 0.5rem; | |
| } | |
| .chart-container { | |
| position: relative; | |
| height: 250px; | |
| width: 100%; | |
| } | |
| .progress-bar { | |
| height: 4px; | |
| background-color: #333; | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .progress-value { | |
| height: 100%; | |
| } | |
| .grid-point { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| display: inline-block; | |
| margin-right: 6px; | |
| } | |
| .kpi-badge { | |
| font-size: 0.7rem; | |
| padding: 2px 6px; | |
| border-radius: 10px; | |
| display: inline-flex; | |
| align-items: center; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-lab-dark text-gray-300 font-mono"> | |
| <header class="border-b border-lab-border bg-lab-dark sticky top-0 z-10"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-lab-accent font-bold text-xl">COMIC</span> | |
| <span class="text-lab-highlight font-bold text-xl">RESEARCH</span> | |
| <span class="text-xs px-2 py-1 bg-lab-panel rounded">v3.1.0</span> | |
| </div> | |
| <div class="text-xs text-gray-400"> | |
| <span class="mr-4">Last updated: <span class="text-gray-100">2023-11-16 09:42:18 UTC</span></span> | |
| <span>Data source: <span class="text-gray-100">research_api/v3</span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Executive Analysis --> | |
| <section class="mb-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <!-- Market Growth Chart --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">MARKET GROWTH PROJECTIONS</h3> | |
| <span class="text-xs bg-lab-panel px-2 py-1 rounded">by genre</span> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="marketGrowthChart"></canvas> | |
| </div> | |
| <div class="mt-3 text-xs grid grid-cols-4 gap-2"> | |
| <div class="flex items-center"><span class="grid-point bg-[#00ff88]"></span> Action</div> | |
| <div class="flex items-center"><span class="grid-point bg-[#0088ff]"></span> Fantasy</div> | |
| <div class="flex items-center"><span class="grid-point bg-[#9b5de5]"></span> Romance</div> | |
| <div class="flex items-center"><span class="grid-point bg-[#ff6600]"></span> Horror</div> | |
| </div> | |
| </div> | |
| <!-- Demographic Breakdown --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">READER DEMOGRAPHICS</h3> | |
| <span class="text-xs bg-lab-panel px-2 py-1 rounded">latest survey</span> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="demographicChart"></canvas> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mt-2 text-xs text-center"> | |
| <div> | |
| <div class="font-bold">Gender</div> | |
| <div>Male: 48%</div> | |
| <div>Female: 49%</div> | |
| <div>Other: 3%</div> | |
| </div> | |
| <div> | |
| <div class="font-bold">Age Groups</div> | |
| <div>13-17: 22%</div> | |
| <div>18-24: 41%</div> | |
| <div>25-34: 28%</div> | |
| </div> | |
| <div> | |
| <div class="font-bold">Engagement</div> | |
| <div>Daily: 34%</div> | |
| <div>Weekly: 52%</div> | |
| <div>Monthly: 14%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <!-- Key Performance Indicators --> | |
| <div class="data-panel rounded-lg p-3"> | |
| <div class="text-xs mb-2">MARKET SHARE GROWTH</div> | |
| <div class="flex justify-between items-end mb-1"> | |
| <span class="text-xl data-value">17.2%</span> | |
| <span class="text-xs positive-trend">+3.4% YoY</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-value bg-lab-accent" style="width: 70%"></div> | |
| </div> | |
| <div class="text-xs mt-1 flex justify-between"> | |
| <span>2022: 13.8%</span> | |
| <span>Forecast: 21%</span> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg p-3"> | |
| <div class="text-xs mb-2">AVG. REVENUE/USER</div> | |
| <div class="flex justify-between items-end mb-1"> | |
| <span class="text-xl data-value">$3.42</span> | |
| <span class="text-xs positive-trend">+11.1% YoY</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-value bg-lab-highlight" style="width: 65%"></div> | |
| </div> | |
| <div class="text-xs mt-1 flex justify-between"> | |
| <span>2022: $2.89</span> | |
| <span>Forecast: $4.15</span> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg p-3"> | |
| <div class="text-xs mb-2">CONTENT RETENTION</div> | |
| <div class="flex justify-between items-end mb-1"> | |
| <span class="text-xl data-value">87%</span> | |
| <span class="text-xs positive-trend">+2.8% YoY</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-value bg-lab-teal" style="width: 87%"></div> | |
| </div> | |
| <div class="text-xs mt-1 flex justify-between"> | |
| <span>2022: 84.2%</span> | |
| <span>Forecast: 89%</span> | |
| </div> | |
| </div> | |
| <div class="data-panel rounded-lg p-3"> | |
| <div class="text-xs mb-2">NEW READER ACQUISITION</div> | |
| <div class="flex justify-between items-end mb-1"> | |
| <span class="text-xl data-value">28.4K</span> | |
| <span class="text-xs negative-trend">-4.2% YoY</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-value bg-lab-warning" style="width: 45%"></div> | |
| </div> | |
| <div class="text-xs mt-1 flex justify-between"> | |
| <span>2022: 29.7K</span> | |
| <span>Forecast: 25K</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="section-divider"> | |
| <!-- Deep Demographic Analysis --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4">DEMOGRAPHIC DEEP DIVE</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <!-- Age Distribution by Genre --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-4"> | |
| <h3 class="font-semibold">AGE DISTRIBUTION BY GENRE</h3> | |
| <div class="text-xs text-gray-400 mt-1">Average reader age with engagement</div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="ageGenreChart"></canvas> | |
| </div> | |
| <div class="text-xs mt-3 grid grid-cols-2 gap-1"> | |
| <div><span class="text-lab-highlight">Action:</span> Avg. age 21.4 | Peak 18-24</div> | |
| <div><span class="text-lab-teal">Fantasy:</span> Avg. age 22.7 | Peak 18-24</div> | |
| <div><span class="text-lab-purple">Romance:</span> Avg. age 24.2 | Peak 18-30</div> | |
| <div><span class="text-lab-warning">Horror:</span> Avg. age 25.1 | Peak 22-30</div> | |
| </div> | |
| </div> | |
| <!-- Gender Preferences --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-4"> | |
| <h3 class="font-semibold">GENDER PREFERENCES</h3> | |
| <div class="text-xs text-gray-400 mt-1">Content consumption by gender</div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="genderPreferenceChart"></canvas> | |
| </div> | |
| <div class="text-xs mt-3"> | |
| <div> | |
| <span class="text-lab-highlight">Male:</span> 72% Action, 14% Fantasy, 8% Sci-Fi, 6% Others | |
| </div> | |
| <div> | |
| <span class="text-lab-purple">Female:</span> 58% Romance, 22% Fantasy, 12% Drama, 8% Others | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Geographic Heatmap Preview --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-4"> | |
| <h3 class="font-semibold">GEOGRAPHIC CONCENTRATION</h3> | |
| <div class="text-xs text-gray-400 mt-1">Top regions by readership</div> | |
| </div> | |
| <table class="w-full text-xs"> | |
| <thead> | |
| <tr> | |
| <th class="text-left">Region</th> | |
| <th class="text-right">Readers</th> | |
| <th class="text-right">Growth</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="text-left">East Asia</td> | |
| <td class="text-right data-value">421,892</td> | |
| <td class="text-right positive-trend">+8.7%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">Southeast Asia</td> | |
| <td class="text-right data-value">387,562</td> | |
| <td class="text-right positive-trend">+12.4%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">North America</td> | |
| <td class="text-right data-value">234,789</td> | |
| <td class="text-right positive-trend">+5.3%</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left">Europe</td> | |
| <td class="text-right data-value">187,654</td> | |
| <td class="text-right neutral-trend">+1.8%</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="text-xs mt-2 text-amber-300"> | |
| Emerging markets: South America (+17.2%), Middle East (+9.8%) | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Behavioral Segmentation --> | |
| <div class="data-panel rounded-lg mb-6 p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-semibold">READER BEHAVIOR SEGMENTATION</h3> | |
| <div class="text-xs bg-lab-panel px-2 py-1 rounded">cluster analysis</div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-3"> | |
| <div class="p-3 bg-[#003153] rounded"> | |
| <div class="text-xs mb-1 font-bold">Power Readers (18%)</div> | |
| <div class="text-xs mb-1">Daily readers, high spend</div> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="kpi-badge bg-blue-900">LTV: $128</span> | |
| <span class="kpi-badge bg-green-900">Engage: 94%</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-[#1a1a2e] rounded"> | |
| <div class="text-xs mb-1 font-bold">Casual Enjoyers (42%)</div> | |
| <div class="text-xs mb-1">2-3x weekly, medium spend</div> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="kpi-badge bg-blue-900">LTV: $64</span> | |
| <span class="kpi-badge bg-green-900">Engage: 82%</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-[#3a0a2e] rounded"> | |
| <div class="text-xs mb-1 font-bold">Series Followers (28%)</div> | |
| <div class="text-xs mb-1">Weekly, only favorite titles</div> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="kpi-badge bg-blue-900">LTV: $43</span> | |
| <span class="kpi-badge bg-green-900">Engage: 78%</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-[#4a0100] rounded"> | |
| <div class="text-xs mb-1 font-bold">Drop-off Risks (12%)</div> | |
| <div class="text-xs mb-1">Declining engagement</div> | |
| <div class="flex flex-wrap gap-1"> | |
| <span class="kpi-badge bg-blue-900">LTV: $12</span> | |
| <span class="kpi-badge bg-red-900">Engage: 34%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="section-divider"> | |
| <!-- Predictive Analytics --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <span class="status-indicator bg-lab-purple"></span> | |
| <span>PREDICTIVE ANALYTICS</span> | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> | |
| <!-- Content Trend Forecast --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-3"> | |
| <h3 class="font-semibold">CONTENT TREND PROJECTIONS</h3> | |
| <div class="text-xs text-gray-400">6-month forecast based on current patterns</div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="trendForecastChart"></canvas> | |
| </div> | |
| <div class="text-xs mt-3 grid grid-cols-2 gap-1"> | |
| <div><span class="text-lab-accent">Rising:</span> Isekai (+14%), Slice-of-Life (+9%)</div> | |
| <div><span class="text-lab-warning">Declining:</span> Traditional Fantasy (-7%), Vampire (-12%)</div> | |
| </div> | |
| </div> | |
| <!-- Revenue Prediction --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="mb-3"> | |
| <h3 class="font-semibold">REVENUE FORECAST MODEL</h3> | |
| <div class="text-xs text-gray-400">Quarterly projections with confidence intervals</div> | |
| </div> | |
| <div class="chart-container"> | |
| <canvas id="revenueForecastChart"></canvas> | |
| </div> | |
| <div class="text-xs mt-3"> | |
| <div class="grid grid-cols-3 gap-2"> | |
| <div> | |
| <div>Q1 2024</div> | |
| <div class="data-value">$2.4M</div> | |
| </div> | |
| <div> | |
| <div>Q2 2024</div> | |
| <div class="data-value">$2.7M</div> | |
| </div> | |
| <div> | |
| <div>Q3 2024</div> | |
| <div class="data-value">$2.9M</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Churn Prediction --> | |
| <div class="data-panel rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-semibold">CHURN RISK ANALYSIS</h3> | |
| <span class="text-xs bg-lab-panel px-2 py-1 rounded">machine learning model</span> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-3"> | |
| <div class="p-3"> | |
| <div class="text-xs mb-1">Overall Churn Probability</div> | |
| <div class="text-2xl data-value">3.8%</div> | |
| <div class="text-xs"><span class="neutral-trend">→</span> Stable (no significant change)</div> | |
| </div> | |
| <div class="p-3"> | |
| <div class="text-xs mb-1">At-Risk Titles</div> | |
| <div class="text-2xl data-value">87</div> | |
| <div class="text-xs"><span class="positive-trend">↘</span> 12 less than last month</div> | |
| </div> | |
| <div class="p-3"> | |
| <div class="text-xs mb-1">High-Risk Segments</div> | |
| <div class="text-2xl data-value">3</div> | |
| <div class="text-xs"> | |
| <span class="negative-trend">Vampire (27%)</span>, | |
| <span class="negative-trend">Western (19%)</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <div class="text-xs mb-1">Intervention Success Rate</div> | |
| <div class="text-2xl data-value positive-trend">68%</div> | |
| <div class="text-xs">(+9% from Q2)</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <hr class="section-divider"> | |
| <!-- Genre Performance Detail --> | |
| <section class="mb-8"> | |
| <h2 class="text-xl font-semibold mb-4">GENRE PERFORMANCE MATRIX</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full data-table"> | |
| <thead> | |
| <tr> | |
| <th class="text-left">Genre</th> | |
| <th class="text-right">Market Share</th> | |
| <th class="text-right">Reader Growth</th> | |
| <th class="text-right">Revenue/Reader</th> | |
| <th class="text-right">Age Skew</th> | |
| <th class="text-right">Gender Ratio</th> | |
| <th class="text-right">Series Length</th> | |
| <th class="text-right">Health Index</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td class="text-left font-semibold">Action (Shounen)</td> | |
| <td class="text-right data-value">34.2%</td> | |
| <td class="text-right positive-trend">+8.7%</td> | |
| <td class="text-right">$2.87</td> | |
| <td class="text-right">21.4</td> | |
| <td class="text-right">68/32</td> | |
| <td class="text-right">72.4</td> | |
| <td class="text-right positive-trend">89/100</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-semibold">Fantasy (Isekai)</td> | |
| <td class="text-right data-value">27.8%</td> | |
| <td class="text-right positive-trend">+14.2%</td> | |
| <td class="text-right">$3.12</td> | |
| <td class="text-right">22.1</td> | |
| <td class="text-right">59/41</td> | |
| <td class="text-right">45.7</td> | |
| <td class="text-right positive-trend">92/100</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-semibold">Romance</td> | |
| <td class="text-right data-value">15.3%</td> | |
| <td class="text-right neutral-trend">+2.1%</td> | |
| <td class="text-right">$4.21</td> | |
| <td class="text-right">24.2</td> | |
| <td class="text-right">22/78</td> | |
| <td class="text-right">28.5</td> | |
| <td class="text-right">75/100</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-semibold">Horror</td> | |
| <td class="text-right data-value">7.8%</td> | |
| <td class="text-right negative-trend">-3.4%</td> | |
| <td class="text-right">$2.45</td> | |
| <td class="text-right">25.1</td> | |
| <td class="text-right">54/46</td> | |
| <td class="text-right">34.2</td> | |
| <td class="text-right negative-trend">61/100</td> | |
| </tr> | |
| <tr> | |
| <td class="text-left font-semibold">Sports</td> | |
| <td class="text-right data-value">6.2%</td> | |
| <td class="text-right neutral-trend">+0.7%</td> | |
| <td class="text-right">$1.98</td> | |
| <td class="text-right">23.8</td> | |
| <td class="text-right">82/18</td> | |
| <td class="text-right">62.4</td> | |
| <td class="text-right">68/100</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="border-t border-lab-border py-4 mt-8 bg-lab-panel"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center text-xs text-gray-400"> | |
| <div class="mb-2 md:mb-0"> | |
| <span class="mr-4">COMICLAB RESEARCH v3.1.0</span> | |
| <span>ANALYTICS ENGINE v2.0.1</span> | |
| </div> | |
| <div> | |
| <span class="mr-4">Last scan: 2023-11-16T09:42:18Z</span> | |
| <span>Next model refresh: 2023-11-17T03:00:00Z</span> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xxs text-gray-500 text-center"> | |
| Predictive models have 87-92% accuracy on historical data | Confidence intervals at 95% | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Market Growth Chart | |
| const marketGrowthCtx = document.getElementById('marketGrowthChart').getContext('2d'); | |
| const marketGrowthChart = new Chart(marketGrowthCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['2021', '2022', '2023', '2024F', '2025F', '2026F'], | |
| datasets: [ | |
| { | |
| label: 'Action', | |
| data: [120, 145, 180, 215, 250, 290], | |
| borderColor: '#00ff88', | |
| backgroundColor: 'rgba(0, 255, 136, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Fantasy', | |
| data: [100, 130, 165, 200, 240, 280], | |
| borderColor: '#0088ff', | |
| backgroundColor: 'rgba(0, 136, 255, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Romance', | |
| data: [80, 95, 110, 125, 140, 155], | |
| borderColor: '#9b5de5', | |
| backgroundColor: 'rgba(155, 93, 229, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Horror', | |
| data: [65, 70, 72, 68, 65, 62], | |
| borderColor: '#ff6600', | |
| backgroundColor: 'rgba(255, 102, 0, 0.1)', | |
| tension: 0.3, | |
| borderWidth: 2 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| callbacks: { | |
| label: function(context) { | |
| return context.dataset.label + ': ' + context.raw + 'M'; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + 'M'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Demographic Chart | |
| const demographicCtx = document.getElementById('demographicChart').getContext('2d'); | |
| const demographicChart = new Chart(demographicCtx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Age 13-17', 'Age 18-24', 'Age 25-34', 'Age 35+'], | |
| datasets: [{ | |
| data: [22, 41, 28, 9], | |
| backgroundColor: [ | |
| '#00f5d4', | |
| '#0088ff', | |
| '#9b5de5', | |
| '#ff006e' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| cutout: '70%', | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| } | |
| } | |
| }); | |
| // Age by Genre Chart | |
| const ageGenreCtx = document.getElementById('ageGenreChart').getContext('2d'); | |
| const ageGenreChart = new Chart(ageGenreCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['13-17', '18-20', '21-24', '25-30', '31-40', '41+'], | |
| datasets: [ | |
| { | |
| label: 'Action', | |
| data: [18, 25, 32, 15, 7, 3], | |
| backgroundColor: 'rgba(0, 136, 255, 0.7)' | |
| }, | |
| { | |
| label: 'Fantasy', | |
| data: [15, 22, 35, 18, 8, 2], | |
| backgroundColor: 'rgba(0, 245, 212, 0.7)' | |
| }, | |
| { | |
| label: 'Romance', | |
| data: [12, 18, 25, 30, 12, 3], | |
| backgroundColor: 'rgba(155, 93, 229, 0.7)' | |
| }, | |
| { | |
| label: 'Horror', | |
| data: [8, 15, 28, 35, 12, 2], | |
| backgroundColor: 'rgba(255, 102, 0, 0.7)' | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| x: { | |
| stacked: false, | |
| grid: { | |
| display: false | |
| } | |
| }, | |
| y: { | |
| stacked: false, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return value + '%'; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Gender Preference Chart | |
| const genderPreferenceCtx = document.getElementById('genderPreferenceChart').getContext('2d'); | |
| const genderPreferenceChart = new Chart(genderPreferenceCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Action', 'Fantasy', 'Romance', 'Horror', 'Sci-Fi', 'Sports', 'Comedy', 'Drama'], | |
| datasets: [ | |
| { | |
| label: 'Male Readers', | |
| data: [72, 14, 5, 8, 12, 15, 18, 6], | |
| backgroundColor: 'rgba(0, 136, 255, 0.2)', | |
| borderColor: '#0088ff', | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Female Readers', | |
| data: [18, 22, 58, 12, 8, 3, 15, 12], | |
| backgroundColor: 'rgba(155, 93, 229, 0.2)', | |
| borderColor: '#9b5de5', | |
| borderWidth: 2 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| r: { | |
| angleLines: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 80 | |
| } | |
| } | |
| } | |
| }); | |
| // Trend Forecast Chart | |
| const trendForecastCtx = document.getElementById('trendForecastChart').getContext('2d'); | |
| const trendForecastChart = new Chart(trendForecastCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Current', '+1M', '+2M', '+3M', '+4M', '+5M', '+6M'], | |
| datasets: [ | |
| { | |
| label: 'Isekai', | |
| data: [100, 108, 116, 124, 131, 139, 147], | |
| borderColor: '#00ff88', | |
| backgroundColor: 'rgba(0, 255, 136, 0.1)', | |
| tension: 0.4, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Sports', | |
| data: [100, 102, 103, 104, 103, 102, 101], | |
| borderColor: '#0088ff', | |
| backgroundColor: 'rgba(0, 136, 255, 0.1)', | |
| tension: 0.4, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Traditional Fantasy', | |
| data: [100, 97, 94, 91, 87, 84, 81], | |
| borderColor: '#ff6600', | |
| backgroundColor: 'rgba(255, 102, 0, 0.1)', | |
| tension: 0.4, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'Slice-of-Life', | |
| data: [100, 103, 107, 110, 113, 117, 120], | |
| borderColor: '#9b5de5', | |
| backgroundColor: 'rgba(155, 93, 229, 0.1)', | |
| tension: 0.4, | |
| borderWidth: 2 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return context.dataset.label + ': ' + (context.raw - 100) + '% change'; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| min: 80, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return (value - 100) + '%'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Revenue Forecast Chart | |
| const revenueForecastCtx = document.getElementById('revenueForecastChart').getContext('2d'); | |
| const revenueForecastChart = new Chart(revenueForecastCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Q4 2023', 'Q1 2024', 'Q2 2024', 'Q3 2024', 'Q4 2024'], | |
| datasets: [{ | |
| label: 'Revenue', | |
| data: [2200, 2400, 2700, 2900, 3200], | |
| backgroundColor: [ | |
| 'rgba(0, 136, 255, 0.8)', | |
| 'rgba(0, 136, 255, 0.8)', | |
| 'rgba(0, 245, 212, 0.8)', | |
| 'rgba(0, 245, 212, 0.8)', | |
| 'rgba(0, 255, 136, 0.8)' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| return '$' + context.raw + 'K'; | |
| } | |
| } | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| grid: { | |
| color: 'rgba(51, 51, 51, 0.5)' | |
| }, | |
| ticks: { | |
| callback: function(value) { | |
| return '$' + value + 'K'; | |
| } | |
| } | |
| }, | |
| x: { | |
| grid: { | |
| display: false | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=nmtalhp/comic-datat" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> | |
| </html> |