# vega/vega-lite

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vega-vega-lite).**

5,216 stars · 686 forks · TypeScript · bsd-3-clause

## Links

- GitHub: https://github.com/vega/vega-lite
- Homepage: https://vega.github.io/vega-lite/
- awesome-repositories: https://awesome-repositories.com/repository/vega-vega-lite.md

## Topics

`charts` `declarative-language` `plot` `vega` `vega-lite` `visual-analysis` `visualization` `visualization-grammar`

## Description

Vega-Lite is a high-level declarative language for specifying interactive, multi-view visualizations. It compiles a concise JSON specification into a full Vega visualization, automatically inferring scales, axes, and legends from encoding declarations. The grammar-of-graphics encoding maps data fields to visual channels such as position, color, size, and shape, while a multi-view composition grammar enables layered, faceted, concatenated, and repeated layouts. Reactive parameter binding links named parameters to input widgets, selections, and expressions for dynamic updates.

The project supports interactive data exploration through selections, tooltips, and pan/zoom interactions. Statistical visualizations include histograms, box plots, density estimates, regression lines, and loess smoothing. Geographic mapping renders GeoJSON shapes using configurable cartographic projections for choropleths and point maps. A data transformation pipeline provides aggregation, binning, filtering, window calculations, and reshaping operations like fold and pivot.

Vega-Lite supports a wide variety of mark types, from bars, lines, and areas to points, text, images, and tick marks. Global configuration and theming allow uniform styling across axes, legends, and marks. Data can be loaded from inline JSON, remote URLs, runtime injection, or generated as numeric sequences, with shared datasets and per-field parsing rules.

The specification compiles to a low-level Vega description, which can be embedded in web pages and exported via the included viewer.

## Tags

### Graphics & Multimedia

