Vega Lite 6 4 3

Vega-Lite 6.4.3

Overview

Vega-Lite is a high-level grammar for interactive graphics. It provides a concise JSON syntax for rapidly generating interactive multi-view visualizations. A Vega-Lite specification declares the data, mark type, and encoding channels; the compiler then produces a full Vega specification that renders the chart.

Spec Structure

Every Vega-Lite spec is a JSON object. The simplest form is a single-view specification:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "description": "A simple bar chart",
  "data": { "url": "data/cars.json" },
  "mark": "bar",
  "encoding": {
    "x": { "field": "Origin", "type": "nominal" },
    "y": { "aggregate": "count", "type": "quantitative" }
  }
}

Top-Level Properties

Common Properties (all spec types)

Single-View Properties

Composition Types

Beyond single-view specs, Vega-Lite supports four composition operators:

• layer — overlay multiple marks on the same view
• facet — split a chart into a grid of small multiples
• concat (hconcat, vconcat, concat) — arrange views side-by-side or stacked
• repeat — repeat a spec across fields, rows, or columns

Composition specs add layout properties (align, bounds, center, spacing) and a resolve property for independent scales/axes/legends.

Data Sources

Vega-Lite supports four ways to provide data:

Inline Values

Embed data directly in the spec as an array of objects:

{
  "data": {
    "values": [
      {"category": "A", "value": 28},
      {"category": "B", "value": 55}
    ]
  }
}

Primitive arrays ([5, 3, 8]) are auto-mapped to {"data": value} objects.

URL

Load external data (JSON by default, CSV/TSV with format):

{
  "data": {
    "url": "data/cars.json",
    "format": { "type": "json" }
  }
}

Format types: json, csv, tsv, dsv (custom delimiter), topojson.

Named

Declare a named data source to be populated at runtime via Vega's View API:

{ "data": { "name": "myData" } }

Datasets

Top-level datasets mapping for shared inline data across multiple references:

{
  "datasets": { "shared": [1, 2, 3] },
  "data": { "name": "shared" }
}

Data Generators

• sequence — generate numeric sequences (start, stop, step)
• graticule — GeoJSON latitude/longitude grid for maps
• sphere — GeoJSON sphere object for globe backgrounds

Encoding Channels

The encoding object maps data to visual properties. Each channel definition is one of:

• Field definition — {field, type} with optional scale/axis/sort settings
• Value definition — {value: ...} for constant visual values
• Datum definition — {datum: ...} for constant data values through a scale

Channel Groups

Data Types

Every field definition requires a type:

Channel Definition Properties

Beyond field and type, field definitions support:

• Inline transforms: aggregate, bin, timeUnit
• Scale config: scale object with type, domain, range, zero, nice, clamp
• Axis config: axis object with title, format, labelAngle, orient, etc.
• Legend config: legend object with title, orient, symbolType, etc.
• Sort order: sort — "ascending", "descending", "x", array, or field
• Conditional encoding: condition for parameter-driven visual changes
• Format: format string for text/tooltip display

Mark Types

The mark property declares the visual primitive. It can be a simple string ("bar") or a mark definition object ({type: "bar", filled: true}).

Primitive Marks (11)

Composite Marks (3)

Mark Definition Object

{
  "mark": {
    "type": "point",
    "filled": true,
    "size": 100,
    "strokeWidth": 1.5
  }
}

Mark properties are organized into groups:

• General: cursor, style, tooltip, clip, invalid, order, aria
• Position/Offset: x, y, width, height, xOffset, yOffset
• Color: filled, color, fill, stroke, opacity, fillOpacity, strokeOpacity, blend
• Stroke Style: strokeCap, strokeDash, strokeJoin, strokeWidth
• Hyperlink: href

Mark properties in the definition are overridden by encoding channels. Global defaults can be set via config.mark or mark-specific configs like config.bar.

When to Use

Use this skill when you need to:

• Generate a Vega-Lite spec from a description of the desired chart (bar, line, scatterplot, heatmap, map, etc.)
• Build interactive visualizations with selection parameters, brushes, crossfiltering, or hover effects
• Compose multi-view layouts using layer, facet, concat, or repeat operators
• Transform data within the spec using aggregate, bin, calculate, filter, window, joinaggregate, or other transforms
• Embed Vega-Lite in web applications — compile to Vega, use the embed API, configure TypeScript usage
• Debug or optimize existing specs — fix encoding errors, adjust scales/axes/legends, handle invalid data
• Explore data visually — generate histograms, QQ plots, parallel coordinates, ternary diagrams, and other analytical chart types

Advanced Topics

Foundation

• Spec Structure & Data Sources — full spec patterns, all data source types, view sizing
• Encoding Channels — complete channel reference, scales, axes, legends, conditionals
• Mark Basics — mark definition properties, config, styles

Mark Types

• Bar Charts — simple, grouped, stacked, binned, temporal, labeled, Gantt, bullet
• Line Charts — time series, multi-line, imputed, slope, bump, interpolation
• Trail Charts — connected trails, comet charts
• Area Charts — stacked, density, gradient, horizon
• Scatterplots (Circle) — 2D scatter, bubble, binned, dot plots
• Point Marks — 1D/2D points, shapes, color/opacity encodings
• Rect Charts — heatmaps, mosaics, lasagna
• Arc Charts — pie, donut, radial histograms
• Rule Marks — color mean, extent rules
• Tick Marks — dot plots, strips, histogram ticks
• Text Marks — labels, annotations, format strings
• Square & Image — square points, embedded images

Composite Marks

• Boxplots — 1D/2D, grouped, pre-aggregated, custom marks
• Error Marks — errorbars and errorbands

Geographic

• Geographic Charts — choropleths, geo points/lines, projections

Composition

• Histograms — bin patterns, log/nonlinear bins
• Layer Composition — overlaying marks, dual-axis, annotations
• Facet & Trellis — row/column faceting, small multiples
• Concat & Repeat — hconcat/vconcat, repeat operators, resolve

Cross-Cutting

• Transforms — all 19 data transforms as reference catalog
• Parameters & Selection — interactivity, selections, bindings
• Advanced Patterns — waterfall, parallel coordinates, ternary, isotype
• Usage & Embedding — web embedding, compilation, TypeScript, debugging