Data Viz Renderer Skill for Claude

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.

8k tokens

context cost

the whole folder, loaded on every use

files

ships runnable scripts

copies elsewhere

how many repositories repackaged it

4468

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/zebbern/claude-code-guide --skill data-viz-renderer

What comes with it

28 331 bytes besides the instruction

LICENSE

scripts/build_infographic.py

The instruction itself

14 sections, as written by the author

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:

|-------|------|----------|-------------|

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)

Other skills for the same job

different authors, same section of the catalogue

Seaborn

by christophacham

×3

Statistical visualization with pandas integration. Use for quick exploration of distributions, relationships, and categorical comparisons with attractive defaults. Best for box plots, violin plots, pair plots, heatmaps. Built on matplotlib. For interactive plots use plotly; for publication styling use scientific-visualization.

Populates investment banking pitch deck templates with data from source files. Use when: user provides a PowerPoint template to fill in, user has source data (Excel/CSV) to populate into slides, user mentions populating or filling a pitch deck template, or user needs to transfer data into existing slide layouts. Not for creating presentations from scratch.

Scientific Visualization

by zLanqing

×1

Meta-skill for publication-ready figures. Use when creating journal submission figures requiring multi-panel layouts, significance annotations, error bars, colorblind-safe palettes, and specific journal formatting (Nature, Science, Cell). Orchestrates matplotlib/seaborn/plotly with publication styles. For quick exploration use seaborn or plotly directly.

Presentation Design Enhancer

by nicepkg

×1

Transform text-heavy slides into visual storytelling. Suggest layout improvements, icon usage, and data visualization.

355 tokens

Edge Signal Aggregator

by BaggaT236

×1

Aggregate and rank signals from multiple edge-finding skills (edge-candidate-agent, theme-detector, sector-analyst, institutional-flow-tracker) into a prioritized conviction dashboard with weighted scoring, deduplication, and contradiction detection.

Optimize Core Web Vitals (LCP, INP, CLS) for better page experience and search ranking. Use when asked to "improve Core Web Vitals", "fix LCP", "reduce CLS", "optimize INP", "page experience optimization", or "fix layout shifts". Focuses specifically on the three Core Web Vitals metrics. Do NOT use for general web performance (use perf-web-optimization), Lighthouse audits (use perf-lighthouse), or Astro-specific optimization (use perf-astro).

4k tokens

How to use it

Copy the folder

Take zebbern/data-viz-renderer from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference pip. Without those the skill loads but fails at the first command.