Transform JSON or CSV data into stunning interactive HTML dashboards with auto-detected charts, KPI cards, and dark glass-morphism design. Generates complete standalone HTML with Chart.js.
Data & analysis
data-viz-wizard
Try itTransform CSV data into stunning interactive chart visualizations with Chart.js
What it does
Transform CSV data into stunning interactive chart visualizations with Chart.js
The skill document
Data Viz Wizard
Transform any CSV file into stunning, interactive HTML chart visualizations powered by Chart.js.
Quick Start
# Auto-detect best chart type
python scripts/viz_wizard.py chart sales.csv --type auto --output chart.html
# Generate a full dashboard with multiple charts
python scripts/viz_wizard.py dashboard data.csv --output dashboard.html
# Specify exact chart type and axes
python scripts/viz_wizard.py csv metrics.csv --type line --x date --y revenue --title 'Revenue Trend'
# Pipe data via stdin
cat data.csv | python scripts/viz_wizard.py --auto --output viz.html
Commands
| Command | Description |
|---|---|
chart | Generate a single chart (best auto-detected type) |
dashboard | Generate multi-chart dashboard from same dataset |
csv | Explicit chart with specified type and columns |
| (stdin pipe) | --auto mode reads CSV from stdin |
Flags
| Flag | Description |
|---|---|
--type | Chart type: auto, line, bar, stacked, area, scatter, pie, donut, radar, heatmap-grid |
--x | Column name for X-axis |
--y | Column name(s) for Y-axis (comma-separated) |
--output / -o | Output HTML file path |
--title | Chart title |
--palette | Color palette: viridis, sunset, ocean, monochrome, neon |
--trend | Add trend line |
--moving-average / -ma | Window size for moving average |
--theme | dark, light, or auto (toggleable) |
--auto | Full auto-mode (stdin) |
Column Auto-Detection
The wizard auto-detects column types:
- Date: ISO dates,
YYYY-MM-DD,MM/DD/YYYY, etc. - Numeric: integers, floats, currency
- Percentage: values with
%suffix - Categorical: strings, low-cardinality text
Output Features
Every generated HTML includes:
- Smooth Chart.js animations
- Professional color palettes
- Dark/light theme toggle ( persisted)
- Download chart as PNG button
- Responsive resize
- Smart tooltips (currency, percentage, date formatting)
References
- Chart Selection Guide — Decision tree for choosing the right chart type
- Color Palettes — Palette definitions and when to use each
Related skills
Default skill for structured-data visualization, chart generation, and dashboard-style reporting. Use when the user asks to create charts, graphs, plots, das...
Generate beautiful Apple HIG-inspired HTML visualizations (bar, line, donut, progress, stat-card) and screenshot them as PNG images. Use when user asks to vi...
Turn CSV, Excel, or JSON files into interactive ECharts HTML with 16 chart types and LLM-assisted data transforms.
Create Apache ECharts option JSON, standalone HTML chart pages, and export-ready chart artifacts from CSV, TSV, JSON tables, or existing option configs. Use...
Generate charts from natural language or tabular data, recommend chart types, and export ECharts-based HTML or SVG. Use when users ask for one-sentence chart...