area

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

Area-график строится на двух ключевых измерениях:

  • ось X — обычно временная шкала или непрерывная переменная
  • ось Y — числовое значение

Основное отличие от линейного графика заключается в том, что значение Y визуально интерпретируется как площадь:

  • линия показывает тренд
  • заливка под линией показывает накопленную величину

В Vega-Lite это реализуется через mark:

{
  "mark": "area",
  "encoding": {
    "x": { "field": "date", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}

Структура данных и базовое отображение

Типичный набор данных для area-графика включает временную метку и числовое значение:

[
  { "date": "2024-01-01", "value": 30 },
  { "date": "2024-01-02", "value": 45 },
  { "date": "2024-01-03", "value": 28 }
]

При отображении Vega-Lite автоматически соединяет точки в порядке оси X и заполняет область между линией и нулевой базой.

Ключевой параметр — baseline, который по умолчанию равен 0.

Вертикальная и горизонтальная ориентация

Area-график может быть ориентирован как вертикально, так и горизонтально. Ориентация определяется типами осей:

  • X = temporal/ordinal → классический вариант
  • Y = temporal/ordinal → повёрнутый вариант
{
  "mark": "area",
  "encoding": {
    "x": { "field": "value", "type": "quantitative" },
    "y": { "field": "date", "type": "temporal" }
  }
}

Горизонтальная интерпретация часто используется для распределений и плотностей.

Настройка цвета и прозрачности

Area-графики почти всегда требуют управления заливкой:

{
  "mark": {
    "type": "area",
    "color": "#4c78a8",
    "opacity": 0.6
  }
}

Оптимальная практика:

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

Многоуровневые area-графики (stacked area)

Одно из ключевых применений — накопленные области. В Vega-Lite это включается через stack.

{
  "mark": "area",
  "encoding": {
    "x": { "field": "date", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative", "stack": "zero" },
    "color": { "field": "category", "type": "nominal" }
  }
}

Режимы стэкинга:

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

Нормализованный area-график

Используется для анализа долей:

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

Каждая категория отображается как процент от общего объёма.

Streamgraph

Эффект «плавающих» слоёв:

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

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

Интерполяция и форма линии

Vega-Lite позволяет управлять способом соединения точек через параметр interpolate.

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

Основные режимы:

  • linear — прямые сегменты
  • monotone — сглаженная кривая без пересечений
  • step — ступенчатая функция
  • basis — B-spline сглаживание
  • cardinal — усиленное сглаживание

Выбор интерполяции влияет на восприятие данных:

  • linear — точность
  • monotone — баланс точности и эстетики
  • basis/cardinal — визуальная гладкость

Area с линией (layered area + line)

Часто area комбинируется с линией для повышения читаемости:

{
  "layer": [
    {
      "mark": { "type": "area", "opacity": 0.3 }
    },
    {
      "mark": { "type": "line", "color": "black" }
    }
  ],
  "encoding": {
    "x": { "field": "date", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}

Такое наложение:

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

Работа с null и разрывами

Area-графики чувствительны к отсутствующим данным.

Параметр defined позволяет контролировать разрывы:

{
  "mark": {
    "type": "area",
    "defined": "datum.value !== null"
  }
}

Поведение:

  • false → разрыв области
  • true → интерполяция через пропуски (в зависимости от конфигурации)

Скейлы и оси

Vega-Lite автоматически строит шкалы, но area-графики требуют внимательной настройки:

Логарифмическая шкала

"y": {
  "field": "value",
  "type": "quantitative",
  "scale": { "type": "log" }
}

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

Ограничение диапазона

"scale": {
  "domain": [0, 100]
}

Позволяет фиксировать визуальную область.

Цветовые каналы и многосерийность

Для нескольких рядов данных используется color encoding:

{
  "mark": "area",
  "encoding": {
    "x": { "field": "date", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative" },
    "color": { "field": "series", "type": "nominal" }
  }
}

Поведение зависит от stack:

  • без stack — перекрытие областей
  • с stack — накопление
  • с normalize — процентное распределение

Прозрачность и визуальная иерархия

При наложении нескольких area-слоёв критично управление opacity:

  • 0.2–0.4 — плотные многослойные графики
  • 0.5–0.7 — умеренное перекрытие
  • 0.8–1.0 — одиночные серии

Дополнительно используется:

"blend": "multiply"

для усиления пересечений.

Area в Vega (низкоуровневое представление)

В Vega (не Lite) area строится через mark type "area" с явными path-данными или transform-цепочками.

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

{
  "marks": [
    {
      "type": "area",
      "from": { "data": "table" },
      "encode": {
        "enter": {
          "x": { "scale": "x", "field": "date" },
          "y": { "scale": "y", "field": "value0" },
          "y2": { "scale": "y", "field": "value1" }
        }
      }
    }
  ]
}

Здесь появляется возможность:

  • задавать верхнюю и нижнюю границу области
  • строить диапазоны (confidence intervals)
  • визуализировать uncertainty

Диапазонные area-графики (band / confidence area)

Area может использоваться для отображения интервалов:

{
  "mark": "area",
  "encoding": {
    "x": { "field": "x", "type": "quantitative" },
    "y": { "field": "lower", "type": "quantitative" },
    "y2": { "field": "upper" }
  }
}

Применение:

  • доверительные интервалы
  • min/max диапазоны
  • прогнозные модели

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

Добавление интерактивности:

{
  "mark": "area",
  "encoding": {
    "tooltip": [
      { "field": "date", "type": "temporal" },
      { "field": "value", "type": "quantitative" }
    ]
  }
}

При использовании в Vega View возможны:

  • hover highlight
  • selection brush
  • linked views

Selection и фильтрация

Brush selection:

"selection": {
  "brush": {
    "type": "interval"
  }
}

Использование:

  • выделение диапазонов времени
  • фильтрация stacked областей
  • динамическое масштабирование

Производительность и оптимизация

Area-графики могут быть тяжёлыми при больших данных.

Практики оптимизации:

  • агрегация (aggregate)
  • биннинг временных данных
  • упрощение интерполяции (linear вместо basis)
  • снижение количества слоёв

Пример агрегации:

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

Типовые ошибки при работе с area

  • отсутствие сортировки по оси X
  • смешивание типов данных в одной серии
  • некорректный stack при отрицательных значениях
  • использование area вместо line там, где площадь вводит в заблуждение
  • чрезмерная прозрачность при множественных слоях

Сравнение поведения area и line

  • line — показывает динамику изменения
  • area — усиливает восприятие величины
  • stacked area — показывает структуру целого
  • line + area — комбинированное представление тренда и массы

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

Оглавление