blog-chart

# Blog Chart: Built-In SVG Data Visualization Generates dark-mode-compatible inline SVG charts for blog posts. Invoked internally by `blog-write` and `blog-rewrite` when chart-worthy data is identified. Not a standalone user-facing command. **Styling source of truth:** `skills/blog/references/visual-media.md` For supported chart types, prefer the deterministic CLI: ```bash python3 skills/blog-chart/scripts/generate_chart_svg.py --input chart.json --output chart.html --json ``` ## Input Format The writer or researcher passes a chart request: ``` Chart Request: - Type: horizontal bar - Title: "AI Citation Sources by Platform" - Data: ChatGPT 43.8%, Perplexity 6.6%, Google AI Overviews 2.2%, Reddit 7.15% - Source: [Verified source], [publication date] - Platform: mdx (or html) ``` ## Chart Type Selection Select based on the data pattern. Prefer chart type diversity, but repeat a type when comparability or reader comprehension clearly benefits. | Data Pattern | Best Chart Type | |-------------|-----------------| | Before/after comparison | Grouped bar chart | | Ranked factors / correlations | Lollipop chart | | Parts of whole / market share | Donut chart | | Trend over time | Line chart | | Percentage improvement | Horizontal bar chart | | Distribution / range | Area chart | | Multi-dimensional scoring | Radar chart | ## Styling Rules (Non-Negotiable) All charts must work on both dark and light backgrounds: ``` Text elements: fill="currentColor" Grid lines: ...