data-viz-renderer

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.

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Data Viz Renderer

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

Stats Cards — KPI big numbers + trend arrows + icons
Comparison Chart — Grouped bar chart with multiple series
Flow Diagram — Step-by-step process with numbering, icons, and connecting arrows
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

python3 scripts/build_infographic.py config.json

Also supports reading from stdin:

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

{
  "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"
    }
  ]
}

icon options: users, user, money, percent, globe, clock, check, star, target, zap, chart-bar, chart-pie, database, rocket, shield, heart, light, search, mail, settings, flag, trending-up, trending-down

trend_dir: up (green upward arrow) or down (red downward arrow)

2. comparison — Bar Chart Comparison

{
  "type": "comparison",
  "data": {
    "chart_title": "Quarterly Revenue Comparison",
    "categories": ["Q1", "Q2", "Q3", "Q4"],
    "series": [
      {"name": "2024", "values": [320, 410, 380, 520]},
      {"name": "2025", "values": [380, 490, 450, 610]}
    ]
  }
}

3. flow — Flow Diagram

{
  "type": "flow",
  "data": [
    {"step": 1, "title": "Requirements", "description": "Gather user needs", "icon": "search"},
    {"step": 2, "title": "Design", "description": "Create technical plan", "icon": "light"},
    {"step": 3, "title": "Development", "description": "Code and test", "icon": "settings"},
    {"step": 4, "title": "Launch", "description": "Deploy to production", "icon": "rocket"}
  ]
}

4. dashboard — Mixed Dashboard

{
  "type": "dashboard",
  "data": {
    "stats": [
      {"label": "DAU", "value": "12.3K", "icon": "users", "trend": "+5%", "trend_dir": "up"},
      {"label": "Conversion Rate", "value": "3.8%", "icon": "target", "trend": "-0.2%", "trend_dir": "down"}
    ],
    "chart": {
      "chart_title": "Monthly Trend",
      "categories": ["Jan", "Feb", "Mar", "Apr"],
      "series": [{"name": "DAU", "values": [10200, 11500, 11800, 12300]}]
    },
    "breakdown": [
      {"label": "iOS", "value": 45},
      {"label": "Android", "value": 38},
      {"label": "Web", "value": 17}
    ],
    "flow": [
      {"step": 1, "title": "Sign Up", "description": ""},
      {"step": 2, "title": "Activate", "description": ""},
      {"step": 3, "title": "Retain", "description": ""}
    ]
  }
}

Output Format

The script outputs a JSON result to stdout:

{
  "status": "success",
  "output": "/absolute/path/to/infographic.html",
  "type": "stats",
  "title": "My Infographic",
  "palette": "auto",
  "size_bytes": 8432
}

On error:

{
  "status": "error",
  "errors": ["Missing required field: data"]
}

Design Highlights

Zero external dependencies: Pure Python standard library, no pip install needed
Self-contained output: HTML with all CSS and SVG inline, no network required
Responsive layout: Works on both desktop and mobile browsers
Professional palettes: 8 preset color schemes + automatic selection
24+ built-in icons: Common SVG icons, no font files needed
CJK-friendly: Font stack includes Noto Sans SC, PingFang SC, Microsoft YaHei

Use Cases

Visualization modules in data reports
Product data dashboards
Business process illustrations
Quarterly/monthly data comparisons
Team KPI displays

Dependencies

Python 3.7+ (standard library only)

Repository: zebbern/claude-code-guide
Path: skills/data-viz-renderer/SKILL.md
Commit: af7d491

Last updated: about 8 hours ago
First committed: about 2 months ago

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.