Поле mark: типы и сокращённая запись

В Vega-Lite визуализация строится вокруг декларативного описания графика, где ключевым элементом является слой mark. Он определяет, каким способом данные будут отображены: точками, линиями, областями, текстом или более сложными визуальными примитивами. Понимание типов mark и их сокращённой записи критично для эффективного построения спецификаций, поскольку именно этот слой задаёт визуальную семантику графика.

Роль mark в архитектуре Vega-Lite

Поле mark задаёт визуальное представление каждой строки данных после применения трансформаций и масштабирования. Внутренне Vega-Lite компилирует декларативную спецификацию в Vega-спецификацию, где каждый mark превращается в графический примитив с определённым рендерингом.

Ключевая идея:

mark = визуальная интерпретация данных

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

Основные типы mark

point — точечное отображение

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

{
  "mark": "point"
}

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

  • Каждая запись данных отображается как отдельная точка
  • Поддерживает интерактивные состояния (hover, selection)
  • Часто используется для диаграмм рассеяния

Типичные сценарии:

  • корреляционный анализ
  • распределения
  • поиск выбросов

circle — круговые маркеры

Вариация point, где форма фиксирована как круг.

{
  "mark": "circle"
}

Отличие от point:

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

square — квадратные маркеры

Альтернативная форма точечного представления.

{
  "mark": "square"
}

Использование:

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

tick — линейные отметки

Отображает данные в виде коротких линий вдоль оси.

{
  "mark": "tick"
}

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

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

bar — столбчатая диаграмма

Один из наиболее используемых типов mark.

{
  "mark": "bar"
}

Семантика:

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

Особенности реализации:

  • автоматически рассчитывает размеры прямоугольников
  • поддерживает агрегации (sum, mean, count)

line — линейные графики

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

{
  "mark": "line"
}

Поведение:

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

Применение:

  • временные ряды
  • тренды
  • непрерывные функции

area — заполненная область

Расширение линейного графика с заливкой под кривой.

{
  "mark": "area"
}

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

  • комбинирует line и заполнение
  • подчёркивает объём или накопление

Типичные случаи:

  • накопленные значения
  • доли от общего
  • плотности распределения

text — текстовые маркеры

Используется для отображения подписей и значений.

{
  "mark": "text"
}

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

  • визуализирует строковые или числовые значения
  • поддерживает форматирование через encode

rule — линии-ориентиры

Графический маркер в виде линии, часто вертикальной или горизонтальной.

{
  "mark": "rule"
}

Использование:

  • средние значения
  • медианы
  • пороговые линии

Сокращённая запись mark

Vega-Lite поддерживает упрощённый синтаксис, где mark задаётся строкой вместо объекта.

Базовая форма

{
  "mark": "bar"
}

Это эквивалентно полной форме:

{
  "mark": {
    "type": "bar"
  }
}

Преимущества сокращённой записи

1. Упрощение спецификации

При создании простых графиков сокращённая форма уменьшает объём кода:

{
  "data": {"url": "data.csv"},
  "mark": "point",
  "encoding": {
    "x": {"field": "a", "type": "quantitative"},
    "y": {"field": "b", "type": "quantitative"}
  }
}

2. Улучшение читаемости

Сокращённая запись делает визуализацию более декларативной и компактной, убирая избыточные уровни вложенности.

3. Логическая эквивалентность с объектной формой

Любой строковый mark может быть расширен в объектную форму без изменения поведения.

Пример расширения:

"mark": "line"

эквивалентно:

"mark": {
  "type": "line"
}

Параметризованные mark

Даже при использовании сокращённой записи mark может быть расширен дополнительными параметрами, но уже через объектную форму.

Пример: толщина линии

{
  "mark": {
    "type": "line",
    "strokeWidth": 3
  }
}

Пример: прозрачность

{
  "mark": {
    "type": "point",
    "opacity": 0.5
  }
}

Поведение mark в зависимости от данных

Тип mark не является изолированным параметром — он взаимодействует с:

  • типами шкал (scale)
  • каналами кодирования (encoding)
  • агрегациями (aggregate)

Пример зависимости от агрегации

{
  "mark": "bar",
  "encoding": {
    "y": {"aggregate": "sum", "field": "value", "type": "quantitative"}
  }
}

Здесь bar визуализирует агрегированное значение, а не отдельные записи.

Комбинированные mark через слои

Хотя mark обычно задаёт один тип визуализации, Vega-Lite позволяет комбинировать несколько mark через layer.

{
  "layer": [
    {
      "mark": "line"
    },
    {
      "mark": "point"
    }
  ]
}

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

Влияние типа mark на рендеринг

Каждый тип mark в Vega трансформируется в графические примитивы Canvas или SVG:

  • point → символы (path или circle)
  • line → path с сегментами
  • bar → прямоугольники
  • area → замкнутые path
  • text → текстовые узлы DOM/SVG

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

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

line

Требует сортировки данных по оси X, иначе соединение точек будет произвольным.

bar

Чувствителен к масштабированию осей и типу шкалы (обычно ordinal или band).

area

Нуждается в базовой линии (baseline), которая по умолчанию равна нулю.

text

Требует явного указания поля через encoding.text.

Сравнение декларативных форм

Полная форма

"mark": {
  "type": "circle"
}

Сокращённая форма

"mark": "circle"

Эквивалентность

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

Логика выбора mark

Выбор типа mark определяется характером данных:

  • дискретные наблюдения → point, circle, square
  • временные ряды → line, area
  • агрегированные значения → bar
  • аннотации → text, rule
  • плотные распределения → tick, circle

Тип mark в Vega-Lite выступает не как декоративный параметр, а как фундаментальная семантическая ось визуализации данных.

Оглавление