Поле padding и paddingInner, paddingOuter

В системах визуализации Vega и Vega-Lite термин padding относится к управлению внутренними и внешними отступами области отрисовки графика. Эти параметры влияют не на данные, а на геометрию размещения визуальных элементов внутри SVG/Canvas-контейнера.

Padding используется в двух различных уровнях:

  • глобальный padding — отступы всей визуализации от границ viewport;
  • масштабируемые параметры paddingInner и paddingOuter — управление распределением пространства внутри дискретных шкал (band/point).

Эти механизмы решают разные задачи и не взаимозаменяемы.

Глобальный padding (область холста)

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

Структура

{
  "padding": 20
}

или расширенная форма:

{
  "padding": {
    "top": 10,
    "bottom": 20,
    "left": 30,
    "right": 40
  }
}

Поведение

Визуализация в Vega-Lite состоит из:

  • области графика (plot area)
  • осей
  • подписей
  • легенд (иногда)

padding определяет, сколько пространства оставляется между внешним контейнером и внутренней компоновкой.

Важные свойства:

  • не влияет на масштаб данных;
  • не меняет координатную систему;
  • влияет на расположение осей и легенд;
  • участвует в расчёте размеров viewBox.

Пример влияния

При padding: 0 оси могут быть прижаты к краям SVG, а подписи обрезаться.

При увеличении padding:

  • текст становится читаемым;
  • легенды не перекрывают график;
  • появляется визуальный «воздух».

padding в контексте layout и компоновки

В Vega-Lite padding участвует в вычислении финального размера сцены:

final_width = width + padding.left + padding.right
final_height = height + padding.top + padding.bottom

Где width и height — это область данных (plot area).

При этом Vega может дополнительно учитывать:

  • axis ticks
  • label bounding boxes
  • legend layout

paddingInner и paddingOuter: управление дискретными шкалами

В отличие от глобального padding, параметры paddingInner и paddingOuter относятся к шкалам (scales), прежде всего:

  • band
  • point

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

Математическая модель band-scale

Band scale делит ось на равные сегменты под категории:

|---A---|---B---|---C---|

Но реальное отображение зависит от двух параметров:

  • paddingInner — расстояние между сегментами
  • paddingOuter — отступ от краёв шкалы

paddingInner

Определение

paddingInner задаёт долю пространства между элементами шкалы.

Диапазон

0 ≤ paddingInner < 1

Поведение

  • увеличивает расстояние между соседними категориями;
  • уменьшает ширину самих band-элементов;
  • влияет на плотность визуализации.

Пример

{
  "encoding": {
    "x": {
      "field": "category",
      "type": "ordinal",
      "scale": {
        "type": "band",
        "paddingInner": 0.2
      }
    }
  }
}

Влияние на визуал

  • 0 → элементы максимально широкие, без зазоров
  • 0.5 → значительные промежутки
  • 1 → почти точечное распределение

paddingOuter

Определение

paddingOuter управляет отступами по краям шкалы — до первого и после последнего элемента.

Диапазон

0 ≤ paddingOuter ≤ 1

Поведение

  • увеличивает расстояние от границ оси до крайних категорий;
  • влияет на «центровку» данных внутри графика.

Пример

{
  "encoding": {
    "x": {
      "field": "category",
      "type": "ordinal",
      "scale": {
        "type": "band",
        "paddingOuter": 0.3
      }
    }
  }
}

Взаимодействие paddingInner и paddingOuter

Оба параметра работают совместно в расчёте ширины band-scale:

available_space = total_size * (1 - paddingOuter * 2)
band_width = available_space / (n + paddingInner * (n - 1))

Где:

  • n — количество категорий
  • paddingInner влияет на промежутки между элементами
  • paddingOuter сдвигает всю шкалу внутрь контейнера

Сравнение поведения

paddingInner = 0, paddingOuter = 0

  • плотное заполнение области
  • отсутствуют отступы
  • подходит для компактных графиков

paddingInner > 0, paddingOuter = 0

  • появляются интервалы между категориями
  • крайние элементы прижаты к границам

paddingInner = 0, paddingOuter > 0

  • равномерные элементы
  • но с отступами по краям
  • визуально центрированная шкала

paddingInner > 0, paddingOuter > 0

  • наиболее читаемый вариант
  • используется в большинстве столбчатых диаграмм

Применение в bar chart

В Vega-Lite столбчатые диаграммы используют band-scale:

{
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "group",
      "type": "ordinal",
      "scale": {
        "paddingInner": 0.15,
        "paddingOuter": 0.2
      }
    },
    "y": {
      "field": "value",
      "type": "quantitative"
    }
  }
}

Влияние на визуальную плотность данных

Параметры paddingInner и paddingOuter напрямую определяют:

  • читаемость плотных категорий;
  • восприятие группировки;
  • визуальный баланс пустого пространства.

Ошибки и типичные проблемы

Слишком большой paddingInner

  • разрывает визуальную целостность данных
  • создаёт ощущение разрозненности

paddingOuter = 0

  • крайние бары «прилипают» к границе
  • ухудшается визуальная композиция

Игнорирование padding в responsive layout

При изменении размеров контейнера:

  • фиксированный padding может выглядеть непропорционально
  • требуется адаптивная настройка

Отличие глобального padding от scale padding

Характеристика padding paddingInner paddingOuter
Уровень layout scale scale
Влияет на оси да нет нет
Влияет на интервалы данных нет да да
Изменяет координаты нет косвенно косвенно
Основная задача компоновка плотность категорий внешние отступы шкалы

Особенности поведения в Vega vs Vega-Lite

В Vega:

  • padding часто задаётся через view.padding
  • scale padding настраивается напрямую в scale definitions

В Vega-Lite:

  • padding — верхнеуровневый параметр спецификации
  • paddingInner/Outer задаются внутри encoding.scale

Практические сценарии использования

Графики с малым числом категорий

  • paddingInner: низкий или 0
  • paddingOuter: средний

Большие категориальные наборы

  • paddingInner: умеренный
  • paddingOuter: минимальный
  • цель — максимальная плотность

Дашборды

  • paddingOuter повышается для визуального «воздуха»
  • paddingInner настраивается под читаемость

Влияние на восприятие данных

Психологически padding влияет на:

  • ощущение плотности информации
  • визуальное группирование
  • приоритет внимания между элементами

Меньший padding → данные воспринимаются как более «сжатые» Больший padding → данные воспринимаются как более «разделённые»

Совместное использование с другими параметрами компоновки

Padding часто работает совместно с:

  • width и height
  • step (в band scales)
  • axis.labelPadding
  • rangeStep (в Vega)

Эти параметры формируют итоговую геометрию графика и могут усиливать или компенсировать эффекты paddingInner и paddingOuter.

Оглавление