Диаграмма Ганта

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

Структура данных для диаграммы Ганта

Базовая модель данных включает набор задач с временными границами:

  • идентификатор задачи
  • начало выполнения (start)
  • окончание выполнения (end)
  • категория или группа
  • дополнительные метаданные (приоритет, статус, исполнитель)

Пример структуры данных:

[
  {
    "task": "Проектирование",
    "start": "2026-01-01",
    "end": "2026-01-10",
    "group": "Фаза 1"
  },
  {
    "task": "Разработка",
    "start": "2026-01-11",
    "end": "2026-02-01",
    "group": "Фаза 2"
  }
]

Временные значения интерпретируются как даты, что требует использования шкалы типа temporal.

Базовая реализация в Vega-Lite

Диаграмма Ганта в Vega-Lite строится через комбинацию:

  • ось X как временная шкала
  • ось Y как категориальная шкала задач
  • mark bar для отображения интервалов

Простейшая спецификация:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"task": "Проектирование", "start": "2026-01-01", "end": "2026-01-10"},
      {"task": "Разработка", "start": "2026-01-11", "end": "2026-02-01"}
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {"field": "task", "type": "nominal"},
    "x": {"field": "start", "type": "temporal"},
    "x2": {"field": "end"}
  }
}

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

Масштаб времени и точность отображения

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

  • день (yearmonthdate)
  • неделя (yearweek)
  • месяц (yearmonth)
  • точное время (yearmonthdatehoursminutesseconds)

Настройка оси:

"x": {
  "field": "start",
  "type": "temporal",
  "axis": {"format": "%d.%m.%Y"}
}

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

Группировка задач

Группировка позволяет разделять задачи по проектам, фазам или исполнителям. В Vega-Lite это реализуется через дополнительную категориальную ось или цветовое кодирование.

{
  "mark": "bar",
  "encoding": {
    "y": {"field": "task", "type": "nominal"},
    "x": {"field": "start", "type": "temporal"},
    "x2": {"field": "end"},
    "color": {"field": "group", "type": "nominal"}
  }
}

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

Сортировка задач по времени

Для повышения читаемости диаграммы применяется сортировка по дате начала:

"y": {
  "field": "task",
  "type": "nominal",
  "sort": {"field": "start", "op": "min"}
}

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

Отображение зависимостей между задачами

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

  • отдельный слой линий
  • координаты задач
  • вычисляемые соединения через transform

Пример концептуального слоя:

{
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "y": {"field": "task"},
        "x": {"field": "start", "type": "temporal"},
        "x2": {"field": "end"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {"field": "end", "type": "temporal"},
        "x2": {"field": "start"},
        "y": {"field": "task"}
      }
    }
  ]
}

Для сложных зависимостей применяется Vega (не Lite), где возможно вычисление координат через сигналы и пользовательские трансформации.

Многослойная структура диаграммы

Слои позволяют разделять визуальные компоненты:

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

Пример добавления текущей даты:

{
  "mark": "rule",
  "encoding": {
    "x": {"datum": "2026-01-20"},
    "color": {"value": "red"}
  }
}

Преобразования данных (transform)

Для построения сложных диаграмм используются трансформации:

  • filter — исключение задач
  • calculate — вычисление длительности
  • joinaggregate — вычисление статистик
  • window — ранжирование задач

Пример вычисления длительности:

"transform": [
  {
    "calculate": "datum.end - datum.start",
    "as": "duration"
  }
]

Визуализация контрольных точек (milestones)

Контрольные точки отображаются как отдельные символы:

{
  "mark": "point",
  "encoding": {
    "x": {"field": "start", "type": "temporal"},
    "y": {"field": "task"},
    "shape": {"value": "diamond"},
    "size": {"value": 100}
  }
}

Такие элементы не имеют длительности и служат индикаторами событий.

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

В Vega и Vega-Lite поддерживаются интерактивные элементы через:

  • tooltips
  • selection
  • фильтрацию
  • масштабирование

Пример tooltip:

"encoding": {
  "tooltip": [
    {"field": "task"},
    {"field": "start"},
    {"field": "end"}
  ]
}

Выделение выбранной задачи:

"selection": {
  "highlight": {
    "type": "single",
    "on": "mouseover"
  }
}

Масштабирование и прокрутка временной оси

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

"selection": {
  "zoom": {
    "type": "interval",
    "encodings": ["x"]
  }
}

Это позволяет изменять детализацию временной шкалы без изменения данных.

Множественные проекты в одной диаграмме

При отображении нескольких проектов используется вложенная группировка:

"row": {"field": "project", "type": "nominal"}

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

Цветовые стратегии

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

  • состояния задачи (в процессе, завершено, отложено)
  • принадлежности к команде
  • приоритета
"color": {
  "field": "status",
  "type": "nominal",
  "scale": {
    "domain": ["done", "in_progress", "blocked"],
    "range": ["green", "orange", "red"]
  }
}

Работа с длительными временными интервалами

При больших диапазонах дат применяется агрегация:

  • группировка по неделям
  • укрупнение до месяцев
  • динамическое изменение масштаба

Это снижает плотность визуализации и улучшает читаемость.

Vega против Vega-Lite в построении диаграмм Ганта

Vega предоставляет полный контроль над сценой визуализации, включая:

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

Vega-Lite ориентирован на декларативное описание, где:

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

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

Ограничения подхода Vega-Lite для Gantt

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

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

Оглавление