Поле mark и типо-специфичные настройки

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

Базовая структура:

{
  "mark": "bar"
}

или расширенная форма:

{
  "mark": {
    "type": "line",
    "color": "steelblue",
    "strokeWidth": 2
  }
}

В Vega-Lite mark одновременно выполняет две функции:

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

Типы mark и их семантические различия

Точечные marks

point

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

{
  "mark": "point"
}

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

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

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

  • size
  • filled
  • shape
  • color

circle и square

Специализированные версии point с фиксированной формой.

{
  "mark": "circle"
}
{
  "mark": "square"
}

Различие заключается в предустановленной геометрии, что снижает необходимость явного задания shape.

Линейные marks

line

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

{
  "mark": "line"
}

Поддерживает:

  • интерполяцию
  • сглаживание
  • группировку по сериям

Пример расширенной настройки:

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

Интерполяция

Ключевое свойство линейных графиков:

  • linear
  • step
  • basis
  • cardinal
  • monotone
{
  "mark": {
    "type": "line",
    "interpolate": "step"
  }
}

Площадные marks

area

Представляет заполненную область под линией.

{
  "mark": "area"
}

Основные сценарии:

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

Расширенные настройки:

{
  "mark": {
    "type": "area",
    "opacity": 0.6,
    "interpolate": "monotone"
  }
}

Особое значение имеет параметр stack (задаётся через encoding), но mark влияет на визуальный характер заполнения.

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

bar

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

{
  "mark": "bar"
}

Семантика:

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

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

  • color
  • cornerRadius
  • binSpacing
  • size

Пример:

{
  "mark": {
    "type": "bar",
    "cornerRadiusTopLeft": 4,
    "cornerRadiusTopRight": 4
  }
}

tick

Упрощённая форма bar/point, используется для компактных распределений.

{
  "mark": "tick"
}

Применение:

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

rect

Базовая прямоугольная геометрия.

{
  "mark": "rect"
}

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

  • heatmap
  • календарных диаграммах
  • матрицах значений

Аннотационные marks

text

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

{
  "mark": "text"
}

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

  • font
  • fontSize
  • align
  • baseline
  • dx, dy

Пример:

{
  "mark": {
    "type": "text",
    "fontSize": 12,
    "color": "black"
  }
}

rule

Линия-ориентир.

{
  "mark": "rule"
}

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

  • средних значений
  • медиан
  • порогов

Геопространственные marks

geoshape

Используется в сочетании с геоданными (GeoJSON).

{
  "mark": "geoshape"
}

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

  • работает через projection
  • не требует стандартных x/y encoding

Boxplot и статистические marks

boxplot

Сводная статистическая визуализация.

{
  "mark": "boxplot"
}

Отображает:

  • медиану
  • квартили
  • выбросы

Параметры:

  • extent
  • size
  • color

errorbar

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

{
  "mark": "errorbar"
}

Применяется в:

  • научной визуализации
  • измерениях
  • доверительных интервалах

Объектная форма mark и глобальные свойства

В Vega-Lite mark может быть объектом, задающим поведение по умолчанию:

{
  "mark": {
    "type": "bar",
    "color": "steelblue",
    "opacity": 0.8
  }
}

Общие свойства mark

  • color — базовый цвет заливки/линии
  • opacity — прозрачность
  • stroke — цвет обводки
  • strokeWidth — толщина линии
  • fill — принудительная заливка
  • tooltip — включение подсказок
  • cursor — тип курсора

Приоритеты: mark vs encoding

В Vega-Lite существует строгая иерархия:

  1. encoding (данные)
  2. mark (дефолтные стили)
  3. глобальные конфигурации config

Пример конфликта:

{
  "mark": {
    "color": "red"
  },
  "encoding": {
    "color": {
      "value": "blue"
    }
  }
}

Результат: будет использован синий цвет, так как encoding имеет более высокий приоритет.

Роль mark в декларативной модели визуализации

mark выступает связующим звеном между данными и графической интерпретацией. Он определяет:

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

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

Комбинированные mark-сценарии

Множественные слои (layered marks)

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

Такой подход позволяет:

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

Условные mark-поведения

Через encoding.condition mark может изменять визуальный эффект без изменения типа:

{
  "mark": "bar",
  "encoding": {
    "color": {
      "condition": {
        "test": "datum.value > 0",
        "value": "green"
      },
      "value": "red"
    }
  }
}

Влияние mark на производительность и рендеринг

Выбор mark влияет не только на визуальную семантику, но и на:

  • количество DOM-элементов (в SVG/Canvas)
  • сложность отрисовки
  • эффективность агрегации
  • поведение при масштабировании больших наборов данных

Например:

  • point с тысячами точек предпочтительнее в Canvas
  • rect эффективен для heatmap благодаря батчингу
  • line может быть оптимизирован через path-компиляцию

Различие между Vega и Vega-Lite в контексте mark

В Vega (низкоуровневой системе):

{
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {...}
      }
    }
  ]
}

В Vega-Lite:

{
  "mark": "bar"
}

Различие заключается в уровне абстракции:

  • Vega: явное описание каждого примитива
  • Vega-Lite: декларация типа визуализации через mark
Оглавление