Площадная диаграмма с накоплением

Площадная диаграмма с накоплением (stacked area chart) используется для визуализации изменения нескольких категориальных рядов во времени или по непрерывной шкале, где каждая серия не только отображает собственную динамику, но и формирует вклад в общий итог. В Vega-Lite этот тип графика поддерживается нативно через механизм стеков (stack), который автоматически вычисляет смещения по оси Y.

Логическая модель накопления

В основе лежит преобразование исходных значений в интервалы:

  • y0 — нижняя граница слоя
  • y1 — верхняя граница слоя

Для каждой категории в каждой точке по оси X выполняется кумулятивное суммирование значений:

[ y_1^{(i)} = _{k=1}^{i} v_k, y_0^{(i)} = y_1^{(i-1)}]

Таким образом формируется «слоёный» профиль, где каждый следующий слой опирается на предыдущий.

Базовая площадь с накоплением в Vega-Lite

Минимальная спецификация строится вокруг mark "area" и параметра stack: "zero".

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"year": 2018, "type": "A", "value": 28},
      {"year": 2018, "type": "B", "value": 55},
      {"year": 2018, "type": "C", "value": 43},

      {"year": 2019, "type": "A", "value": 35},
      {"year": 2019, "type": "B", "value": 60},
      {"year": 2019, "type": "C", "value": 50}
    ]
  },
  "mark": "area",
  "encoding": {
    "x": {
      "field": "year",
      "type": "ordinal"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "stack": "zero"
    },
    "color": {
      "field": "type",
      "type": "nominal"
    }
  }
}

Ключевые моменты

  • mark: "area" активирует построение заполненной области
  • stack: "zero" задаёт накопление от нулевой базовой линии
  • color определяет разбиение на слои

Режимы стеков

Vega-Lite поддерживает несколько стратегий накопления:

  • "zero" — накопление от нуля
  • "normalize" — нормализация до 100%
  • "center" — центрирование вокруг нулевой оси (симметричная диаграмма)
  • null — отключение стеков

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

{
  "y": {
    "field": "value",
    "type": "quantitative",
    "stack": "normalize"
  }
}

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

Сортировка слоёв

Порядок накопления критически влияет на форму диаграммы. Управляется через sort.

"color": {
  "field": "type",
  "type": "nominal",
  "sort": "ascending"
}

Или явное задание порядка:

"sort": ["A", "B", "C"]

Неправильная сортировка может визуально исказить вклад категорий.

Непрерывная ось времени

При работе с временными рядами используется тип temporal.

"x": {
  "field": "year",
  "type": "temporal"
}

Пример с ISO датами:

{"date": "2020-01-01", "type": "A", "value": 120}

Интерполяция и сглаживание

Vega-Lite позволяет управлять формой линии через interpolate.

"mark": {
  "type": "area",
  "interpolate": "monotone"
}

Доступные варианты:

  • linear
  • monotone
  • step
  • cardinal

Сглаживание влияет только на визуальную форму, но не изменяет вычисленные значения стеков.

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

В Vega (низкоуровневый слой) стек формируется явно через трансформацию stack.

{
  "type": "stack",
  "groupby": ["year"],
  "field": "value",
  "sort": {"field": "type"},
  "as": ["y0", "y1"]
}

Далее область строится через area mark:

{
  "type": "area",
  "encode": {
    "update": {
      "x": {"scale": "x", "field": "year"},
      "y": {"scale": "y", "field": "y1"},
      "y2": {"scale": "y", "field": "y0"}
    }
  }
}

Цветовые шкалы и визуальная идентификация

Для категорий используется шкала color:

"color": {
  "field": "type",
  "type": "nominal",
  "scale": {
    "scheme": "category10"
  }
}

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

  • tableau10
  • set2
  • пользовательские палитры

Подписи и tooltip

Интерактивность добавляется через tooltip:

"tooltip": [
  {"field": "year", "type": "temporal"},
  {"field": "type", "type": "nominal"},
  {"field": "value", "type": "quantitative"}
]

Tooltip позволяет восстановить исходные значения, скрытые за слоёной структурой.

Фильтрация и предварительные вычисления

Для подготовки данных часто используется transform:

Агрегация

"transform": [
  {
    "aggregate": [
      {"op": "sum", "field": "value", "as": "total"}
    ],
    "groupby": ["year", "type"]
  }
]

Вычисляемые поля

{
  "calculate": "datum.value * 1.2",
  "as": "adjusted"
}

Сравнение режимов накопления

Абсолютные значения (stack: "zero")

Используется для отображения общего объёма и вклада категорий.

Нормализованные (stack: "normalize")

Фокус на структуре распределения, а не на масштабе.

Центрированные (stack: "center")

Применяется для симметричных данных и анализа отклонений.

Управление осями

Ось Y

"y": {
  "axis": {
    "title": "Объём",
    "format": ".2f"
  }
}

Ось X

"x": {
  "axis": {
    "title": "Год",
    "labelAngle": -45
  }
}

Работа с множественными рядами

Если данные представлены в «широком» формате, требуется трансформация fold.

"transform": [
  {
    "fold": ["A", "B", "C"],
    "as": ["type", "value"]
  }
]

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

Типичные ошибки построения

Некорректная агрегация

Если данные уже агрегированы, повторное суммирование приводит к искажению стеков.

Несортированные категории

Без явного sort порядок слоёв становится недетерминированным.

Смешение типов шкал

Использование ordinal вместо temporal для временных данных ухудшает интерполяцию.

Поведение при нулевых значениях

Нулевые значения сохраняют непрерывность слоя, но могут создавать «разрывы» при использовании интерполяции step.

Производительность на больших наборах данных

При тысячах точек Vega-Lite выполняет стекование на этапе трансформации. Узкие места возникают при:

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

Оптимизация достигается через:

  • предварительный aggregate
  • уменьшение числа слоёв
  • переход к Vega при сложной логике рендеринга

Расширение до Vega для сложной логики

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

  • условные цвета
  • нелинейные масштабы
  • адаптивные группы
  • ручное управление слоями через signal-based вычисления

Итоговая структура визуализации

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

  • данные (long format)
  • encoding (x, y, color)
  • стековая трансформация (stack)

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

Оглавление