Поле header: заголовки фасетов

Фасетирование в Vega-Lite представляет собой механизм разбиения набора данных на подгруппы с автоматической генерацией повторяющихся графических панелей. Каждая такая панель сопровождается заголовком (header), который описывает значение соответствующего измерения. Поле header управляет внешним видом, структурой и поведением этих заголовков как для строковых (row), так и для столбцовых (column) фасетов.

Роль заголовков в фасетах

Фасетирование трансформирует одну спецификацию графика в сетку визуализаций. В этом контексте заголовки выполняют функцию:

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

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

Структура header в Vega-Lite

Поле header может быть задано внутри facet, row или column каналов.

Типичная структура:

{
  "facet": {
    "row": {
      "field": "category",
      "type": "nominal",
      "header": {
        "title": "Категория",
        "labelAngle": 0
      }
    }
  }
}

header представляет собой объект конфигурации, влияющий на отображение заголовков.

Основные свойства header

title

Определяет текст заголовка для оси фасетирования.

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

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

Пример:

"header": {
  "title": "Регион"
}

Если title не задан, используется имя поля.

labelAngle

Контролирует угол наклона текста заголовков.

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

  • 0 — горизонтальное отображение;
  • -45, -90 — поворот для экономии места.
"header": {
  "labelAngle": -45
}

labelAlign и labelBaseline

Определяют позиционирование текста:

  • labelAlign: left | center | right
  • labelBaseline: top | middle | bottom

Позволяют тонко регулировать размещение при сложных сетках фасетов.

labelColor и labelFontSize

Отвечают за визуальную стилизацию:

  • labelColor задаёт цвет текста;
  • labelFontSize определяет размер шрифта.

Пример:

"header": {
  "labelColor": "#333",
  "labelFontSize": 12
}

format и formatType

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

  • format — строка форматирования (например, d3-format);
  • formatType — тип форматтера (number, time, utc).

Пример:

"header": {
  "format": ".2f",
  "formatType": "number"
}

orient

Определяет расположение заголовков относительно фасетной сетки:

  • top
  • bottom
  • left
  • right

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

"header": {
  "orient": "top"
}

labelPadding

Задаёт отступ между заголовком и визуальной областью.

Особенно важно при плотных сетках фасетов, где пересечение текста и графики ухудшает читаемость.

Различие header в row и column

Заголовки строк (row.header)

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

Заголовки столбцов (column.header)

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

Поведение при отсутствии header

Если header не задан:

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

Это может привести к:

  • перегруженности текста;
  • отсутствию смысловой иерархии;
  • неоднозначной интерпретации категорий.

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

header поддерживает каскадную конфигурацию:

  1. глобальный стиль (config.facet.header);
  2. локальный header в row или column;
  3. индивидуальные настройки для конкретного канала.

Локальные параметры всегда имеют приоритет.

Взаимодействие с labelExpr

В более сложных сценариях форматирование может задаваться через выражения:

"header": {
  "labelExpr": "datum.value.toUpperCase()"
}

Это позволяет:

  • трансформировать текст;
  • добавлять условную логику;
  • локализовать значения.

Производные механизмы в Vega

В низкоуровневом Vega фасеты компилируются в групповые marks, где заголовки реализуются как отдельные текстовые элементы (text marks). Конфигурация header трансформируется в набор параметров для этих элементов:

  • позиционирование (encode.enter);
  • форматирование текста;
  • стилизация;
  • привязка к сигналам масштаба.

Таким образом, header в Vega-Lite является абстракцией над более детализированной системой управления метками в Vega.

Типичные ошибки конфигурации

Перегрузка заголовков

Чрезмерное использование:

  • длинных текстов;
  • больших углов поворота;
  • крупных шрифтов.

Приводит к потере сеточной структуры.

Несогласованность ориентации

Смешение row.header и column.header с разной логикой выравнивания создаёт визуальный дисбаланс.

Игнорирование кардинальности

При высокой кардинальности категорий заголовки становятся основным источником визуального шума. В таких случаях:

  • требуется уменьшение labelFontSize;
  • использование labelLimit;
  • сокращение текста через format или labelExpr.

Конфигурация через config

Глобальные настройки:

{
  "config": {
    "facet": {
      "header": {
        "labelFontSize": 11,
        "labelPadding": 4,
        "labelAngle": 0
      }
    }
  }
}

Применяются ко всем фасетам, если не переопределены локально.

Семантическая роль заголовков в аналитике

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

  • кодируют измерение разбиения;
  • служат навигационным ориентиром;
  • формируют структуру сравнения.

При этом визуальная система воспринимает header как равноправный элемент графика наряду с осями и маркерами данных, а не как вспомогательную подпись.

Оглавление