data-viz-renderer

Featured

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.

Data & Documents 4,617 stars 463 forks Updated today MIT

Install

View on GitHub

Quality Score: 99/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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`, `ber...

Details

Author
zebbern
Repository
zebbern/claude-code-guide
Created
1 years ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category