# Data Visualizer

> SVG chart generator for data visualization. Create bar charts, line charts, pie charts, scatter plots, heatmaps, dashboards, comparison charts, and trend analysis. Outputs pure SVG code that opens in any browser. No external dependencies. Use when creating charts, visualizing data, or building dashboards.

- Skill: `dvcrn/data-visualizer` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add dvcrn/data-visualizer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/data-visualizer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dvcrn (https://skillmd.com/u/dvcrn)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/dvcrn/data-visualizer

---


# 📊 Data Visualizer — SVG Chart Generator

> Pure-code SVG charts. No chart libraries, no dependencies. Open in any browser.

## 🗂️ Command Quick Reference

```
┌─────────────┬────────────────────────────────┐
│ Command     │ Description                    │
├─────────────┼────────────────────────────────┤
│ bar         │ Bar chart — category compare   │
│ line        │ Line chart — trend over time   │
│ pie         │ Pie chart — proportions        │
│ scatter     │ Scatter plot — correlation     │
│ heatmap     │ Heatmap — matrix data          │
│ dashboard   │ Dashboard — multi-metric view  │
│ compare     │ Comparison — side-by-side bars │
│ trend       │ Trend — annotated line chart   │
└─────────────┴────────────────────────────────┘
```

## 📥 Input Format

Comma-separated label:value pairs: `Label1:100,Label2:85,Label3:200`

## 📤 Output

- Complete SVG code — save as `.svg` and open in browser
- Scales without pixelation (vector graphics)
- Embeddable in HTML, Markdown, or email

## 🎨 Features

- Auto color palette (8-color cycle)
- Responsive sizing
- Multi-language label support
- Zero external dependencies

## 📂 Scripts
- `scripts/visualize.sh` — Main script