Слои: layer

Слой layer в Vega и Vega-Lite представляет собой механизм композиции визуальных элементов в рамках одной сцены, где несколько независимых описаний графиков накладываются друг на друга в одной системе координат. Эта модель позволяет строить сложные визуализации из простых компонентов без необходимости заранее «зашивать» их в единый рендеринг.

Многослойная модель опирается на идею разделения визуализации на независимые декларации. Каждый слой описывает собственный набор:

  • данных или их трансформаций
  • mark (тип геометрического примитива)
  • encoding (привязка данных к визуальным каналам)

Все слои объединяются в единую композицию, где они используют общие или частично разделённые масштабы и координатную систему.

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

слой не изменяет другие слои, он лишь добавляется поверх них в порядке объявления

Базовая структура layer в Vega-Lite

В Vega-Lite слой задаётся через массив layer:

{
  "data": { "url": "data.csv" },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "y1", "type": "quantitative" }
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "y2", "type": "quantitative" }
      }
    }
  ]
}

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

Наследование и переопределение свойств

Важной особенностью является наследование свойств из верхнего уровня спецификации:

  • данные (data) могут быть общими для всех слоёв
  • масштабы (scale) часто автоматически унифицируются
  • оси могут быть общими или раздельными при необходимости
  • каждый слой может переопределять mark и encoding

Пример:

{
  "data": { "url": "data.csv" },
  "mark": "line",
  "encoding": {
    "x": { "field": "x", "type": "quantitative" }
  },
  "layer": [
    {
      "encoding": {
        "y": { "field": "valueA", "type": "quantitative" }
      }
    },
    {
      "encoding": {
        "y": { "field": "valueB", "type": "quantitative" }
      }
    }
  ]
}

Общий x-канал задаётся один раз, а y различается на уровне слоёв.

Порядок слоёв и визуальное перекрытие

Порядок в массиве layer определяет порядок отрисовки:

  • первый слой рисуется первым (на заднем плане)
  • последующие накладываются поверх

Это критически важно при работе с:

  • прозрачностью (opacity)
  • точечными маркерами поверх линий
  • аннотациями
  • highlight-слоями

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

{
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "value", "type": "quantitative" }
      }
    },
    {
      "mark": { "type": "point", "filled": true, "color": "red" },
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "value", "type": "quantitative" }
      }
    }
  ]
}

Линия формирует базовую структуру, точки визуально выделяют конкретные наблюдения.

Слои с разными типами marks

Механизм layer особенно полезен для комбинирования разных геометрических примитивов:

  • line + point
  • bar + text
  • area + line
  • rule + annotation

Пример комбинирования area и line:

{
  "layer": [
    {
      "mark": "area",
      "encoding": {
        "x": { "field": "date", "type": "temporal" },
        "y": { "field": "min", "type": "quantitative" },
        "y2": { "field": "max" }
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": { "field": "date", "type": "temporal" },
        "y": { "field": "avg", "type": "quantitative" }
      }
    }
  ]
}

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

Layer vs Encoding: концептуальное различие

Важно различать два уровня композиции:

  • encoding управляет отображением одного mark
  • layer объединяет несколько независимых marks

Ошибочная модель — пытаться выразить несколько графиков через один encoding. Правильная — разделение через слои.

Совместное использование масштабов (scales)

По умолчанию слои в Vega-Lite используют общие масштабы, если:

  • поле и тип данных совпадают
  • нет явного переопределения

Однако возможны независимые масштабы, если данные или типы различаются. Это приводит к необходимости явного управления через resolve:

{
  "resolve": {
    "scale": {
      "y": "independent"
    }
  }
}

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

Layer и прозрачность

Слои часто используют прозрачность для создания сложных эффектов наложения:

{
  "layer": [
    {
      "mark": { "type": "area", "opacity": 0.3 }
    },
    {
      "mark": "line"
    }
  ]
}

Прозрачные слои позволяют:

  • отображать плотность распределения
  • сохранять читаемость нижних слоёв
  • визуально разделять уровни информации

Слои с transform

Каждый слой может содержать собственные трансформации данных:

{
  "layer": [
    {
      "transform": [
        { "filter": "datum.category === 'A'" }
      ],
      "mark": "line",
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "value", "type": "quantitative" }
      }
    },
    {
      "transform": [
        { "filter": "datum.category === 'B'" }
      ],
      "mark": "line",
      "encoding": {
        "x": { "field": "x", "type": "quantitative" },
        "y": { "field": "value", "type": "quantitative" }
      }
    }
  ]
}

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

Layer и текстовые аннотации

Один из наиболее частых сценариев использования layer — добавление текстовых аннотаций поверх графиков:

{
  "layer": [
    {
      "mark": "line"
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "middle"
      },
      "encoding": {
        "text": { "field": "label" }
      }
    }
  ]
}

Текстовые слои часто применяются для:

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

Вложенные слои (nested layer)

В Vega слой layer может быть вложенным, что позволяет строить иерархические композиции:

  • верхний уровень задаёт общую систему координат
  • внутренние слои формируют локальные группы визуализаций
  • каждый уровень может иметь собственные transform и marks

Это превращает слой в универсальный механизм композиции графических сцен.

Layer против facet и repeat

Хотя layer часто путают с другими механизмами композиции, различия принципиальны:

  • layer — наложение в одной системе координат
  • facet — разбиение данных на подграфики
  • repeat — повторение одной схемы для разных полей

Слой не создаёт новых панелей, он работает внутри одной области отрисовки.

Практическая композиционная модель

При проектировании визуализаций слой используется как базовый строительный блок:

  • базовый слой задаёт основную форму (line, bar, area)
  • дополнительные слои добавляют контекст (points, labels, rules)
  • вспомогательные слои формируют интерактивные или выделяющие элементы

Такая модель позволяет декомпозировать сложные визуализации на независимые декларативные части, каждая из которых отвечает за строго определённую визуальную роль.

Оглавление