# Vega — A Visualization Grammar for Interactive Graphics

> A declarative language for creating, saving, and sharing interactive visualization designs in JSON.

## Install

Save as a script file and run:

# Vega — A Visualization Grammar for Interactive Graphics

## Quick Use
```bash
npm install vega vega-embed
```
```javascript
import embed from 'vega-embed';
const spec = {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 400, "height": 200,
  "data": [{"name": "table", "values": [{"x": "A", "y": 28}, {"x": "B", "y": 55}]}],
  "marks": [{"type": "rect", "from": {"data": "table"},
    "encode": {"enter": {"x": {"scale": "x", "field": "x"}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0}}}}],
  "scales": [{"name": "x", "type": "band", "domain": {"data": "table", "field": "x"}, "range": "width"},
             {"name": "y", "type": "linear", "domain": {"data": "table", "field": "y"}, "range": "height"}]
};
embed('#vis', spec);
```

## Introduction
Vega is a declarative visualization grammar that describes data visualizations as JSON specifications. Instead of writing imperative drawing code, you define data transformations, scales, axes, and marks, and Vega renders them to Canvas or SVG.

## What Vega Does
- Renders interactive charts, maps, and custom visualizations from JSON specifications
- Supports data loading and transformation (filter, aggregate, bin, window, lookup) within the spec
- Provides signal-driven interactivity for selections, tooltips, brushing, and dynamic parameter binding
- Outputs to SVG for print-quality graphics or Canvas for high-performance rendering
- Serves as the foundation for higher-level tools like Vega-Lite and Altair

## Architecture Overview
Vega parses a JSON specification into a dataflow graph where nodes represent data sources, transforms, scales, and marks. The reactive runtime re-evaluates only changed branches when signals update, enabling efficient interactive updates without full re-renders. The renderer targets either an HTML Canvas element or an SVG DOM tree.

## Self-Hosting & Configuration
- Install via npm or load from a CDN for browser usage
- Use vega-embed for a drop-in component that handles rendering and export controls
- Run server-side with vega and vega-canvas (node-canvas) for headless PNG/SVG generation
- Configure themes by overriding default config values (fonts, colors, padding)
- Integrate with Observable, Jupyter, or any web framework via the View API

## Key Features
- Declarative JSON specs that separate design from implementation
- Built-in geographic projections and cartographic marks for choropleth and point maps
- Comprehensive data transform pipeline including cross-filtering and Voronoi layouts
- Event-driven signal system for linking interactions across multiple views
- Exportable to PNG, SVG, or shareable JSON for reproducibility

## Comparison with Similar Tools
- **D3.js** — lower-level imperative library; Vega provides a higher-level declarative abstraction
- **Vega-Lite** — a concise grammar built on Vega; Vega offers more control over layout and interaction
- **Chart.js** — simpler API for common chart types; Vega handles arbitrary custom visualizations
- **ECharts** — rich out-of-box chart types; Vega emphasizes composable grammar over presets
- **Plotly.js** — interactive charts with dashboards; Vega specs are more portable and editor-friendly

## FAQ
**Q: What is the difference between Vega and Vega-Lite?**
A: Vega-Lite is a higher-level grammar that compiles down to full Vega specs. Use Vega-Lite for quick exploratory charts and Vega when you need fine-grained control over marks, layout, or custom interactions.

**Q: Can Vega handle real-time streaming data?**
A: Yes. The View API supports inserting, removing, and updating data tuples at runtime. The reactive dataflow ensures only affected marks re-render.

**Q: Is server-side rendering supported?**
A: Yes. Install vega and a canvas backend (node-canvas or sharp) in Node.js to generate PNG or SVG images without a browser.

**Q: How large a dataset can Vega handle in the browser?**
A: Vega handles tens of thousands of marks efficiently. For larger datasets, use aggregation transforms or bin data before rendering to keep frame rates smooth.

## Sources
- https://github.com/vega/vega
- https://vega.github.io/vega/

---
Source: https://tokrepo.com/en/workflows/asset-94fcca55
Author: Script Depot