Поле layout

В Vega-Lite управление размещением визуальных элементов строится вокруг набора параметров, которые определяют размеры, отступы, поведение масштабирования и структуру составных визуализаций. Формально термин «layout» не является единым полем в спецификации верхнего уровня, однако функционально распределение пространства реализуется через совокупность свойств width, height, padding, autosize, а также через layout-конфигурации для мультивизуализаций: facet, concat, repeat.

Базовое управление размером графика задаётся через параметры width и height.

Ключевые особенности:

  • определяют внутреннюю область рисования (view)
  • влияют на масштабирование осей
  • взаимодействуют с типами autosize

Пример минимальной конфигурации:

{
  "data": {"url": "data.json"},
  "mark": "bar",
  "width": 400,
  "height": 200,
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

В случае faceting или повторения (facet, repeat) эти параметры начинают трактоваться как размеры одной ячейки, а не всей композиции.

autosize: стратегия адаптации размеров

Поле autosize управляет тем, как график реагирует на размеры контейнера и содержимого.

Основные режимы:

  • pad — добавляет отступы для осей и подписей
  • fit — подгоняет содержимое под доступное пространство
  • none — фиксированная область без адаптации
  • fit-x и fit-y — частичная адаптация по осям

Пример:

{
  "autosize": {
    "type": "fit",
    "contains": "padding"
  }
}

Поведение autosize напрямую влияет на layout системы:

  • перерасчёт масштабов при изменении контейнера
  • контроль обрезки элементов
  • согласование с padding

padding: управление внешними границами

padding определяет пространство между границей view и областью отрисовки.

Возможные формы:

  • число (равномерный отступ)
  • объект (асимметричные отступы)
{
  "padding": {
    "left": 10,
    "right": 20,
    "top": 5,
    "bottom": 30
  }
}

Роль padding в layout:

  • предотвращение наложения подписей осей
  • создание визуального «воздуха»
  • корректная работа autosize при contains: padding

View layout и система координат

Внутренний layout view в Vega-Lite включает несколько слоёв:

  1. область данных (plotting region)
  2. осевые элементы
  3. заголовки и легенды
  4. padding-зона

Именно комбинация этих слоёв определяет итоговый размер визуального блока.

Особенность заключается в том, что оси и легенды могут изменять фактическую геометрию, не изменяя width и height.

Facet layout: раскладка множественных графиков

Facet создаёт сетку подграфиков, где layout становится структурным элементом композиции.

{
  "facet": {
    "row": {"field": "category", "type": "nominal"}
  },
  "spec": {
    "mark": "line",
    "encoding": {
      "x": {"field": "year", "type": "temporal"},
      "y": {"field": "value", "type": "quantitative"}
    }
  }
}

Параметры layout в facet

  • columns — количество колонок
  • spacing — расстояние между ячейками
  • bounds — правило вычисления границ

Пример:

{
  "facet": {
    "field": "category",
    "type": "nominal",
    "columns": 3
  },
  "spacing": 15
}

spacing управляет визуальной плотностью сетки, влияя на читаемость и группировку данных.

Concat layout: горизонтальная и вертикальная композиция

Concat объединяет несколько независимых визуализаций в линейный layout.

{
  "hconcat": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "a"},
        "y": {"field": "b"}
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "a"},
        "y": {"field": "c"}
      }
    }
  ]
}

Типы:

  • hconcat — горизонтальное размещение
  • vconcat — вертикальное размещение
  • concat — общий контейнер

Особенности layout в concat

  • независимые оси по умолчанию
  • совместное управление высотой/шириной
  • возможность выравнивания через resolve

Repeat layout: автоматическое тиражирование

Repeat создаёт сетку графиков на основе набора полей.

{
  "repeat": {
    "column": ["a", "b", "c"]
  },
  "spec": {
    "mark": "point",
    "encoding": {
      "x": {"field": {"repeat": "column"}},
      "y": {"field": "value"}
    }
  }
}

Layout поведение:

  • автоматическое распределение по колонкам/строкам
  • наследование размеров одного шаблона
  • контроль spacing через конфигурацию facet-like layout

resolve: управление согласованием layout-элементов

В составных визуализациях важным элементом является resolve.

{
  "resolve": {
    "scale": {"y": "independent"},
    "axis": {"y": "shared"}
  }
}

Влияние на layout:

  • shared — синхронизация размеров осей
  • independent — независимые области рисования

Это напрямую влияет на итоговое распределение пространства между подграфиками.

bounds: контроль геометрических границ

Параметр bounds определяет, учитываются ли элементы вне основной области при расчёте layout.

Значения:

  • full — учитывать всё содержимое
  • flush — игнорировать внешние элементы
{
  "bounds": "flush"
}

Использование влияет на:

  • плотность размещения facet-графиков
  • поведение autosize
  • итоговые размеры контейнера

aspect ratio и сохранение пропорций

Хотя явного поля aspect ratio нет в базовой схеме, пропорции задаются через комбинацию:

  • width
  • height
  • autosize
  • scale range

Для равномерных графиков часто фиксируется соотношение:

{
  "width": 300,
  "height": 300
}

В responsive-режимах пропорции могут нарушаться при fit autosize, что становится частью layout-стратегии.

spacing и композиционная плотность

В составных layout-структурах spacing управляет визуальной иерархией:

  • в facet — расстояние между ячейками
  • в concat — промежутки между графиками (через конфигурацию)
  • в repeat — аналог facet spacing

Пример глобальной настройки:

{
  "config": {
    "facet": {
      "spacing": 20
    }
  }
}

Layout в связке с конфигурацией (config)

Глобальный объект config влияет на layout поведение всех визуализаций.

Основные поля:

  • view
  • padding
  • facet
  • concat

Пример:

{
  "config": {
    "view": {
      "stroke": "transparent"
    },
    "facet": {
      "spacing": 10
    }
  }
}

Это создаёт единый стиль распределения пространства.

Взаимодействие layout с системой Vega

Vega-Lite транслируется в Vega, где layout становится более низкоуровневым графовым вычислением.

На этапе компиляции:

  • facet → group marks + layout signals
  • concat → nested group composition
  • autosize → signal-driven resizing logic

Именно на этом этапе происходит окончательное вычисление геометрии элементов, включая координаты, размеры и отступы.

Итоговая структура layout-управления

Механизм распределения пространства в Vega-Lite складывается из нескольких взаимосвязанных уровней:

  • базовые размеры (width, height)
  • адаптация (autosize)
  • отступы (padding)
  • композиции (facet, concat, repeat)
  • согласование (resolve)
  • плотность (spacing)
  • геометрические ограничения (bounds)

Совокупность этих параметров формирует итоговую модель размещения, в которой каждая визуализация существует как элемент структурированного layout-графа.

Оглавление