Поле ticks: управление делениями

В Vega-Lite управление делениями осей и отдельными рисками (ticks) строится через несколько уровней абстракции: конфигурацию оси (axis), параметры масштаба (scale) и специальный графический маркер tick. Несмотря на общую терминологию, эти механизмы решают разные задачи — от разметки шкалы до отрисовки отдельных штрихов внутри визуализации.

Деления оси выполняют две ключевые функции:

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

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

Осевые деления (axis ticks)

Основной механизм управления делениями реализуется через свойство axis. Оно задаётся внутри encoding канала:

{
  mark: "bar",
  encoding: {
    x: { field: "category", type: "ordinal", axis: { ticks: true } },
    y: { field: "value", type: "quantitative" }
  }
}

Включение и отключение делений

Ключевое свойство:

  • ticks: true | false — включает или отключает отображение делений.

Пример отключения:

axis: {
  ticks: false
}

Отключение tick-рисок оставляет только подписи или полностью упрощает ось при комбинировании с labels: false.

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

Количество и плотность делений контролируется автоматически, но может быть переопределено.

tickCount

axis: {
  tickCount: 5
}

Задает ориентировочное число делений. Vega-Lite может корректировать его в зависимости от диапазона данных и алгоритма округления шкалы.

tickMinStep

axis: {
  tickMinStep: 10
}

Минимальный шаг между делениями. Используется для предотвращения «переполнения» оси при плотных данных.

Размер и визуальное оформление делений

tickSize

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

axis: {
  tickSize: 8
}
  • увеличенное значение делает деления более выраженными;
  • уменьшенное значение подходит для минималистичных графиков.

Переопределение через конфигурацию

Глобально:

config: {
  axis: {
    tickSize: 6
  }
}

Локально (для конкретной оси):

axis: {
  tickSize: 12
}

Позиционирование и ориентация делений

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

  • вертикальная ось → горизонтальные деления;
  • горизонтальная ось → вертикальные деления.

Однако возможна ручная настройка через дополнительные параметры оси и маркеров.

Форматирование и стилизация делений

Цвет и прозрачность

axis: {
  tickColor: "#999",
  tickOpacity: 0.6
}

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

Толщина линий

axis: {
  tickWidth: 1.5
}

Толщина позволяет согласовать деления с общей графической сеткой.

Связь с масштабом (scale)

Деления оси напрямую зависят от типа шкалы:

Линейная шкала

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

Логарифмическая шкала

  • деления распределяются по степеням;
  • tickCount становится менее предсказуемым.
scale: {
  type: "log"
}

Маркер tick (mark: “tick”)

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

{
  mark: "tick",
  encoding: {
    x: { field: "value", type: "quantitative" }
  }
}

Этот маркер применяется для:

  • отображения распределений (rug plot);
  • визуализации отдельных наблюдений;
  • компактного представления плотности данных.

Размер маркера tick

{
  mark: {
    type: "tick",
    size: 20
  }
}
  • size управляет длиной риски;
  • увеличенное значение усиливает акцент на отдельных точках;
  • уменьшенное значение используется для плотных распределений.

Толщина и цвет

{
  mark: {
    type: "tick",
    thickness: 2,
    color: "steelblue"
  }
}

Толщина позволяет отличать группы данных или категории при наложении нескольких наборов tick-значений.

Использование tick в сравнительных визуализациях

Маркер tick часто применяется в сочетании с:

  • violin plots (внешняя структура распределения);
  • histogram overlays;
  • strip charts.

Пример комбинированного подхода:

{
  layer: [
    {
      mark: "bar",
      encoding: {
        x: { field: "group", type: "ordinal" },
        y: { aggregate: "mean", field: "value" }
      }
    },
    {
      mark: "tick",
      encoding: {
        x: { field: "group" },
        y: { field: "value" }
      }
    }
  ]
}

Плотность делений и читаемость

При проектировании визуализаций важен баланс между:

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

Типичные режимы:

Минималистичный

  • tickCount: 3–5
  • увеличенный tickSize
  • отключение второстепенных делений

Детализированный

  • tickCount: 10–20
  • уменьшенный tickSize
  • тонкие линии

Инженерный

  • фиксированный tickStep
  • плотные деления
  • вспомогательная сетка

Взаимодействие с grid (сеткой)

Tick-деления часто визуально связаны с grid-линиями:

axis: {
  grid: true,
  tickSize: 5,
  gridColor: "#eee"
}
  • ticks задают локальные отметки;
  • grid усиливает глобальную структуру координат.

Переиспользование конфигурации

Vega-Lite позволяет централизованно управлять ticks через config:

config: {
  axis: {
    tickCount: 6,
    tickSize: 6,
    tickColor: "#aaa"
  }
}

Это особенно важно при построении серий графиков с единым визуальным стилем.

Ограничения и особенности поведения

  • точное количество делений не гарантируется при автоматической шкале;
  • при малом диапазоне данных Vega-Lite может полностью переопределять tickCount;
  • логарифмические и временные шкалы используют собственные алгоритмы генерации делений;
  • свойства ticks и tickCount взаимодействуют, но не всегда линейно.

Комбинация axis ticks и mark tick

В сложных визуализациях одновременно используются:

  • axis ticks — структурная шкала;
  • mark tick — отображение данных.

Их различие принципиально:

  • axis ticks принадлежат координатной системе;
  • mark tick принадлежит данным.

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

Оглавление