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,438 stars 448 forks Updated yesterday 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
yesterday
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Data & Documents Listed

data-visualise

Orchestrate visual output from tabular data or a data-analyse analysis.json into either (1) a brandable self-contained HTML dashboard (print/PDF / artifact) or (2) an Excel workbook of native charts for analysts. Use when the user says "build a dashboard", "visualise this", "make a chart / KPI cards / scorecard", "Excel charts", "chart this in a spreadsheet", "a one-pager of these numbers", "RAG status board", or wants a shareable visual summary. HTML path: inline SVG, no CDN. Excel path: openpyxl charts with OfficeCLI-aligned chartType names (column/bar/line/pie/doughnut/waterfall). Draft for review, not advice. NOT PowerPoint or letters; clean/extract first via data-tidy / data-extract; compute metrics via data-analyse when numbers must be exact.

0 Updated 4 days ago
moonlight-lupin
Data & Documents Solid

charting-vega-lite

Create interactive data visualizations using Vega-Lite declarative JSON grammar. Supports 20+ chart types (bar, line, scatter, histogram, boxplot, grouped/stacked variations, etc.) via templates and programmatic builders. Use when users upload data for charting, request specific chart types, or mention visualizations. Produces portable JSON specs with inline data islands that work in Claude artifacts and can be adapted for production.

134 Updated today
oaustegard
Data & Documents Solid

chart-image

Generate publication-quality PNG chart images from data, supporting line, bar, area, candlestick, pie, and heatmap charts. Triggers when the user asks to visualize data, create a graph, plot a time series, or generate a chart for a report, alert, or dashboard. Runs as a lightweight, headless Node.js process without a browser.

4 Updated 1 weeks ago
serejaris