# Baoyu Infographic
> Baoyu Infographic
- Skill: `lucadominguez/baoyu-infographic` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lucadominguez/baoyu-infographic`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lucadominguez/baoyu-infographic/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lucadominguez (https://skillmd.com/u/lucadominguez)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lucadominguez/baoyu-infographic
---
# 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:
1. Title + subtitle
2. KPI stat cards (3-6 key numbers)
3. Primary chart (bar, line, radar, or scatter)
4. Secondary chart (optional — for comparison or breakdown)
5. Source data table (collapsible)
6. Attribution footer
## Quick Start
```python
# Generate from Python by writing the HTML directly
html = '''
Ketamine vs Antidepressants: A Data Comparison
Ketamine vs Standard Antidepressants
A data-driven comparison of onset time, efficacy, and effect size across treatment modalities
Response Rate in Treatment-Resistant Depression
Time to Clinically Significant Improvement
| Source | Year | Finding | N |
|---|
| Berman et al., Biol Psychiatry | 2000 | First demonstration of rapid antidepressant effect | 8 |
| Zarate et al., Arch Gen Psychiatry | 2006 | RCT: 71% response at 24h, d=1.2 vs placebo | 18 |
| Xu et al., Am J Psychiatry | 2016 | Meta-analysis: d=0.91, NNT≈4 | 368 |
'''
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
```bash
# 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
1. **Chart.js CDN is required.** The infographic won't render without internet. For offline reading, screenshot to PNG as backup.
2. **Obsidian can't preview HTML.** Link externally or screenshot to PNG for the article embed.
3. **Mobile responsiveness.** Chart.js canvases shrink on mobile. Test at 375px width before publishing.
4. **Too many charts per infographic.** Max 3 charts. Beyond that, split into separate infographics.