vega

Name: vega
Author: markdown-viewer

Create data-driven charts with Vega-Lite (declarative) and Vega (programmatic). Best for statistical visualization of numeric data — bar, line, scatter,…

INSTALLATION

npx skills add https://github.com/markdown-viewer/skills --skill vega

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$27

Rule 3: Field Names Must Match Data

❌ "field": "Category"  when data has "category"

✅ "field": "category"  → Case-sensitive match

Rule 4: Type Must Be Valid

✅ quantitative | nominal | ordinal | temporal

❌ numeric | string | date

Common Pitfalls

Issue

Solution

Chart not rendering

Check JSON validity, verify $schema

Data not showing

Field names must match exactly

Wrong chart type

Match mark to data structure

Colors not visible

Check color scale contrast

Dual-axis issues

Add resolve: {scale: {y: "independent"}}

Output Format

{...}

Or for full Vega:

{...}

Related Files

For advanced chart patterns and complex visualizations, refer to references below:

examples.md — Stacked bar, grouped bar, multi-series line, area, heatmap, radar (Vega), word cloud (Vega), and interactive chart examples