Нормированная столбчатая диаграмма

Нормированная столбчатая диаграмма представляет собой вариант составной (stacked) столбчатой визуализации, в которой абсолютные значения заменяются долями. Каждый столбец отображает распределение категорий внутри фиксированного суммарного масштаба, равного 100%. Основной смысл заключается в сравнении относительных вкладов, а не абсолютных величин.

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

Логическая модель нормированной диаграммы

Нормированная столбчатая диаграмма базируется на преобразовании исходных данных:

  • исходные значения группируются по категориальному признаку;
  • внутри каждой группы выполняется суммирование;
  • каждая составляющая делится на сумму группы;
  • результат масштабируется в диапазон 0–1 или 0–100%.

Формально для значения ( x_{ij} ):

[ x’*{ij} = ]

где:

  • ( i ) — категория внутри группы,
  • ( j ) — группа,
  • ( x’_{ij} ) — нормированное значение.

Структура спецификации Vega-Lite

В Vega-Lite нормированная столбчатая диаграмма строится через комбинацию следующих элементов:

  • mark: "bar"
  • encoding.x — категориальная ось
  • encoding.y — количественная ось
  • stack: "normalize" — ключевой параметр нормализации

Базовая спецификация

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "group": "X", "value": 10},
      {"category": "B", "group": "X", "value": 20},
      {"category": "C", "group": "X", "value": 30},

      {"category": "A", "group": "Y", "value": 5},
      {"category": "B", "group": "Y", "value": 15},
      {"category": "C", "group": "Y", "value": 80}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "group",
      "type": "nominal"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "stack": "normalize"
    },
    "color": {
      "field": "category",
      "type": "nominal"
    }
  }
}

Механизм stack: normalize

Параметр:

"stack": "normalize"

изменяет поведение стековой агрегации следующим образом:

  • вместо суммирования значений по оси Y выполняется нормировка;
  • каждая группа приводится к единому масштабу;
  • итоговая высота столбца всегда равна 1 (или 100%).

Внутренне Vega-Lite преобразует данные в последовательность:

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

Отличие от обычной стековой диаграммы

Обычная стековая диаграмма:

  • отображает абсолютные значения;
  • высота столбца изменяется между группами;
  • акцент на объёмах.

Нормированная стековая диаграмма:

  • фиксирует высоту столбца;
  • отображает доли;
  • акцент на структуре распределения.

Поведение шкалы и осей

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

  • диапазон Y фиксируется в [0, 1];
  • возможна ручная настройка форматирования в процентах;
  • метки оси часто преобразуются через форматтер.

Пример форматирования процентов:

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

Использование выражений трансформации

Для более контролируемых сценариев применяется слой transform, где данные агрегируются до визуализации.

{
  "transform": [
    {
      "stack": "value",
      "groupby": ["group"],
      "as": ["y0", "y1"],
      "normalize": true
    }
  ]
}

Такая форма используется в Vega (низкоуровневом языке) и предоставляет более детальную настройку по сравнению с Vega-Lite.

Многосерийная структура данных

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

Типичная структура данных:

  • измерение по времени;
  • несколько категорий внутри каждого времени;
  • фиксированное сравнение пропорций.

Пример:

[
  {"year": 2020, "type": "A", "value": 40},
  {"year": 2020, "type": "B", "value": 60},
  {"year": 2021, "type": "A", "value": 30},
  {"year": 2021, "type": "B", "value": 70}
]

Пример временной нормированной диаграммы

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"year": 2020, "type": "A", "value": 40},
      {"year": 2020, "type": "B", "value": 60},
      {"year": 2021, "type": "A", "value": 30},
      {"year": 2021, "type": "B", "value": 70}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "year",
      "type": "ordinal"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "stack": "normalize"
    },
    "color": {
      "field": "type",
      "type": "nominal"
    }
  }
}

Цветовое кодирование и интерпретация

Цвет в нормированной столбчатой диаграмме выполняет роль:

  • идентификации категории;
  • визуального разделения долей;
  • упрощения восприятия структуры.

Рекомендуется:

  • использовать стабильную палитру;
  • избегать близких оттенков для соседних категорий;
  • сохранять консистентность между графиками.

Обработка пропусков и нулевых значений

В нормированных диаграммах важно учитывать:

  • нулевые значения исключаются из суммы;
  • отсутствие данных может искажать доли;
  • Vega-Lite интерпретирует отсутствующие значения как null.

Поведение:

  • null не участвует в вычислении суммы;
  • категория может визуально исчезать;
  • при необходимости применяется impute.

Взаимодействие с сортировкой

Сортировка влияет на читаемость структуры:

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

Пример:

"x": {
  "field": "group",
  "type": "nominal",
  "sort": "-y"
}

Сравнение нескольких групп

Нормированная диаграмма наиболее эффективна при:

  • сравнении распределений между наборами данных;
  • анализе долей внутри сегментов;
  • визуализации структуры, а не объёма.

Типовые сценарии:

  • доля рынка;
  • распределение ответов;
  • процентное соотношение классов;
  • структура продаж по категориям.

Особенности рендеринга в Vega

В Vega нормированная стековая логика реализуется через вычисление масштаба в фазе dataflow:

  • данные проходят трансформации;
  • применяется stack transform;
  • вычисляются координаты прямоугольников;
  • строится сцена графических примитивов.

Ограничения подхода

Нормированная столбчатая диаграмма имеет ряд ограничений:

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

Варианты расширения

Расширенные конфигурации включают:

  • добавление tooltip с абсолютными значениями;
  • комбинирование с линейными графиками;
  • применение фасетирования (facet) для разбиения по измерениям;
  • использование transform для предрасчёта процентов.

Пример tooltip:

"tooltip": [
  {"field": "category"},
  {"field": "value"}
]

Модель восприятия данных

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

  • сравнение пропорций внутри столбца;
  • сопоставление структуры между столбцами;
  • анализ изменений долей между группами.

Ключевой эффект — переход от анализа величин к анализу состава.

Оглавление