Поле title

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

Базовая структура поля title

В Vega-Lite поле title задаётся на верхнем уровне спецификации:

{
  "data": { "url": "data.csv" },
  "mark": "bar",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "field": "value", "type": "quantitative" }
  },
  "title": "Продажи по категориям"
}

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

Объектная форма title

Для расширенного управления используется объектная форма:

{
  "title": {
    "text": "Продажи по категориям",
    "anchor": "start",
    "fontSize": 18,
    "color": "#333",
    "fontWeight": "bold"
  }
}

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

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

  • text — текст заголовка
  • anchor — выравнивание (start, middle, end)
  • fontSize — размер шрифта
  • fontWeight — насыщенность текста
  • color — цвет текста
  • font — семейство шрифта

Многострочные заголовки

Заголовок может быть задан как массив строк:

{
  "title": {
    "text": ["Продажи по категориям", "за 2025 год"],
    "anchor": "middle"
  }
}

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

Динамические заголовки через выражения

Vega-Lite поддерживает вычисляемые заголовки, основанные на сигналах и выражениях:

{
  "title": {
    "expr": "'Анализ данных: ' + datum.datasetName"
  }
}

В Vega (низкоуровневом языке) используется более гибкая система сигналов:

{
  "title": {
    "text": {"signal": "datasetName + ' — визуализация'"}
  }
}

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

Различие title в Vega и Vega-Lite

Vega-Lite

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

Vega

  • полный контроль над сценой
  • title является частью рендерного дерева
  • поддержка сигналов (signal)
  • возможность сложной компоновки

Пример Vega:

{
  "type": "text",
  "encode": {
    "enter": {
      "text": { "value": "Заголовок графика" },
      "x": { "value": 200 },
      "y": { "value": 20 },
      "fontSize": { "value": 16 }
    }
  }
}

Здесь заголовок перестаёт быть «специальным полем» и становится обычным визуальным элементом.

Стилизация через config.title

Глобальная конфигурация позволяет централизованно управлять всеми заголовками:

{
  "config": {
    "title": {
      "font": "Arial",
      "fontSize": 20,
      "color": "#222",
      "anchor": "start"
    }
  }
}

Такая настройка применяется ко всем title в спецификации, если они не переопределены локально.

Позиционирование заголовка

Поле title поддерживает управление расположением относительно визуализации:

  • anchor — горизонтальное выравнивание
  • offset — отступ от графика
  • orient — ориентация (в Vega чаще используется для осей, но влияет на композицию)

Пример:

{
  "title": {
    "text": "Сравнение показателей",
    "anchor": "end",
    "offset": 12
  }
}

Заголовки с подзаголовками (subtitle)

Vega-Lite позволяет добавлять подзаголовки:

{
  "title": {
    "text": "Продажи",
    "subtitle": "по регионам за 2025 год"
  }
}

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

Использование выражений и форматирования текста

Для сложных случаев применяются выражения Vega:

{
  "title": {
    "text": {
      "signal": "'Среднее значение: ' + format(datum.mean, '.2f')"
    }
  }
}

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

Взаимодействие title с масштабом визуализации

Заголовок влияет на компоновку холста. Vega-Lite автоматически резервирует пространство:

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

При динамическом изменении текста возможна перекомпоновка layout без ручного вмешательства.

title в комбинированных графиках

В сложных композициях (layer, concat, repeat) поле title может задаваться:

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

Пример:

{
  "hconcat": [
    {
      "mark": "line",
      "title": "Линия тренда"
    },
    {
      "mark": "bar",
      "title": "Распределение"
    }
  ]
}

Каждый подграфик получает собственный независимый заголовок.

Отличие title от axis.title и legend.title

В Vega-Lite существует несколько типов заголовков:

  • title — общий заголовок визуализации
  • axis.title — подпись оси
  • legend.title — заголовок легенды

Пример различий:

{
  "title": "Общая визуализация",
  "encoding": {
    "x": {
      "field": "year",
      "type": "ordinal",
      "axis": { "title": "Год" }
    },
    "color": {
      "field": "group",
      "type": "nominal",
      "legend": { "title": "Категории" }
    }
  }
}

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

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

Если поле title не задано:

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

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

Ограничения и особенности

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

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

Поле title выполняет функцию смыслового якоря:

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

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

Оглавление