Поле title: заголовки и подзаголовки

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

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

{
  "title": "Продажи по регионам"
}

Более развитая форма использует объект с дополнительными параметрами:

{
  "title": {
    "text": "Продажи по регионам",
    "subtitle": "Данные за 2025 год",
    "anchor": "start",
    "fontSize": 16,
    "subtitleFontSize": 12,
    "color": "#333"
  }
}

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

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

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

Эти свойства позволяют точно управлять визуальной иерархией и читабельностью графика.

Подзаголовки как инструмент семантического уточнения

Подзаголовок (subtitle) используется для уточнения контекста отображаемых данных. Он не является декоративным элементом, а выполняет функцию семантического расширения заголовка.

Пример:

{
  "title": {
    "text": "Температура воздуха",
    "subtitle": "Среднесуточные значения по месяцам"
  }
}

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

Поведение title в компоновке визуализаций

В сложных визуализациях поле title может применяться как на уровне всей спецификации, так и внутри отдельных компонентов (facet, layer, repeat).

Заголовок на уровне всего графика

{
  "title": "Распределение доходов",
  "data": {"url": "data.json"},
  "mark": "bar",
  "encoding": {
    "x": {"field": "income", "bin": true},
    "y": {"aggregate": "count"}
  }
}

Здесь title относится ко всей визуализации и интерпретируется как глобальный заголовок сцены.

Заголовки в фасетированных визуализациях

В фасетах поле title может применяться к каждой отдельной подгруппе:

{
  "facet": {
    "row": {"field": "region"},
    "title": "Сравнение регионов"
  },
  "spec": {
    "mark": "line",
    "encoding": {
      "x": {"field": "year"},
      "y": {"field": "value"}
    }
  }
}

Здесь title описывает всю сетку фасетированных графиков, а не отдельные панели.

Поле title в Vega: более низкоуровневый контроль

В Vega управление заголовками осуществляется через отдельные примитивы в секции marks. Заголовок в Vega — это не специальное поле, а графический объект типа text.

Пример:

{
  "marks": [
    {
      "type": "text",
      "encode": {
        "enter": {
          "x": {"value": 200},
          "y": {"value": 20},
          "text": {"value": "Продажи по регионам"},
          "fontSize": {"value": 16},
          "fill": {"value": "#333"}
        }
      }
    }
  ]
}

В отличие от Vega-Lite, здесь отсутствует абстрактное поле title, и разработчик полностью контролирует позиционирование и стиль.

Иерархия заголовков и субзаголовков

При работе с Vega-Lite важно учитывать многоуровневую структуру:

  • Глобальный title — относится ко всей визуализации
  • Facet title — описывает набор подграфиков
  • Axis title — подписи осей
  • Legend title — заголовок легенды

Пример комбинированной структуры:

{
  "title": {
    "text": "Анализ продаж",
    "subtitle": "Разбивка по категориям"
  },
  "encoding": {
    "x": {
      "field": "month",
      "type": "ordinal",
      "axis": {"title": "Месяцы"}
    },
    "y": {
      "field": "sales",
      "type": "quantitative",
      "axis": {"title": "Объём продаж"}
    },
    "color": {
      "field": "category",
      "legend": {"title": "Категории товаров"}
    }
  }
}

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

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

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

Приоритет обычно следующий:

  1. Title внутри facet/repeat
  2. Title внутри слоя (layer)
  3. Глобальный title

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

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

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

{
  "title": {
    "text": {
      "signal": "'Продажи за ' + year"
    }
  }
}

Здесь заголовок зависит от значения сигнала year, что позволяет синхронизировать текст с интерактивными элементами.

Стилизация title через конфигурацию

Глобальные стили заголовков задаются в разделе config:

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

Это влияет на все заголовки, если они не переопределены локально.

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

Несмотря на одинаковое имя свойства, семантика различается:

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

Пример:

{
  "title": "Общий обзор",
  "encoding": {
    "x": {
      "field": "time",
      "axis": {"title": "Время"}
    },
    "color": {
      "field": "type",
      "legend": {"title": "Тип события"}
    }
  }
}

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

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

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

Оглавление