Общая конкатенация: concat и columns

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

Наиболее универсальными средствами композиции выступают concat, hconcat, vconcat и параметр columns, влияющий на раскладку повторяемых представлений.

Механизм конкатенации визуализаций

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

Горизонтальная конкатенация (hconcat)

Горизонтальное объединение размещает графики в одну строку:

{
  "hconcat": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative"}
      },
      "data": {"url": "data.json"}
    },
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "value", "type": "quantitative"}
      },
      "data": {"url": "data.json"}
    }
  ]
}

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

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

Вертикальная компоновка используется для последовательного размещения графиков сверху вниз:

{
  "vconcat": [
    {
      "mark": "area",
      "encoding": {
        "x": {"field": "time", "type": "temporal"},
        "y": {"field": "value", "type": "quantitative"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {"field": "threshold", "type": "quantitative"},
        "color": {"value": "red"}
      }
    }
  ]
}

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

Универсальная конкатенация (concat)

concat представляет собой обобщённую форму композиции, позволяющую автоматически располагать элементы в двумерной сетке. В отличие от hconcat и vconcat, не фиксируется направление размещения, а используется гибридная раскладка.

{
  "concat": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "nominal"},
        "y": {"field": "v1", "type": "quantitative"}
      }
    },
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "nominal"},
        "y": {"field": "v2", "type": "quantitative"}
      }
    },
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "a", "type": "nominal"},
        "y": {"field": "v3", "type": "quantitative"}
      }
    }
  ]
}

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

Отличия concat от facet и repeat

Конкатенация в Vega-Lite часто противопоставляется фасетированию и повторению:

  • concat объединяет независимые спецификации
  • facet делит один набор данных по переменной и создаёт подграфики
  • repeat копирует одну спецификацию с разными полями

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

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

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

{
  "vconcat": [
    {
      "facet": {
        "row": {"field": "region", "type": "nominal"}
      },
      "spec": {
        "mark": "line",
        "encoding": {
          "x": {"field": "date", "type": "temporal"},
          "y": {"field": "value", "type": "quantitative"}
        }
      }
    },
    {
      "hconcat": [
        {
          "mark": "bar",
          "encoding": {
            "x": {"field": "category"},
            "y": {"field": "value1"}
          }
        },
        {
          "mark": "bar",
          "encoding": {
            "x": {"field": "category"},
            "y": {"field": "value2"}
          }
        }
      ]
    }
  ]
}

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

Параметр columns в repeat-композиции

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

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

{
  "repeat": {
    "column": ["v1", "v2", "v3", "v4"]
  },
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {"field": "category", "type": "nominal"},
      "y": {"field": {"repeat": "column"}, "type": "quantitative"}
    }
  }
}

По умолчанию элементы располагаются в одну строку, если не задан параметр columns.

Управление сеткой через columns

{
  "repeat": {
    "column": ["a", "b", "c", "d", "e", "f"]
  },
  "columns": 3,
  "spec": {
    "mark": "line",
    "encoding": {
      "x": {"field": "time"},
      "y": {"field": {"repeat": "column"}}
    }
  }
}

При значении columns: 3 визуализации распределяются по три элемента в строке, после чего начинается новая строка. Таким образом формируется прямоугольная сетка.

Влияние columns на восприятие данных

Использование columns влияет не только на визуальную структуру, но и на когнитивную нагрузку:

  • малое значение (1–2) формирует последовательное сравнение
  • среднее значение (3–4) создаёт сбалансированную матрицу
  • большие значения приводят к плотной аналитической панели

При этом каждая ячейка остаётся независимой визуализацией с собственными масштабами.

Сочетание concat и columns в аналитических интерфейсах

Комбинация конкатенации и параметра columns используется для построения многоуровневых интерфейсов:

  • верхний уровень (concat) формирует логические блоки
  • внутренний уровень (repeat + columns) создаёт сетки метрик
  • итоговая структура представляет собой иерархическую композицию

Пример типичной архитектуры:

  • vconcat

    • временной тренд
    • набор повторяющихся индикаторов (grid через columns)
    • сравнительные диаграммы через hconcat

Особенности работы масштабов и осей в композициях

В concat каждый элемент сохраняет независимые шкалы. Это означает:

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

В repeat поведение аналогично, но при необходимости возможно явное связывание масштабов через конфигурацию.

Типичные архитектурные паттерны

Паттерн сравнения метрик

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

Паттерн временного анализа

vconcat применяется для разделения:

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

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

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

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

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

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

Глубокие вложенности concat и repeat требуют упрощения данных или агрегации перед визуализацией.

Иерархия композиционных операторов

Композиционные операторы Vega-Lite образуют строгую иерархию:

  1. repeat — генерация множества однотипных графиков
  2. facet — разбиение данных по измерению
  3. concat / hconcat / vconcat — ручная композиция визуализаций

columns функционирует как параметр сеточной раскладки внутри repeat, не являясь самостоятельным оператором композиции.

Оглавление