# Data Viz Renderer

Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar...

- Repository: https://github.com/zebbern/claude-code-guide (4691 stars)
- Category: Engineering
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add zebbern/claude-code-guide --skill data-viz-renderer -g -a claude-code -y`
Codex: `npx skills add zebbern/claude-code-guide --skill data-viz-renderer -g -a codex -y`
Cursor: `npx skills add zebbern/claude-code-guide --skill data-viz-renderer -g -a cursor -y`
Gemini CLI: `npx skills add zebbern/claude-code-guide --skill data-viz-renderer -g -a gemini-cli -y`

## Description

Generate self-contained HTML/SVG infographics from JSON data, including stat cards, bar charts, flow diagrams, and mixed dashboards. Offers 8 color palettes and built-in icons with no external dependencies. Triggered when users request data visualization, infographics, charts, or dashboards.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Data Viz Renderer

Generate self-contained HTML/SVG infographics from JSON data. Four supported types:

1. **Stats Cards**, KPI big numbers + trend arrows + icons
2. **Comparison Chart**, Grouped bar chart with multiple series
3. **Flow Diagram**, Step-by-step process with numbering, icons, and connecting arrows
4. **Dashboard**, Mixed layout: stat cards + bar chart + donut chart + flow

Output is a **fully self-contained** HTML file (all CSS/SVG inline, no external dependencies), ready to open directly in a browser.

## Usage

### Basic Usage

```bash
python3 scripts/build_infographic.py config.json
```

Also supports reading from stdin:

```bash
cat config.json | python3 scripts/build_infographic.py
```

The script outputs a JSON status to stdout and writes the generated HTML to the path specified in the `output` field.

### JSON Configuration Format

Common fields:

| Field | Type | Required | Description |
|-------|------|----------|-------------|
| `title` | string | No | Infographic title |
| `subtitle` | string | No | Subtitle |
| `type` | string | Yes | `stats` / `comparison` / `flow` / `dashboard` |
| `palette` | string | No | Color palette (default: `auto`) |
| `data` | object/array | Yes | Data content (format depends on type) |
| `output` | string | No | Output file path (default: `infographic.html`) |
| `footer` | string | No | Footer text |

### Color Palettes

Available values: `auto` (automatically chosen based on data), `ocean`, `sunset`, `forest`, `berry`, `vibrant`, `corporate`, `pastel`, `earth`

### Data Format by Type

#### 1. stats, Stat Cards

```json
{
  "type": "stats",
  "data": [
    {
      "label": "Total Revenue",
      "value": "$1.2M",
      "icon": "money",
      "trend": "+12.5%",
      "trend_dir": "up"
    },
    {
      "label": "Users",
      "value": "45,230",
      "icon": "users",
      "trend": "+8.2%",
      "trend_dir": "up"
    }
  ]
}
```

The rest: https://github.com/zebbern/claude-code-guide/blob/HEAD/skills/data-viz-renderer/SKILL.md