Поле axis, axisX, axisY, axisBottom и другие

В спецификациях Vega-Lite и Vega оси координат являются центральным механизмом интерпретации данных на визуализации. Поле axis и его производные (axisX, axisY, axisTop, axisBottom, axisLeft, axisRight) формируют декларативный слой управления отображением шкал, подписей, сетки и вспомогательных элементов, связанных с координатными осями.

В Vega-Lite ось не задаётся как отдельный графический объект вручную. Она автоматически создаётся на основе привязки канала данных к шкале через encoding.

Ключевой механизм:

  • x → горизонтальная ось (X)
  • y → вертикальная ось (Y)
  • color, size, shape → не создают оси напрямую

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

{
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal", "axis": { "title": "Категория" } },
    "y": { "field": "value", "type": "quantitative" }
  }
}

Здесь axis является вложенной конфигурацией, управляющей поведением конкретной оси.

Поле axis в encoding

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

Основные свойства:

Заголовок оси

"axis": {
  "title": "Продажи"
}
  • заменяет автоматически сгенерированный заголовок
  • может быть отключён через "title": null

Формат меток

"axis": {
  "format": ".2f"
}

Используется d3-format синтаксис:

  • .2f — два знака после запятой
  • ~s — сокращённые числа (1k, 1M)
  • % — проценты

Управление сеткой

"axis": {
  "grid": true
}
  • включает/выключает grid lines
  • часто используется для количественных данных

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

"axis": {
  "labelAngle": -45
}
  • поворот подписей
  • важен при длинных категориальных значениях

Частота делений

"axis": {
  "tickCount": 5
}
  • контролирует количество делений шкалы
  • не гарантирует точное значение, но задаёт желаемую плотность

Разделение осей: axisX и axisY

В Vega-Lite оси могут конфигурироваться глобально через axisX и axisY.

axisX

Применяется ко всем X-осям в визуализации:

"axisX": {
  "labelAngle": -30,
  "grid": false
}

Особенности:

  • переопределяет локальные настройки axis у x
  • действует глобально для всех слоёв (layered charts)
  • полезен для унификации нескольких графиков

axisY

Аналогично для вертикальной оси:

"axisY": {
  "title": "Значение",
  "grid": true
}

Часто используется для:

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

axisBottom, axisTop, axisLeft, axisRight

В более низкоуровневом Vega оси задаются явно и имеют пространственную привязку.

axisBottom

Ось снизу графика:

{
  "axes": [
    { "orient": "bottom", "scale": "xscale" }
  ]
}

Характеристики:

  • стандартное положение X-оси
  • используется для категориальных и временных шкал
  • поддерживает подписи и ticks

axisTop

Ось сверху:

{
  "axes": [
    { "orient": "top", "scale": "xscale" }
  ]
}

Применение:

  • зеркальные диаграммы
  • сравнение двух шкал
  • фасетные графики

axisLeft

Левая вертикальная ось:

{
  "axes": [
    { "orient": "left", "scale": "yscale" }
  ]
}

Особенности:

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

axisRight

Правая вертикальная ось:

{
  "axes": [
    { "orient": "right", "scale": "yscale" }
  ]
}

Используется для:

  • вторичных шкал
  • сравнительных графиков
  • dual-axis визуализаций

Взаимодействие axis и scale

Ось в Vega/Vega-Lite всегда привязана к шкале (scale), которая определяет преобразование данных:

  • linear → числовая шкала
  • band → категориальная шкала
  • time → временная шкала
  • log → логарифмическая

Пример:

"y": {
  "field": "value",
  "type": "quantitative",
  "scale": { "type": "log" },
  "axis": { "title": "Логарифмическая шкала" }
}

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

Конфигурация axis через config

Глобальные настройки осей задаются через config.axis:

{
  "config": {
    "axis": {
      "labelFontSize": 12,
      "titleFontSize": 14,
      "domainColor": "#ccc"
    }
  }
}

Это влияет на все оси, если не переопределено локально.

Различия поведения Vega-Lite и Vega

Vega-Lite

  • оси генерируются автоматически
  • используется декларативное управление через axis
  • axisX / axisY — глобальные переопределения

Vega

  • оси задаются явно через axes
  • требуется указание orient
  • больше контроля над позиционированием

Типовые сценарии настройки осей

Категориальные данные

"axis": {
  "labelAngle": -45,
  "labelLimit": 100
}
  • предотвращение наложения подписей
  • контроль обрезки текста

Временные ряды

"axis": {
  "format": "%Y-%m",
  "tickCount": 6
}
  • форматирование дат
  • равномерное распределение меток

Числовые шкалы

"axis": {
  "grid": true,
  "format": "~s"
}
  • включение сетки
  • компактное отображение больших чисел

Поведение перекрывающихся осей

При сложных визуализациях:

  • несколько слоёв могут создавать дублирующиеся оси
  • resolve: { axis: { x: "shared" } } объединяет их
  • resolve: { axis: { y: "independent" } } разделяет шкалы

Логика отрисовки осей

Порядок формирования:

  1. анализ encoding
  2. создание scale
  3. генерация axis
  4. применение config
  5. рендеринг ticks и labels

Ось всегда является производной от шкалы, а не наоборот.

Поведение axis при отсутствии данных

Если данные отсутствуют:

  • ось может быть пустой, но сохраняется структура
  • ticks не генерируются
  • title остаётся доступным

Влияние домена и диапазона

Ось отображает:

  • domain → диапазон данных
  • range → пиксельные координаты
"scale": {
  "domain": [0, 100],
  "range": "width"
}

Ось визуализирует именно отображаемый диапазон, а не исходные данные напрямую.

Управление видимостью оси

"axis": {
  "domain": false,
  "ticks": false,
  "labels": false
}

Позволяет полностью отключить компоненты оси при сохранении шкалы.

Итоговая модель осей

Оси в Vega/Vega-Lite представляют собой слой отображения над шкалой, включающий:

  • позиционирование (top/bottom/left/right)
  • форматирование меток
  • сетку и деления
  • заголовки
  • связь с encoding-каналами
  • глобальные и локальные конфигурации

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

Оглавление