lucadominguez Baoyu Infographic
Generate self-contained HTML infographics for article embedding. Uses Chart.js CDN for interactive charts, dark theme, KPI stat cards, and source tables. Each infographic is a single HTML file — no build step, no dependencies beyond the CDN.
When to Use
- Articles that need multiple data visualizations in one cohesive layout
- Data-rich pieces where readers benefit from exploring the data
- Posts where you want to offer an interactive supplement alongside static PNGs
Infographic Template
Every infographic has these sections:
- Title + subtitle
- KPI stat cards (3-6 key numbers)
- Primary chart (bar, line, radar, or scatter)
- Secondary chart (optional — for comparison or breakdown)
- Source data table (collapsible)
- Attribution footer
Quick Start
# Generate from Python by writing the HTML directly
html = '''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ketamine vs Antidepressants: A Data Comparison</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #0f0f1a;
color: #e2e8f0;
font-family: 'Inter', -apple-system, sans-serif;
padding: 40px;
max-width: 900px;
margin: 0 auto;
}
h1 { font-size: 24px; margin-bottom: 6px; }
.subtitle { color: #94a3b8; font-size: 14px; margin-bottom: 30px; }
/* KPI Cards */
.kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 30px;
}
.kpi-card {
background: #1a1a2e;
border: 1px solid #1e293b;
border-radius: 10px;
padding: 20px;
text-align: center;
}
.kpi-value { font-size: 32px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
.kpi-label { font-size: 12px; color: #94a3b8; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-indigo { color: #6366f1; }
.kpi-green { color: #10b981; }
.kpi-amber { color: #f59e0b; }
.kpi-pink { color: #ec4899; }
/* Chart Container */
.chart-box {
background: #1a1a2e;
border: 1px solid #1e293b;
border-radius: 10px;
padding: 24px;
margin-bottom: 24px;
}
.chart-title { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
canvas { max-height: 350px; }
/* Source Table */
.source-table {
width: 100%;
border-collapse: collapse;
margin-top: 24px;
font-size: 12px;
}
.source-table th {
text-align: left;
color: #94a3b8;
padding: 8px;
border-bottom: 1px solid #1e293b;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.source-table td {
padding: 8px;
border-bottom: 1px solid #0f0f1a;
color: #cbd5e1;
}
.footer {
margin-top: 30px;
text-align: center;
color: #475569;
font-size: 11px;
}
</style>
</head>
<body>
<h1>Ketamine vs Standard Antidepressants</h1>
<p class="subtitle">A data-driven comparison of onset time, efficacy, and effect size across treatment modalities</p>
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-value kpi-indigo">2-4h</div>
<div class="kpi-label">Ketamine Onset</div>
</div>
<div class="kpi-card">
<div class="kpi-value kpi-green">71%</div>
<div class="kpi-label">Response Rate</div>
</div>
<div class="kpi-card">
<div class="kpi-value kpi-amber">d=0.91</div>
<div class="kpi-label">Effect Size</div>
</div>
<div class="kpi-card">
<div class="kpi-value kpi-pink">3-7d</div>
<div class="kpi-label">Duration Per Dose</div>
</div>
</div>
<div class="chart-box">
<div class="chart-title">Response Rate in Treatment-Resistant Depression</div>
<canvas id="chart1"></canvas>
</div>
<div class="chart-box">
<div class="chart-title">Time to Clinically Significant Improvement</div>
<canvas id="chart2"></canvas>
</div>
<table class="source-table">
<thead><tr><th>Source</th><th>Year</th><th>Finding</th><th>N</th></tr></thead>
<tbody>
<tr><td>Berman et al., Biol Psychiatry</td><td>2000</td><td>First demonstration of rapid antidepressant effect</td><td>8</td></tr>
<tr><td>Zarate et al., Arch Gen Psychiatry</td><td>2006</td><td>RCT: 71% response at 24h, d=1.2 vs placebo</td><td>18</td></tr>
<tr><td>Xu et al., Am J Psychiatry</td><td>2016</td><td>Meta-analysis: d=0.91, NNT≈4</td><td>368</td></tr>
</tbody>
</table>
<div class="footer">Research Collective · July 2026 · Data from published clinical trials</div>
<script>
new Chart(document.getElementById('chart1'), {
type: 'bar',
data: {
labels: ['Placebo', 'SSRI', 'SNRI', 'ECT', 'Ketamine IV', 'Esketamine'],
datasets: [{
data: [15, 47, 52, 75, 71, 55],
backgroundColor: ['#334155', '#64748b', '#64748b', '#64748b', '#6366f1', '#818cf8'],
borderRadius: 6,
borderSkipped: false,
}]
},
options: {
indexAxis: 'y',
responsive: true,
plugins: { legend: { display: false } },
scales: {
x: { grid: { color: '#1e293b' }, ticks: { color: '#94a3b8', callback: v => v + '%' } },
y: { grid: { display: false }, ticks: { color: '#e2e8f0' } }
}
}
});
new Chart(document.getElementById('chart2'), {
type: 'bar',
data: {
labels: ['Ketamine IV', 'Esketamine', 'ECT', 'SNRI', 'SSRI'],
datasets: [{
data: [2, 4, 168, 336, 504],
backgroundColor: ['#6366f1', '#818cf8', '#64748b', '#64748b', '#64748b'],
borderRadius: 6,
}]
},
options: {
responsive: true,
plugins: { legend: { display: false } },
scales: {
x: {
type: 'logarithmic',
grid: { color: '#1e293b' },
ticks: { color: '#94a3b8', callback: v => v >= 24 ? (v/24)+'d' : v+'h' }
},
y: { grid: { display: false }, ticks: { color: '#e2e8f0' } }
}
}
});
</script>
</body>
</html>'''
with open('/tmp/infographic.html', 'w') as f:
f.write(html)
print("Infographic written to /tmp/infographic.html")
Chart.js Chart Types
| Type | Best for | Config |
|---|---|---|
bar |
Comparisons, rankings | indexAxis: 'y' for horizontal |
line |
Trends over time | tension: 0.3 for smooth curves |
radar |
Multi-metric profiles (e.g., compound comparison across receptor affinities) | 5-8 axes max |
scatter |
Correlation, distribution | Use for individual data points |
doughnut |
Composition, proportions | Max 5 segments |
KPI Color System
| Color | Hex | Use for |
|---|---|---|
| Indigo | #6366f1 | Primary metric, main finding |
| Green | #10b981 | Positive outcome, improvement |
| Amber | #f59e0b | Warning, caveat, moderate |
| Pink | #ec4899 | Side effects, risks |
| Blue | #3b82f6 | Secondary metric |
| Red | #ef4444 | Critical warning, contraindication |
Saving for Obsidian
# Save to vault's Visuals directory
cp /tmp/infographic.html "/mnt/c/Users/Lenovo/Desktop/work/Publications/research-collective/Visuals/ketamine-infographic.html"
PITFALL: HTML files are invisible in Obsidian's file explorer. Link to them with raw paths, not wikilinks. Use: [Open interactive infographic](Visuals/ketamine-infographic.html).
PITFALLS
- Chart.js CDN is required. The infographic won't render without internet. For offline reading, screenshot to PNG as backup.
- Obsidian can't preview HTML. Link externally or screenshot to PNG for the article embed.
- Mobile responsiveness. Chart.js canvases shrink on mobile. Test at 375px width before publishing.
- Too many charts per infographic. Max 3 charts. Beyond that, split into separate infographics.