- [Declarative Visualization Grammars](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/declarative-visualization-grammars.md) — Provides a high-level JSON grammar that defines interactive, multi-view visualizations and compiles into Vega.
- [Declarative Specification Compilers](https://awesome-repositories.com/f/graphics-multimedia/declarative-specification-compilers.md) — Vega-Lite compiles high-level declarative specifications into a lower-level format that exposes every detail for advanced editing. ([source](https://vega.github.io/vega-lite/))
- [Visual Property Mappings](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/data-driven-shape-generators/visual-property-mappings.md) — Maps data fields to visual properties like color, size, and shape for mark appearance. ([source](https://vega.github.io/vega-lite/docs/encoding.html))
- [Multi-View Layouts](https://awesome-repositories.com/f/graphics-multimedia/multi-view-layouts.md) — Arranges multiple chart views into layered overlays, faceted grids, or concatenated layouts. ([source](https://vega.github.io/vega-lite/docs/spec.html))
- [Numerical Data Plotting](https://awesome-repositories.com/f/graphics-multimedia/numerical-data-plotting.md) — Maps numerical data to continuous scales for chart rendering with automatic zero inclusion. ([source](https://vega.github.io/vega-lite/docs/type.html))
- [View Layering & Faceting](https://awesome-repositories.com/f/graphics-multimedia/view-layering-faceting.md) — Combines multiple chart specifications into layered, faceted, concatenated, or repeated layouts with shared scales and axes.
- [Multi-Chart Type Libraries](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/composite-visualizations/mixed-chart-types/multi-chart-type-libraries.md) — Provides a grammar for creating bar, line, scatter, and area charts from data fields. ([source](https://vega.github.io/vega-lite/examples/))
- [Chart Composition Layers](https://awesome-repositories.com/f/graphics-multimedia/composition-visual-layers/chart-composition-layers.md) — Stacks multiple chart views into a single layered visualization by combining their specifications. ([source](https://vega.github.io/vega-lite/docs/layer.html))
- [Conditional Mark Stylers](https://awesome-repositories.com/f/graphics-multimedia/conditional-mark-stylers.md) — Changes mark color, size, and other properties based on data conditions and parameters. ([source](https://vega.github.io/vega-lite/docs/condition.html))
- [Band Position Offsets](https://awesome-repositories.com/f/graphics-multimedia/positional-encodings/band-position-offsets.md) — Sets relative positions within bands to shift marks in chart visualizations. ([source](https://vega.github.io/vega-lite/docs/bandposition.html))
- [Axis Appearance Configurations](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/axis-appearance-configurations.md) — Sets default axis styling with overrides based on orientation and scale type. ([source](https://vega.github.io/vega-lite/docs/axis.html))
- [Domain Customizations](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/mapping-libraries/data-visualization-scales/domain-customizations.md) — Defines custom input data ranges for scale domains in chart visualizations. ([source](https://vega.github.io/vega-lite/docs/scale.html))
- [Domain Ordering Controls](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/mapping-libraries/data-visualization-scales/domain-ordering-controls.md) — Orders scale domain values based on data fields for controlled visual ordering. ([source](https://vega.github.io/vega-lite/docs/sort.html))
- [Mapping Function Selections](https://awesome-repositories.com/f/graphics-multimedia/visualization-mapping/mapping-libraries/data-visualization-scales/mapping-function-selections.md) — Selects mathematical mapping functions like linear or log for data-to-visual transformations. ([source](https://vega.github.io/vega-lite/docs/scale.html))

### Artificial Intelligence & ML

- [Chart Coordinate Mappings](https://awesome-repositories.com/f/artificial-intelligence-ml/positional-encodings/spatial-coordinate-encodings/chart-coordinate-mappings.md) — Maps data fields to Cartesian, polar, or geographic coordinates for chart rendering. ([source](https://vega.github.io/vega-lite/docs/encoding.html))
- [Kernel Density Estimation](https://awesome-repositories.com/f/artificial-intelligence-ml/kernel-density-estimation.md) — Vega-Lite performs one-dimensional kernel density estimation over input data, generating samples of estimated densities for each group. ([source](https://vega.github.io/vega-lite/docs/density.html))
- [Linear Regression Models](https://awesome-repositories.com/f/artificial-intelligence-ml/linear-regression-models.md) — Vega-Lite fits parametric regression models to two-dimensional data and outputs trend lines or parameters per group. ([source](https://vega.github.io/vega-lite/docs/regression.html))
- [Statistical Transformation Pipelines](https://awesome-repositories.com/f/artificial-intelligence-ml/model-training-pipelines/statistical-pipelines/statistical-transformation-pipelines.md) — Applies binning, aggregation, regression, density estimation, and window calculations before rendering marks.

### Data & Databases

- [Conditional Data Filters](https://awesome-repositories.com/f/data-databases/conditional-data-filters.md) — Vega-Lite filters a dataset by testing each data point against a condition defined as a field comparison, expression, or selection membership. ([source](https://vega.github.io/vega-lite/docs/predicate.html))
- [Statistical Aggregators](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/advanced-analytics-functions/statistical-aggregators.md) — Vega-Lite summarizes data by grouping raw records and applying aggregate functions such as mean, median, or count. ([source](https://vega.github.io/vega-lite/docs/aggregate.html))
- [Geographic Projections](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/chart-components-utilities/geographic-projections.md) — Projects geographic coordinates from GeoJSON data to pixel positions using configurable cartographic projections.
- [Multi-Channel Legend Generators](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/statistical-plotting-libraries/plot-axis-customizers/legend-management/multi-channel-legend-generators.md) — Automatically creates legends for color, size, shape, and opacity scales from encoding declarations. ([source](https://vega.github.io/vega-lite/docs/legend.html))
- [Dataset Reshapers](https://awesome-repositories.com/f/data-databases/data-collections-datasets/dataset-reshapers.md) — Vega-Lite maps unique values from a field to new aggregated columns and populates cells with aggregated values from another field. ([source](https://vega.github.io/vega-lite/docs/pivot.html))
- [Augmented](https://awesome-repositories.com/f/data-databases/grouped-aggregations/augmented.md) — Vega-Lite computes aggregate values over groups and appends them as new fields to each record without collapsing the group. ([source](https://vega.github.io/vega-lite/docs/joinaggregate.html))
- [Interactive Data Charting](https://awesome-repositories.com/f/data-databases/interactive-data-charting.md) — Implements brushing, clicking, and linked views for exploratory data analysis directly in the browser.
- [Runtime Data Injections](https://awesome-repositories.com/f/data-databases/runtime-data-injections.md) — Vega-Lite binds a named placeholder in the specification and injects data later through a runtime API call. ([source](https://vega.github.io/vega-lite/docs/data.html))
- [Scale and Guide Inference Engines](https://awesome-repositories.com/f/data-databases/scale-and-guide-inference-engines.md) — Automatically determines appropriate scales and generates matching axes and legends from data encodings.
- [Shared Dataset Definitions](https://awesome-repositories.com/f/data-databases/shared-dataset-definitions.md) — Vega-Lite allows you to declare reusable data sources at the top level and reference them by name in multiple specifications. ([source](https://vega.github.io/vega-lite/docs/data.html))
- [Area Mark Renderings](https://awesome-repositories.com/f/data-databases/area-mark-renderings.md) — Renders area marks as filled shapes to show trends or confidence intervals over time. ([source](https://vega.github.io/vega-lite/docs/area.html))
- [Box Plots](https://awesome-repositories.com/f/data-databases/box-plots.md) — Renders box plots showing median, quartiles, and outliers of quantitative distributions. ([source](https://vega.github.io/vega-lite/docs/boxplot.html))
- [Axis Title and Grid Customizers](https://awesome-repositories.com/f/data-databases/chart-axes/axis-title-and-grid-customizers.md) — Customizes axis titles, labels, tick marks, and grid lines with expression-based styling. ([source](https://vega.github.io/vega-lite/docs/axis.html))
- [Output Range Definitions](https://awesome-repositories.com/f/data-databases/chart-axes/scale-and-range-configurations/output-range-definitions.md) — Configures output visual ranges like pixel sizes and colors for chart scales. ([source](https://vega.github.io/vega-lite/docs/scale.html))
- [Bar Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts.md) — Maps one discrete or temporal field to an axis and one quantitative field to the other to produce a bar chart. ([source](https://vega.github.io/vega-lite/docs/bar.html))
- [Stacked and Grouped Bar Plots](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts/stacked-and-grouped-bar-plots.md) — Colors bars by a categorical field to create a stacked chart with normalization and grouping options. ([source](https://vega.github.io/vega-lite/docs/bar.html))
- [Error Bar Visualizations](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/statistical-plotting-libraries/plot-axis-customizers/indicator-visualization-configuration/error-bar-visualizations.md) — Summarizes a range of quantitative values using statistical measures like standard error or confidence intervals. ([source](https://vega.github.io/vega-lite/docs/errorbar.html))
- [Reference Data Lookups](https://awesome-repositories.com/f/data-databases/data-lookup-interfaces/reference-data-lookups.md) — Vega-Lite looks up each record in the main data set against a reference and attaches selected fields from the matching record. ([source](https://vega.github.io/vega-lite/docs/lookup.html))
- [Aggregate Grouping Controls](https://awesome-repositories.com/f/data-databases/data-management/table-data-managers/visual-data-grouping/aggregate-grouping-controls.md) — Controls data grouping and order for aggregates and stacking in visualizations. ([source](https://vega.github.io/vega-lite/docs/encoding.html))
- [Histogram Plotters](https://awesome-repositories.com/f/data-databases/data-management/unique-identifier-generators/uniqueness-enforcement/distribution-histograms/histogram-plotters.md) — Generates histograms by binning continuous data and counting records per bin. ([source](https://vega.github.io/vega-lite/docs/bar.html))
- [Global Chart Defaults](https://awesome-repositories.com/f/data-databases/data-visualization-charts/chart-configuration-serialization/global-chart-defaults.md) — Configures global chart properties including dimensions, padding, background, and autosize. ([source](https://vega.github.io/vega-lite/docs/spec.html))
- [Chart Markup Languages](https://awesome-repositories.com/f/data-databases/interactive-data-charting/chart-markup-languages.md) — Ships a declarative language for specifying charts with built-in selections, tooltips, and parameter-driven interactivity.
- [Missing Data Imputation](https://awesome-repositories.com/f/data-databases/missing-data-imputation.md) — Vega-Lite fills missing data values by generating new data points using a constant value or statistical methods within groups. ([source](https://vega.github.io/vega-lite/docs/impute.html))
- [Text Search and Marking](https://awesome-repositories.com/f/data-databases/text-search-and-marking.md) — Specifies mark types and customizes their appearance via properties, global config, and named styles. ([source](https://vega.github.io/vega-lite/docs/mark.html))
- [Time Interval Operations](https://awesome-repositories.com/f/data-databases/time-series-sql-querying/time-interval-operations.md) — Vega-Lite breaks continuous time into meaningful intervals such as year, month, or hour for grouping and aggregation. ([source](https://vega.github.io/vega-lite/docs/timeunit.html))
- [View Repetition for Field Arrays](https://awesome-repositories.com/f/data-databases/view-repetition-for-field-arrays.md) — Repeats a chart specification multiple times for different data fields to create comparative grids. ([source](https://vega.github.io/vega-lite/docs/repeat.html))
- [Wide-to-Long Reshaping](https://awesome-repositories.com/f/data-databases/wide-to-long-reshaping.md) — Vega-Lite collapses one or more data fields into key and value properties, converting wide records into long-format rows. ([source](https://vega.github.io/vega-lite/docs/fold.html))
- [Window Functions](https://awesome-repositories.com/f/data-databases/window-functions.md) — Provides a pipeline for windowed calculations such as running sums and rankings over sorted data groups. ([source](https://vega.github.io/vega-lite/docs/window.html))

### Networking & Communication

- [URL Dataset Fetches](https://awesome-repositories.com/f/networking-communication/direct-url-retrievals/url-dataset-fetches.md) — Vega-Lite fetches a dataset from a remote URL and parses it according to the inferred or specified format type. ([source](https://vega.github.io/vega-lite/docs/data.html))

### Scientific & Mathematical Computing

- [Numerical Binning](https://awesome-repositories.com/f/scientific-mathematical-computing/data-discretization/temporal-discretization/numerical-binning.md) — Vega-Lite discretizes numeric values into bins for aggregation and histogram visualizations. ([source](https://vega.github.io/vega-lite/docs/bin.html))
- [Numeric Data Formatting](https://awesome-repositories.com/f/scientific-mathematical-computing/numeric-data-formatting.md) — Formats numeric and temporal data values for display on axes, legends, headers, and text marks. ([source](https://vega.github.io/vega-lite/docs/format.html))

### Software Engineering & Architecture

- [Parameter State Predicates](https://awesome-repositories.com/f/software-engineering-architecture/boolean-predicates/parameter-state-predicates.md) — Vega-Lite applies conditional styling or filtering by evaluating parameter state as a boolean predicate. ([source](https://vega.github.io/vega-lite/docs/parameter.html))
- [Field Name References](https://awesome-repositories.com/f/software-engineering-architecture/data-schema-definitions/named-schema-references/field-name-references.md) — References data fields by name in encoding channels for chart specification. ([source](https://vega.github.io/vega-lite/docs/field.html))
- [Declarative Spec Compilers](https://awesome-repositories.com/f/software-engineering-architecture/declarative-spec-compilers.md) — Transforms concise declarative chart specifications into complete Vega visualization code automatically.
- [Visual Property Constants](https://awesome-repositories.com/f/software-engineering-architecture/type-safe-constants/color-constants/visual-property-constants.md) — Assigns fixed visual properties like color and size uniformly across chart marks. ([source](https://vega.github.io/vega-lite/docs/value.html))

### User Interface & Experience

- [Categorical Data Mappings](https://awesome-repositories.com/f/user-interface-experience/categorical-data-mappings.md) — Vega-Lite maps categorical data with or without defined sort order, differentiating values by name or rank. ([source](https://vega.github.io/vega-lite/docs/type.html))
- [Named Palette Applications](https://awesome-repositories.com/f/user-interface-experience/color-schemes/named-palette-applications.md) — Applies predefined named color palettes to data encodings for chart visualization. ([source](https://vega.github.io/vega-lite/docs/scale.html))
- [Data-to-Visual Mappings](https://awesome-repositories.com/f/user-interface-experience/data-to-visual-mappings.md) — Maps data fields to visual channels like position, color, and size for chart rendering. ([source](https://vega.github.io/vega-lite/tutorials/getting_started.html))
- [Declarative Statistical Plotting](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/charting-frameworks/immediate-mode-plotting-libraries/statistical-distribution-visualizers/statistical-charting-suites/declarative-statistical-plotting.md) — Generates histograms, density plots, box plots, and error bars via declarative statistical plotting. ([source](https://vega.github.io/vega-lite/examples/))
- [Declarative Interaction Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-interaction-frameworks.md) — Vega-Lite defines visualizations with a concise JSON syntax that compiles to a lower-level chart specification for interactive rendering. ([source](https://vega.github.io/vega-lite/docs/))
- [Declarative Selection Parameters](https://awesome-repositories.com/f/user-interface-experience/declarative-selection-parameters.md) — Vega-Lite defines data queries triggered by mouse clicks or drags to select discrete points or continuous ranges. ([source](https://vega.github.io/vega-lite/docs/parameter.html))
- [Interactive Parameter Definitions](https://awesome-repositories.com/f/user-interface-experience/interactive-parameter-definitions.md) — Vega-Lite stores a reusable value that can be bound to input widgets or computed from expressions for dynamic updates. ([source](https://vega.github.io/vega-lite/docs/parameter.html))
- [Interval Selections](https://awesome-repositories.com/f/user-interface-experience/interval-selections.md) — Vega-Lite defines a selection based on drag interactions, allowing users to brush, pan, and zoom over a continuous range. ([source](https://vega.github.io/vega-lite/docs/selection.html))
- [Reactive Parameter Bindings](https://awesome-repositories.com/f/user-interface-experience/reactive-parameter-bindings.md) — Binds named parameters to sliders, dropdowns, and selections for dynamic chart updates.
- [Selection-Triggered Scale Updates](https://awesome-repositories.com/f/user-interface-experience/selection-triggered-scale-updates.md) — Vega-Lite links a selection parameter to a scale domain or bin extent to implement interactive zoom or filtering. ([source](https://vega.github.io/vega-lite/docs/parameter.html))
- [Temporal Coordinate Mapping](https://awesome-repositories.com/f/user-interface-experience/temporal-coordinate-mapping.md) — Maps date-time data to time scales for sequential encoding in chart visualizations. ([source](https://vega.github.io/vega-lite/docs/type.html))
- [Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/theme-definitions.md) — Defines default properties for axes, legends, marks, and scales to enforce uniform chart styling. ([source](https://vega.github.io/vega-lite/docs/config.html))
- [Data Selection](https://awesome-repositories.com/f/user-interface-experience/user-interaction-patterns/interaction-toggles/interactivity-toggles/plot/data-selection.md) — Vega-Lite defines a selection based on direct clicks, toggling discrete data values in and out of the selection set. ([source](https://vega.github.io/vega-lite/docs/selection.html))
- [Legend Appearance Customizers](https://awesome-repositories.com/f/user-interface-experience/chart-components/chart-legends/legend-appearance-customizers.md) — Customizes legend properties including title, labels, direction, and gradient styles. ([source](https://vega.github.io/vega-lite/docs/legend.html))
- [Continuous Scale Adjustments](https://awesome-repositories.com/f/user-interface-experience/color-themes/chart-color-theming/scale-configurations/continuous-scale-adjustments.md) — Configures continuous scale properties like clamping and interpolation for chart axes. ([source](https://vega.github.io/vega-lite/docs/scale.html))
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/content-display-components/tooltips.md) — Vega-Lite displays data values as text on marks or as tooltip on hover with automatic formatting for quantitative and temporal values. ([source](https://vega.github.io/vega-lite/docs/encoding.html))
- [Donut Charts](https://awesome-repositories.com/f/user-interface-experience/dashboard-widgets/donut-charts.md) — Creates circular charts using arc marks with theta and color encodings, with an option to hollow the center for a donut. ([source](https://vega.github.io/vega-lite/docs/arc.html))
- [Data Point Tooltips](https://awesome-repositories.com/f/user-interface-experience/data-point-tooltips.md) — Vega-Lite generates tooltips on hover for data points, either automatically from the encoding or via explicit specification. ([source](https://vega.github.io/vega-lite/docs/tooltip.html))
- [Image Renderers](https://awesome-repositories.com/f/user-interface-experience/data-tables/image-renderers.md) — Provides a declarative way to embed external image files as chart marks for icons or photos. ([source](https://vega.github.io/vega-lite/docs/image.html))
- [Declarative Charting Components](https://awesome-repositories.com/f/user-interface-experience/declarative-charting-components.md) — Defines a declarative specification language for constructing charts with automatic axes, scales, and legends.
- [Mark Stacking Alignments](https://awesome-repositories.com/f/user-interface-experience/layout-positioning/stacking-calculators/mark-stacking-alignments.md) — Aligns stacked marks along position channels with configurable baseline offsets. ([source](https://vega.github.io/vega-lite/docs/stack.html))

### Web Development

- [Data Transformation Pipelines](https://awesome-repositories.com/f/web-development/jsx-transformers/data-transformation-pipelines.md) — Vega-Lite applies ordered transformations like aggregation, binning, filtering, and calculation to prepare a dataset for visual encoding. ([source](https://vega.github.io/vega-lite/))
- [Web Element Embedding](https://awesome-repositories.com/f/web-development/web-element-embedding.md) — Vega-Lite embeds a declarative chart specification into a web page by attaching it to a DOM element and auto-generating export controls. ([source](https://vega.github.io/vega-lite/usage/embed.html))

### Part of an Awesome List

- [Heatmap Visualization](https://awesome-repositories.com/f/awesome-lists/data/heatmap-visualization.md) — Maps two discrete or binned fields to axes and colors each cell by an aggregated measure. ([source](https://vega.github.io/vega-lite/docs/rect.html))
- [Sequential Mark Cycling](https://awesome-repositories.com/f/awesome-lists/devtools/navigation-marks/sequential-mark-cycling.md) — Connects data points with lines to show trends or trajectories over time or ordered values. ([source](https://vega.github.io/vega-lite/docs/line.html))
- [Statistical Visualizers](https://awesome-repositories.com/f/awesome-lists/devtools/plotting-and-visualization/statistical-visualizers.md) — Generates histograms, box plots, density estimates, and regression lines to reveal data distributions.
- [Chart Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/chart-libraries.md) — High-level grammar for creating interactive graphics.