Описание размеров: width и height

Система размеров в спецификациях визуализаций строится вокруг двух базовых параметров — width и height, определяющих область отрисовки графика. Эти параметры задают не физические пиксели устройства, а логические размеры визуального представления, которые затем интерпретируются движком рендеринга с учётом масштабирования, контейнера и настроек адаптивности.

Базовое определение width и height

Поля width и height задают внутренний размер канваса визуализации, исключая внешние отступы (padding) и элементы оформления вокруг графика.

{
  "width": 400,
  "height": 200
}

Такое определение фиксирует область построения графических примитивов: осей, маркеров, линий и заливок.

В контексте Vega-Lite эти параметры чаще рассматриваются как часть декларативного описания, а в Vega — как элементы более низкоуровневого описания сцены.

Различие интерпретации в Vega и Vega-Lite

В Vega-Lite размеры трактуются как высокоуровневые декларации, которые могут быть переопределены системой автоматической компоновки. Vega предоставляет более прямой контроль над геометрией сцены.

  • В Vega-Lite width и height могут быть:

    • фиксированными числами
    • значением "container" для адаптивной ширины
    • значением "step" для дискретных шкал (например, категориальные оси)

  • В Vega:

    • чаще используются числовые значения
    • адаптивность реализуется через сигналы и вычисляемые выражения

Фиксированные размеры

Фиксированное значение задаёт строгую геометрию визуализации:

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

Такая конфигурация полезна для статичных дашбордов, экспортируемых изображений и печатных представлений.

Фиксированная модель предполагает, что все внутренние элементы (оси, подписи, легенды) подстраиваются под выделенное пространство без изменения общего размера сцены.

Адаптивная ширина container

В Vega-Lite широко используется режим:

{
  "width": "container"
}

Он означает, что ширина графика наследуется от родительского HTML-элемента. При изменении размеров окна или блока визуализация пересчитывается и перерисовывается.

Поведение включает:

  • автоматическое масштабирование шкал
  • перерасчёт размещения подписей
  • возможное изменение плотности тиков оси

Высота при этом может оставаться фиксированной или также быть адаптивной.

Step-ширина для категориальных данных

Специальное значение "step" применяется в основном для дискретных шкал:

{
  "width": { "step": 20 }
}

Каждый шаг соответствует ширине одного элемента (например, столбца диаграммы). Общая ширина вычисляется как:

  • количество категорий × step
  • плюс внутренние отступы

Такая модель характерна для bar chart и dot plot.

Связь width и height с координатной системой

Размеры напрямую определяют систему координат визуализации. Внутреннее пространство определяется как прямоугольник:

  • начало координат смещается с учётом padding
  • ширина определяет диапазон оси X
  • высота определяет диапазон оси Y

При этом в Vega используется явная сцена, где координаты могут быть вычислены через выражения, а в Vega-Lite — через декларативные преобразования.

Padding и влияние на итоговую область

Параметры width и height не включают padding:

{
  "width": 400,
  "height": 300,
  "padding": 20
}

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

  • подписям осей
  • заголовкам
  • легендам

Таким образом, фактический размер HTML-элемента становится больше заданного канваса.

Autosize и перераспределение пространства

Механизм autosize управляет тем, как ширина и высота взаимодействуют с внешним контейнером.

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

  • pad — добавление padding для предотвращения обрезки элементов
  • fit — масштабирование содержимого под размеры контейнера
  • none — фиксированная область без перерасчёта
  • resize — динамическое изменение размеров при изменении контейнера

Пример:

{
  "width": "container",
  "height": 400,
  "autosize": "fit"
}

Режим fit перераспределяет всю визуальную композицию, изменяя масштаб шкал и геометрии.

Влияние размеров на масштабирование данных

Размеры сцены тесно связаны с масштабами (scales):

  • увеличение width расширяет диапазон X-оси
  • увеличение height увеличивает вертикальную детализацию
  • при фиксированном количестве данных изменяется плотность отображения

В Vega-Lite это происходит автоматически через трансляцию данных в шкалы:

"scale": {
  "domain": [0, 100],
  "range": [0, 400]
}

Здесь range фактически привязан к width.

Проблемы переполнения и обрезки

При недостаточных значениях width и height возникают типовые проблемы:

  • наложение подписей осей
  • обрезка маркеров на краях
  • невозможность отображения всех категорий
  • деградация читаемости текста

В Vega-Lite это частично компенсируется автоматическим поворотом подписей и уменьшением плотности тиков.

Динамическое изменение размеров через сигналы

В Vega размеры могут быть выражены через сигналы:

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

Сигналы позволяют:

  • связывать размеры с DOM-элементами
  • реагировать на события resize
  • вычислять размеры на основе внешних параметров

Это обеспечивает более низкоуровневый контроль по сравнению с Vega-Lite.

Пропорции и соотношение сторон

Хотя width и height задаются независимо, их соотношение определяет визуальную интерпретацию данных:

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

При изменении одного параметра без корректировки другого искажается восприятие наклона и плотности данных.

Масштабирование текста и элементов при изменении размеров

Размеры сцены влияют не только на геометрию графиков, но и на:

  • размер шрифтов (через базовые настройки)
  • длину и частоту тиков
  • расстояние между элементами легенды
  • плотность сетки

В Vega-Lite это регулируется автоматически, в Vega требует явного описания.

Встраивание в HTML-контейнер

При использовании width: "container" поведение зависит от CSS-окружения:

  • flex-контейнеры изменяют ширину динамически
  • grid-раскладки могут задавать фиксированные области
  • overflow влияет на видимость частей визуализации

В результате один и тот же JSON-спек может давать разные визуальные результаты при изменении верстки.

Ограничения минимальных и максимальных размеров

В некоторых сценариях вводятся ограничения:

  • минимальная ширина для читаемости осей
  • максимальная ширина для предотвращения чрезмерного растяжения
  • адаптивные ограничения через autosize

Это особенно важно для мобильных интерфейсов, где width часто ограничен экраном устройства.

Взаимодействие с легендой и заголовками

Legend и title могут влиять на эффективное использование width и height:

  • длинные легенды уменьшают доступную ширину графика
  • многострочные заголовки увеличивают вертикальные отступы
  • размещение легенды справа или снизу перераспределяет пространство

Таким образом, фактическая область визуализации зависит не только от width и height, но и от структуры компонентов сцены.

Итоговая модель пространства визуализации

Система размеров в Vega и Vega-Lite представляет собой комбинацию:

  • базовых параметров width и height
  • padding как внешнего смещения
  • autosize как механизма адаптации
  • сигналов и контейнеров как динамических источников
  • шкал как интерпретации диапазона данных

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

Оглавление