Вертикальная конкатенация: vconcat

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

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

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

В Vega-Lite вертикальная композиция задаётся через свойство:

{
  "vconcat": [
    { "mark": "..." , "encoding": { ... } },
    { "mark": "..." , "encoding": { ... } }
  ]
}

Каждый элемент массива представляет собой полноценную спецификацию графика. Эти графики размещаются вертикально, сохраняя общий контейнер.

В Vega (низкоуровневый язык) используется аналогичная концепция через vconcat, но с более явным управлением сценой и масштабами.

Независимые и общие шкалы

Одним из ключевых аспектов является управление шкалами (scales). По умолчанию Vega-Lite не синхронизирует шкалы между элементами vconcat, если это не указано явно.

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

{
  "vconcat": [
    { "mark": "line", "encoding": { "x": { "field": "date", "type": "temporal" }, "y": { "field": "valueA", "type": "quantitative" } } },
    { "mark": "line", "encoding": { "x": { "field": "date", "type": "temporal" }, "y": { "field": "valueB", "type": "quantitative" } } }
  ],
  "resolve": {
    "scale": {
      "y": "shared"
    }
  }
}

Основные режимы resolve.scale:

  • "shared" — общая шкала между графиками
  • "independent" — независимые шкалы (по умолчанию)

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

Типовые сценарии применения

Сравнение временных рядов

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

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

{
  "data": { "name": "dataset" },
  "vconcat": [
    {
      "mark": "line",
      "encoding": {
        "x": { "field": "time", "type": "temporal" },
        "y": { "field": "temperature", "type": "quantitative" }
      }
    },
    {
      "mark": "line",
      "encoding": {
        "x": { "field": "time", "type": "temporal" },
        "y": { "field": "humidity", "type": "quantitative" }
      }
    }
  ]
}

Многоуровневый анализ данных

vconcat позволяет разносить уровни анализа по вертикали:

  • верхний график — агрегированные данные
  • нижний график — детализированные значения

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

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

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

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

Наследование конфигурации

Для упрощения спецификаций Vega-Lite позволяет задавать общие параметры на уровне контейнера:

{
  "config": {
    "axis": {
      "labelFontSize": 12,
      "titleFontSize": 14
    }
  },
  "vconcat": [
    { "mark": "bar", "encoding": { ... } },
    { "mark": "line", "encoding": { ... } }
  ]
}

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

Поведение размеров и компоновки

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

{
  "vconcat": [
    { "height": 100, "mark": "line", "encoding": { ... } },
    { "height": 200, "mark": "bar", "encoding": { ... } }
  ]
}

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

Работа с осью X

Ось X чаще всего синхронизируется между всеми элементами вертикальной композиции, поскольку именно она представляет общую шкалу измерения.

Синхронизация улучшает читаемость и снижает когнитивную нагрузку при анализе нескольких графиков одновременно.

Разделение данных между слоями

Каждый график внутри vconcat может:

  • использовать общий источник данных
  • применять собственные трансформации (transform)
  • фильтровать набор данных независимо
{
  "data": { "name": "dataset" },
  "vconcat": [
    {
      "transform": [{ "filter": "datum.type == 'A'" }],
      "mark": "line",
      "encoding": { ... }
    },
    {
      "transform": [{ "filter": "datum.type == 'B'" }],
      "mark": "line",
      "encoding": { ... }
    }
  ]
}

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

Вложенные композиции

vconcat может комбинироваться с другими типами компоновки:

  • hconcat — горизонтальная композиция
  • layer — наложение графиков
  • facet — автоматическое разбиение по категориям

Пример вложенной структуры:

{
  "vconcat": [
    {
      "hconcat": [
        { "mark": "line", "encoding": { ... } },
        { "mark": "bar", "encoding": { ... } }
      ]
    },
    {
      "layer": [
        { "mark": "line", "encoding": { ... } },
        { "mark": "point", "encoding": { ... } }
      ]
    }
  ]
}

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

Управление заголовками и подписями

Каждый график может содержать собственные:

  • title
  • axis.title
  • legend

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

{
  "vconcat": [
    {
      "title": "Температура",
      "mark": "line",
      "encoding": { ... }
    },
    {
      "title": "Влажность",
      "mark": "line",
      "encoding": { ... }
    }
  ]
}

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

При работе с большим количеством элементов vconcat важно учитывать:

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

Оптимизация достигается через:

  • предварительную агрегацию данных
  • использование shared dataset
  • минимизацию сложных transform внутри каждого блока

Особенности поведения в Vega (низкоуровневый слой)

В Vega vconcat реализуется через композицию сцен (scenegraph). Каждый элемент:

  • имеет собственную группу
  • управляет своими масштабами
  • участвует в общем layout-процессе

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

Ограничения и типичные ошибки

  • Несинхронизированные оси приводят к ложным визуальным сравнениям
  • Перегрузка числами графиков ухудшает читаемость
  • Дублирование легенд создаёт визуальный шум
  • Разные масштабы без явного resolve могут искажать восприятие данных

Практика проектирования вертикальных композиций

Структура эффективной vconcat-композиции обычно следует принципу:

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

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

Оглавление