vega_skill

This skill helps you create data-driven charts with Vega-Lite and Vega, enabling clear visual insights from numeric data arrays.
  • 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.

Built by
VeilStrat
AI signals for GTM teams
© 2026 VeilStrat. All rights reserved.All systems operational