Слоёная диаграмма (streamgraph)

Streamgraph в Vega и Vega-Lite представляет собой разновидность многослойной площадной диаграммы, в которой отдельные временные ряды накладываются друг на друга с симметричным смещением относительно плавающей базовой линии. В отличие от обычной stacked area chart, где основание фиксировано, здесь используется оптимизация по «центру массы», что формирует характерную органическую, «текущую» форму слоёв.

Основная идея streamgraph заключается в преобразовании набора временных рядов в непрерывное поле площадей, где:

  • каждый слой соответствует отдельной категории;
  • значения суммируются по оси X (обычно время);
  • базовая линия вычисляется алгоритмом стэкинга;
  • слои располагаются симметрично относительно центра, минимизируя визуальные скачки.

Ключевой алгоритм основан на stack layout с методом wiggle offset, который уменьшает «дрожание» слоёв и делает общую форму более плавной.

Модель данных

Для streamgraph используется «длинный» формат данных:

  • поле времени (или категориальной оси X);
  • поле значения;
  • поле категории.

Пример структуры:

[
  { "date": "2024-01-01", "category": "A", "value": 12 },
  { "date": "2024-01-01", "category": "B", "value": 7 },
  { "date": "2024-01-02", "category": "A", "value": 9 }
]

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

Vega-Lite спецификация

В Vega-Lite streamgraph строится через комбинацию mark: "area" и трансформации stack.

Базовая конфигурация:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2024-01-01", "category": "A", "value": 12},
      {"date": "2024-01-01", "category": "B", "value": 7},
      {"date": "2024-01-02", "category": "A", "value": 9},
      {"date": "2024-01-02", "category": "B", "value": 4}
    ]
  },
  "mark": {
    "type": "area"
  },
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "stack": "center"
    },
    "color": {
      "field": "category",
      "type": "nominal"
    }
  }
}

Ключевая деталь

Параметр:

  • "stack": "center"

включает центрированное стэкирование, которое и формирует streamgraph-эффект.

Vega спецификация

Vega предоставляет более низкоуровневый контроль через transforms и signals. Основной механизм — transform stack с параметром offset: "wiggle".

Фрагмент спецификации:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "data": [
    {
      "name": "table",
      "values": [
        {"x": 1, "y": 12, "c": "A"},
        {"x": 1, "y": 7, "c": "B"},
        {"x": 2, "y": 9, "c": "A"},
        {"x": 2, "y": 4, "c": "B"}
      ]
    }
  ],
  "transform": [
    {
      "type": "stack",
      "groupby": ["x"],
      "field": "y",
      "sort": {"field": "c"},
      "offset": "wiggle",
      "as": ["y0", "y1"]
    }
  ]
}

Здесь создаются два производных поля:

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

Сглаживание и базовая линия

Ключевое отличие streamgraph от стандартного stacked area заключается в выборе смещения слоёв.

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

  • zero — классическое накопление от нуля;
  • center — симметричное распределение;
  • wiggle — минимизация суммарного «дрожания»;
  • normalize — нормализация до 100%.

В streamgraph наиболее характерны:

  • wiggle — для органических форм;
  • center — для балансировки относительно оси.

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

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

Порядок категорий влияет на восприятие структуры:

  • сортировка по суммарному значению усиливает «доминирующие» потоки;
  • сортировка по алфавиту упрощает сопоставление;
  • динамическая сортировка может улучшать читаемость временных изменений.

В Vega:

"sort": {
  "field": "y",
  "order": "descending"
}

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

Цветовое кодирование

Цвет играет критическую роль, поскольку слои часто пересекаются и имеют переменную толщину.

Используются:

  • категориальные палитры;
  • ручное задание шкалы;
  • интерполяция оттенков для плавных переходов.

Пример:

"color": {
  "field": "category",
  "type": "nominal",
  "scale": {
    "scheme": "category20b"
  }
}

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

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

  • monotone;
  • cardinal;
  • basis;

В Vega-Lite:

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

Это снижает угловатость и делает поток более естественным.

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

Streamgraph чаще всего применяется к временным рядам, поэтому критично:

  • корректная сортировка по времени;
  • равномерная дискретизация;
  • отсутствие пропусков.

При необходимости данные агрегируются:

  • по дням;
  • по неделям;
  • по месяцам.

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

Vega позволяет добавлять интерактивные элементы через signals:

  • подсветка слоя при наведении;
  • фильтрация категорий;
  • динамическое масштабирование.

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

"signals": [
  {
    "name": "hover",
    "value": null,
    "on": [
      {"events": "rect:mouseover", "update": "datum.category"},
      {"events": "mouseout", "update": "null"}
    ]
  }
]

И применение прозрачности:

"opacity": {
  "signal": "hover && hover !== datum.c ? 0.2 : 1"
}

Оптимизация плотных данных

При большом количестве категорий возникают проблемы перегрузки:

  • перекрытие слоёв;
  • визуальный шум;
  • потеря структуры.

Применяются подходы:

  • агрегация малых категорий в «Other»;
  • фильтрация по порогу значимости;
  • сглаживание временного ряда;
  • уменьшение числа цветов.

Типичные ошибки

Неправильное построение streamgraph часто связано с:

  • отсутствием нормализации временных рядов;
  • некорректным stack offset;
  • несогласованными временными метками;
  • случайной сортировкой категорий;
  • использованием дискретных значений без агрегации.

Каждая из этих проблем приводит к разрыву непрерывности потоков и нарушению геометрии диаграммы.

Расширенные техники

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

  • tooltip-слоями для точных значений;
  • brush selection для выделения диапазонов времени;
  • dual-axis overlay для сравнения с общей суммой;
  • logarithmic scaling при высокой дисперсии данных.

Также возможно использование трансформаций:

  • fold — для преобразования широких таблиц;
  • aggregate — для предварительной суммаризации;
  • impute — для заполнения пропусков.

Поведение при масштабировании

При изменении масштаба по оси времени:

  • локальная структура слоёв сохраняется;
  • wiggle offset пересчитывается;
  • форма потоков может изменяться глобально.

Это важная особенность: streamgraph не является строго инвариантным к zoom-операциям.

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

Streamgraph применяется для:

  • анализа медиа-потоков;
  • распределения трафика;
  • эволюции категорий продуктов;
  • мониторинга событийных потоков;
  • визуализации тематических трендов.

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

Оглавление