vega_skill
- TypeScript
877
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill xicilion/markdown-viewer-extension --skill vega- SKILL.md2.3 KB
Overview
This skill generates data-driven charts using Vega-Lite for common visualizations and Vega for advanced, custom visuals. It converts arrays of objects into publish-ready JSON specs you can paste inside fenced vega-lite or vega blocks. Use Vega-Lite for most needs and Vega when you require radar charts, word clouds, or force-directed layouts.
How this skill works
You provide data as an array of objects and map fields to encodings like x, y, color, and size. The skill validates and emits a valid JSON spec that always includes the appropriate $schema and correct data types (quantitative, nominal, ordinal, temporal). It favors Vega-Lite by default and switches to Vega when the chosen visualization requires features beyond Vega-Lite.
When to use it
- Plotting bar, line, scatter, area, heatmap, or multi-series analytics from numeric arrays.
- Creating statistically accurate visualizations where field typing and encodings matter.
- Building interactive, declarative charts with consistent schema and cross-browser compatibility.
- Generating radar charts, word clouds, or force-directed graphs (use Vega).
- Avoid for process diagrams or KPI cards—use mermaid or infographic tools instead.
Best practices
- Always include the correct $schema for Vega-Lite or Vega at the top of the JSON spec.
- Supply data as an array of objects and ensure field names match exactly (case-sensitive).
- Use valid JSON with double quotes and no trailing commas; validate before rendering.
- Choose Vega-Lite for 90% of charts; reserve Vega for specialized layouts like radar or word clouds.
- Set field types explicitly to quantitative, nominal, ordinal, or temporal to avoid inference errors.
Example use cases
- Multi-series sales dashboard: multi-line chart with independent y-scales for different metrics.
- Exploratory data analysis: scatter plots with size and color encoding to surface clusters.
- Heatmap of correlation matrices for quick pattern recognition across features.
- Radar chart of product attributes or a word cloud of user feedback (Vega).
- Publication-quality charts where schema compliance and reproducible specs are required.
FAQ
Include "$schema": "https://vega.github.io/schema/vega-lite/v5.json" at the top of the spec.
Why is my data not showing?
Check JSON validity, confirm field names match the data exactly, and ensure each field has the correct type.