Лепестковая диаграмма (radar chart)

Лепестковая диаграмма относится к полярным визуализациям, где каждое измерение отображается на собственной оси, расходящейся из центра. В Vega и Vega-Lite такая диаграмма строится через преобразование категориальных данных в угловую координату и числовых значений — в радиальную. Несмотря на отсутствие отдельного примитива «radar chart», он формируется комбинацией стандартных каналов: theta, radius, а также трансформаций данных.

Полярная система координат в Vega-Lite

Основой является переход от декартовой системы к полярной:

  • theta — угол (категория или индекс признака)
  • radius — расстояние от центра (значение показателя)

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

Подготовка данных для radar chart

Исходные данные обычно имеют «широкий» формат:

[
  { "category": "Скорость", "A": 5, "B": 3 },
  { "category": "Точность", "A": 4, "B": 2 },
  { "category": "Стабильность", "A": 3, "B": 4 }
]

Для Vega-Lite требуется преобразование в «длинный» формат через fold:

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

После трансформации данные приобретают вид:

Скорость, A, 5
Скорость, B, 3
...

Базовая структура radar chart

Лепестковая диаграмма в Vega-Lite строится через mark: "line" или mark: "area" с полярными каналами.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      { "axis": "Скорость", "series": "A", "value": 5 },
      { "axis": "Точность", "series": "A", "value": 4 },
      { "axis": "Стабильность", "series": "A", "value": 3 }
    ]
  },
  "mark": {
    "type": "line",
    "point": true,
    "interpolate": "linear-closed"
  },
  "encoding": {
    "theta": {
      "field": "axis",
      "type": "nominal"
    },
    "radius": {
      "field": "value",
      "type": "quantitative"
    },
    "color": {
      "field": "series",
      "type": "nominal"
    }
  }
}

Замыкание контура

Важный аспект radar chart — замкнутая форма. В Vega-Lite это обеспечивается:

  • interpolate: "linear-closed" для линий
  • дублированием первой точки в конце ряда при необходимости

Построение нескольких серий

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

"encoding": {
  "theta": { "field": "axis", "type": "nominal" },
  "radius": { "field": "value", "type": "quantitative" },
  "color": { "field": "series", "type": "nominal" }
}

Каждая серия образует отдельный многоугольник.

Нормализация значений

Для корректной визуализации радиальная шкала должна быть унифицирована.

Линейная нормализация

Часто используется преобразование:

[ x’ = ]

В Vega-Lite:

{
  "calculate": "(datum.value - 0) / (10 - 0)",
  "as": "normalized"
}

И затем:

"radius": { "field": "normalized", "type": "quantitative" }

Использование area-маркера

Для заполненной диаграммы применяется area:

"mark": {
  "type": "area",
  "interpolate": "linear-closed",
  "opacity": 0.3
}

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

Сортировка осей

Порядок категорий критически важен. Без сортировки Vega-Lite может упорядочить их лексикографически, что исказит форму.

"encoding": {
  "theta": {
    "field": "axis",
    "type": "nominal",
    "sort": ["Скорость", "Точность", "Стабильность"]
  }
}

Многоуровневая агрегация

При наличии сырых данных применяется агрегация:

{
  "aggregate": [
    {
      "op": "mean",
      "field": "value",
      "as": "avgValue"
    }
  ],
  "groupby": ["axis", "series"]
}

Это позволяет строить radar chart на основе наблюдений.

Vega-Lite и ручной контроль полярных координат

Хотя Vega-Lite абстрагирует систему координат, Vega предоставляет более низкоуровневый контроль через polar transform и вычисление углов:

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

Vega-Lite ограничивает это, но упрощает построение стандартных случаев.

Расширенные техники визуализации

Вложенные radar chart

Несколько слоёв можно комбинировать через layer:

"layer": [
  { "mark": "area", ... },
  { "mark": "line", ... }
]

Это позволяет одновременно показывать:

  • заполненную область
  • контур
  • точки измерений

Подсветка отдельных осей

Используется условное форматирование:

"color": {
  "condition": {
    "test": "datum.axis === 'Скорость'",
    "value": "red"
  },
  "value": "steelblue"
}

Масштабирование радиальной шкалы

Радиальная шкала управляется через scale:

"radius": {
  "field": "value",
  "type": "quantitative",
  "scale": {
    "domain": [0, 10],
    "range": [0, 150]
  }
}

Это определяет физический размер диаграммы.

Работа с несколькими измерениями

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

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

Решения в Vega-Lite:

  • увеличение размера view
  • использование labelAngle
  • сокращение числа категорий через filter

Интерполяция линий

Качество формы зависит от interpolate:

  • linear-closed — стандартный выбор
  • cardinal — сглаженная форма
  • catmull-rom — более мягкая кривизна
"interpolate": "cardinal-closed"

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

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

Комбинация с интерактивностью

Vega-Lite поддерживает базовую интерактивность:

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

Это позволяет подсвечивать отдельные серии.

Итоговая структура radar chart в Vega-Lite

Типичная композиция включает:

  • transform → приведение данных к длинному формату
  • theta → категориальные оси
  • radius → числовые значения
  • mark → line/area с замыканием
  • color → разделение серий
  • scale → нормализация

Эта комбинация превращает стандартную табличную структуру в полярное многомерное представление, где геометрия фигуры отражает профиль данных.

Оглавление