Поле axis в кодировании

В Vega-Lite и Vega ось (axis) является одним из ключевых механизмов визуального кодирования данных, связывающим числовые или категориальные значения с координатным пространством. Ось не существует как самостоятельная сущность вне масштаба (scale) и канала (encoding), а формируется как результат их взаимодействия, где поле данных становится визуально интерпретируемым через шкалу и отображается посредством разметки оси.

В Vega-Lite ось возникает прежде всего в контексте каналов x и y внутри encoding. Именно эти каналы автоматически порождают визуальные оси при использовании непрерывных или порядковых шкал.

Классическая структура выглядит следующим образом:

{
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}

Здесь:

  • x формирует категориальную ось;
  • y формирует количественную ось;
  • Vega-Lite автоматически строит шкалы и соответствующие оси.

Важно, что ось не задаётся напрямую как axis в корне спецификации. Она является частью описания канала через объект axis внутри encoding.

Объект axis внутри encoding

Поле axis — это расширенная конфигурация оси, позволяющая управлять её внешним видом и поведением.

Пример:

{
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal",
      "axis": {
        "title": "Дата",
        "format": "%Y-%m",
        "labelAngle": -45
      }
    }
  }
}

Объект axis применяется к конкретному каналу и влияет только на отображение соответствующей оси.

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

title — заголовок оси

Поле title задаёт текст, описывающий смысл шкалы.

"axis": {
  "title": "Выручка (в тыс.)"
}

Если title не указан, Vega-Lite может использовать имя поля или генерировать заголовок автоматически.

format — форматирование значений

Свойство format управляет отображением числовых и временных значений.

Для количественных данных используется форматирование в стиле d3-format:

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

Для временных данных применяется формат d3-time-format:

"axis": {
  "format": "%d.%m.%Y"
}

Форматирование особенно важно при плотных шкалах, где значения необходимо сжимать без потери читаемости.

labelAngle — угол наклона подписей

Поле labelAngle управляет поворотом текстовых меток:

"axis": {
  "labelAngle": -90
}

Типичные значения:

  • 0 — горизонтальные подписи;
  • -45 — диагональные подписи;
  • -90 — вертикальные подписи.

Используется для предотвращения наложения текста при большом количестве категорий.

grid — отображение сетки

Свойство grid включает или отключает линии сетки:

"axis": {
  "grid": true
}

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

ticks и tickCount — управление делениями

tickCount задаёт желаемое количество делений:

"axis": {
  "tickCount": 5
}

Фактическое число может отличаться, так как Vega-Lite оптимизирует разметку.

Свойство ticks позволяет полностью включить или отключить деления:

"axis": {
  "ticks": false
}

Типы осей в зависимости от типа данных

Непрерывные оси (quantitative)

Используются для числовых данных. Поддерживают интерполяцию шкалы.

Характерные особенности:

  • равномерные интервалы;
  • автоматическое масштабирование;
  • поддержка логарифмических шкал (через scale, но влияет на ось).
"y": {
  "field": "price",
  "type": "quantitative",
  "axis": { "title": "Цена" }
}

Временные оси (temporal)

Оси времени адаптируются под диапазон данных: дни, месяцы, годы.

"x": {
  "field": "timestamp",
  "type": "temporal",
  "axis": {
    "format": "%H:%M"
  }
}

Особенность заключается в автоматической адаптации интервалов: при расширении диапазона изменяется уровень детализации.

Категориальные оси (nominal)

Используются для дискретных значений.

"x": {
  "field": "product",
  "type": "nominal"
}

Такие оси:

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

Управление положением и ориентацией оси

Ось может располагаться с разных сторон визуализации. Хотя в Vega-Lite это часто определяется автоматически, можно явно контролировать ориентацию через axis.orient:

"axis": {
  "orient": "top"
}

Возможные значения:

  • bottom
  • top
  • left
  • right

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

Несколько осей и наложение каналов

Vega-Lite позволяет создавать многослойные графики, где одна и та же область содержит несколько осей.

Пример с двумя количественными шкалами:

{
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": { "field": "date", "type": "temporal" },
        "y": { "field": "temperature", "type": "quantitative" }
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": { "field": "date", "type": "temporal" },
        "y": { "field": "humidity", "type": "quantitative" }
      }
    }
  ]
}

В таких случаях возникает вопрос синхронизации осей. Vega-Lite может:

  • объединять шкалы;
  • либо создавать независимые оси;
  • либо использовать вторичную ось через axis и scale.

Форматирование подписей и управление читаемостью

labelLimit

Ограничивает длину текста меток:

"axis": {
  "labelLimit": 50
}

Длинные значения обрезаются с добавлением многоточия.

labelOverlap

Управляет поведением при наложении подписей:

"axis": {
  "labelOverlap": true
}

Автоматические стратегии включают:

  • удаление части меток;
  • поворот;
  • уменьшение плотности.

Настройки диапазона и домена через axis

Хотя домен (domain) формально относится к scale, его взаимодействие с осью критично.

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

Ось при этом отражает фиксированный диапазон, а не вычисленный из данных.

Vega (низкоуровневый подход) и axis

В Vega (в отличие от Vega-Lite) ось задаётся явно в разделе axes:

{
  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "title": "Время"
    }
  ]
}

Здесь:

  • scale связывает ось с конкретной шкалой;
  • ось существует как отдельный объект визуализации;
  • требуется ручное управление позиционированием и связями.

Отличия axis в Vega-Lite и Vega

Vega-Lite:

  • декларативная ось внутри encoding;
  • автоматическая генерация;
  • минимальная настройка.

Vega:

  • явное объявление осей;
  • полная ручная настройка;
  • гибкость за счёт сложности.

Поведение оси при трансформациях данных

При использовании трансформаций (transform) ось всегда строится на основе уже обработанных данных:

"transform": [
  { "filter": "datum.value > 0" }
]

Это означает, что:

  • фильтрация влияет на диапазон оси;
  • агрегации изменяют шкалу;
  • binning создаёт дискретные интервалы на оси.

Биннинг и ось

При использовании bin ось становится дискретизированной:

"x": {
  "field": "age",
  "bin": true,
  "type": "quantitative"
}

Результат:

  • шкала превращается в интервальную;
  • подписи оси соответствуют диапазонам;
  • увеличивается плотность делений.

Роль axis в интерпретации визуализации

Ось выполняет не только техническую функцию отображения шкалы, но и семантическую роль:

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

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

Оглавление