skills.rest
zebbern
zebbernCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

data-viz-renderer

Generate self-contained HTML/SVG infographics from JSON data configurations.

4.6k|462|Updated Jun 21, 2025
Search Tags:#HTML#svg#infographic#Json#Dashboard#CHART#Data Visualization
One-click install
npx skills add https://github.com/zebbern/claude-code-guide --skill data-viz-renderer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-viz-renderer
Source: https://github.com/zebbern/claude-code-guide/tree/main/skills/data-viz-renderer
Command: npx skills add https://github.com/zebbern/claude-code-guide --skill data-viz-renderer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Turning raw JSON metrics into presentable charts and dashboards normally requires charting libraries, build tooling, or hosted services. This Skill converts a JSON configuration directly into a single self-contained HTML file with inline SVG and CSS that opens in any browser with no dependencies.

Core Features & Use Cases

  • Four Infographic Types: Stat cards with KPI trends, grouped bar chart comparisons, numbered flow diagrams, and mixed dashboards combining stats, bar charts, donut breakdowns, and flows.
  • Zero-Dependency Rendering: A pure Python standard library script produces fully inline HTML/SVG output with 8 color palettes and 24+ built-in icons, requiring no pip installs or network access.
  • Use Case: A product manager needs a quarterly business review visual. They pass a JSON config with revenue stats, a quarterly comparison chart, and a platform breakdown donut, and receive a single infographic.html file ready to share or embed in a report.

Quick Start

Ask the assistant to generate an infographic by providing your data as JSON with a type of stats, comparison, flow, or dashboard, then run the build_infographic.py script with that config to produce the HTML file.

Frequently Asked Questions about data-viz-renderer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an infographic from JSON data in Python?▼

Create a JSON config with a type field (stats, comparison, flow, or dashboard) and a data field, then run python3 scripts/build_infographic.py config.json. The script writes a self-contained HTML file and prints a JSON status with the output path.

What chart types can I build without JavaScript libraries?▼

This renderer supports four types: KPI stat cards with trend arrows, grouped bar charts with multiple series, numbered flow diagrams with connecting arrows, and dashboards mixing stats, bar charts, and donut breakdowns. All charts are inline SVG.

Does the infographic script require pip install or external dependencies?▼

No. The script uses only the Python 3.7+ standard library (json, math, os, sys, html). The generated HTML also has zero external dependencies, with all CSS and SVG inline, so it works offline in any browser.

Can I customize colors and icons in the generated dashboard?▼

Yes. Set the palette field to one of 8 presets (ocean, sunset, forest, berry, vibrant, corporate, pastel, earth) or use auto for data-based selection. Stat cards and flow steps accept icon names from 24+ built-in SVG icons like users, money, rocket, and target.

Why does the infographic script return a validation error?▼

Errors occur when the config is not a JSON object, the type is not one of stats/comparison/flow/dashboard, the required data field is missing, or the output directory does not exist. The script prints a JSON error object listing all problems.

Related Skills

Explore More Data & Analytics Skills→
ZouZouZouZou

Dashboard & Analytics

Generate analytics dashboards for admins, instructors, and students.

Community
Advanced
shekerkammashekerkamma

analytics-to-comms

Convert product analytics into reports, HTML infographics, slide decks, and Slack or Notion posts.

Community
Advanced
evolution-foundationevolution-foundation
520

pm-metrics-review

Analyze product metrics to explain performance changes and generate actionable insights.

Official
Intermediate
cooopmaccooopmac

d3-viz

Create interactive d3.js visualizations with custom charts and data binding.

Community
Intermediate