|
|
<!DOCTYPE html> |
|
|
<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"> |
|
|
|
|
|
<section class="mb-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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 + '%'; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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 |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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 |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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><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=jayare562/datasets" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
