Спецификация в Vega и Vega-Lite представляет собой декларативное описание визуализации данных, где вся логика построения графика выражается через структурированный JSON-объект. Такой подход исключает императивное управление отрисовкой и переносит ответственность за рендеринг на движок визуализации.
В основе лежит идея описания не процесса построения графика, а его конечного состояния: какие данные используются, как они преобразуются, каким визуальным каналам соответствуют и какие визуальные примитивы применяются.
Vega-Lite задаёт компактную структуру, скрывающую низкоуровневые механизмы Vega. Основные элементы спецификации:
Минимальная структура:
{
"data": { ... },
"mark": "...",
"encoding": { ... }
}Каждый из этих блоков выполняет строго определённую функцию и образует декларативную цепочку преобразования данных в визуальные элементы.
Vega представляет полную графическую спецификацию, включающую управление сценой, потоками данных и состояниями взаимодействия. В отличие от Vega-Lite, структура Vega более детализирована и включает:
Базовый каркас Vega:
{
"data": [],
"signals": [],
"scales": [],
"projections": [],
"axes": [],
"legends": [],
"marks": []
}Блок данных задаёт входную информацию для визуализации. Поддерживаются различные форматы:
Пример inline-структуры:
{
"data": {
"values": [
{ "category": "A", "value": 28 },
{ "category": "B", "value": 55 }
]
}
}Для внешних источников используется URL:
{
"data": {
"url": "data.csv",
"format": { "type": "csv" }
}
}В Vega-Lite трансформации встроены в спецификацию через
transform, в Vega они представляют отдельные узлы
dataflow.
Типовые операции:
Пример:
{
"transform": [
{ "filter": "datum.value > 10" },
{ "calculate": "datum.value * 2", "as": "scaled" }
]
}Mark определяет способ визуального представления данных:
bar — столбцыline — линииarea — областиpoint — точкиrect — прямоугольникиtext — текстовые элементыПример:
{
"mark": "bar"
}Mark может быть объектом с дополнительными настройками:
{
"mark": {
"type": "line",
"interpolate": "monotone",
"strokeWidth": 2
}
}Эти параметры определяют визуальное поведение примитивов, не затрагивая данные напрямую.
Encoding связывает данные с визуальными переменными:
Пример:
{
"encoding": {
"x": { "field": "category", "type": "nominal" },
"y": { "field": "value", "type": "quantitative" }
}
}Vega-Lite требует явного указания типа данных:
quantitative — числовые значенияnominal — категориальные данные без порядкаordinal — упорядоченные категорииtemporal — временные значенияТип данных влияет на выбор шкалы и поведения осей.
Один набор данных может быть отображён через несколько каналов одновременно:
{
"encoding": {
"x": { "field": "date", "type": "temporal" },
"y": { "field": "price", "type": "quantitative" },
"color": { "field": "region", "type": "nominal" }
}
}Шкалы преобразуют значения данных в координаты или визуальные параметры. Они являются промежуточным слоем между данными и mark.
Типы шкал:
Пример явного задания:
{
"scale": {
"type": "linear",
"domain": [0, 100],
"range": [0, 500]
}
}Эта пара формирует математическое отображение:
y = f(x)
В контексте Vega это отображение может быть линейным, логарифмическим или категориальным.
Оси визуализируют шкалы и обеспечивают интерпретацию значений:
{
"axis": {
"orient": "bottom",
"title": "Категория"
}
}Оси автоматически создаются на основе шкал, привязанных к encoding каналам. В Vega-Lite оси обычно не описываются явно, а генерируются системой.
Легенды отображают соответствие между визуальными свойствами и данными.
Пример:
{
"legend": {
"title": "Регион"
}
}Каждая легенда связана с конкретным encoding каналом.
Transform блок позволяет изменять данные перед визуализацией:
Пример агрегации:
{
"transform": [
{
"aggregate": [
{ "op": "mean", "field": "value", "as": "avgValue" }
],
"groupby": ["category"]
}
]
}Биннинг используется для дискретизации числовых данных:
{
"transform": [
{
"bin": true,
"field": "value",
"as": "binnedValue"
}
]
}Signals представляют динамические значения, изменяющиеся при взаимодействии пользователя.
{
"signals": [
{
"name": "width",
"value": 400
}
]
}Signals позволяют связывать параметры визуализации с событиями:
Сигналы формируют реактивную модель состояния.
В Vega marks являются частью dataflow графа:
{
"type": "rect",
"from": { "data": "table" },
"encode": {
"enter": { ... },
"update": { ... }
}
}Эта модель обеспечивает эффективное обновление визуализации без полной перерисовки.
Projections используются в географических визуализациях для преобразования координат:
{
"projections": [
{
"type": "mercator"
}
]
}Проекции позволяют отображать:
Vega поддерживает вложенные визуализации и компоновку:
Пример слоя:
{
"layer": [
{ "mark": "line" },
{ "mark": "point" }
]
}Facet разбивает данные на подграфики:
{
"facet": {
"row": { "field": "region" }
}
}Каждая панель представляет отдельный поднабор данных.
Итоговая структура спецификации включает:
Эта структура формирует декларативный граф преобразования данных в визуальные представления, где каждый блок выполняет строго определённую роль в общей системе отображения.