Тип arc

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

Arc-геометрия используется не только в классических pie/donut chart, но и в более сложных композициях: радиальных столбчатых диаграммах, кольцевых индикаторах, секторных шкалах, визуализациях потоков и агрегированных долей.

Геометрическая модель arc

Arc-объект задаётся как сегмент кольца, ограниченный двумя радиальными линиями и двумя окружностями (внутренней и внешней).

Формально каждый arc определяется набором параметров:

  • startAngle — начальный угол сектора
  • endAngle — конечный угол сектора
  • innerRadius — внутренний радиус
  • outerRadius — внешний радиус
  • padAngle — зазор между сегментами
  • cornerRadius — скругление углов

Базовая параметризация:

[ x() = r (), y() = r ()]

где θ изменяется от startAngle до endAngle, а r задаёт радиус.

Arc как mark в Vega

В Vega mark arc описывает геометрию сектора напрямую через поля данных или вычисленные трансформации. Типичная структура mark:

{
  "type": "arc",
  "from": {"data": "table"},
  "encode": {
    "enter": {
      "startAngle": {"field": "start"},
      "endAngle": {"field": "end"},
      "innerRadius": {"value": 40},
      "outerRadius": {"value": 100},
      "fill": {"field": "color"}
    }
  }
}

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

Arc в Vega-Lite: декларативная модель

В отличие от Vega, Vega-Lite абстрагирует вычисление углов. Данные агрегируются автоматически через theta-encoding.

Базовый пример круговой диаграммы:

{
  "data": {"name": "table"},
  "mark": "arc",
  "encoding": {
    "theta": {"field": "value", "type": "quantitative"},
    "color": {"field": "category", "type": "nominal"}
  }
}

Здесь:

  • theta определяет размер сектора
  • суммарное значение нормализуется в 2π
  • сегменты автоматически располагаются по кругу

Параметры управления arc в Vega-Lite

1. innerRadius и outerRadius

Позволяют управлять формой диаграммы:

  • innerRadius = 0 → классическая pie chart
  • innerRadius > 0 → donut chart
  • увеличение разницы радиусов → визуальная «толщина» кольца
{
  "mark": {
    "type": "arc",
    "innerRadius": 40,
    "outerRadius": 80
  }
}

2. startAngle и endAngle

Позволяют ограничивать сектор круга, превращая arc в дугу произвольного диапазона.

Пример полукруговой диаграммы:

{
  "mark": {
    "type": "arc",
    "startAngle": 3.14,
    "endAngle": 6.28
  }
}

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

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

3. padAngle

Параметр задаёт расстояние между секторами.

{
  "mark": {
    "type": "arc",
    "padAngle": 0.02
  }
}

Функционально padAngle:

  • снижает визуальную «слипчивость» сегментов
  • улучшает читаемость категориальных данных
  • вводит структурную сегментацию

4. cornerRadius

Скругляет края сегментов.

{
  "mark": {
    "type": "arc",
    "cornerRadius": 6
  }
}

Эффекты:

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

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

Arc в Vega и Vega-Lite тесно связан с полярной системой координат. Декартовы данные трансформируются следующим образом:

[ = ]

Каждый сегмент получает угол пропорционально своей доле.

Радиусная логика:

  • фиксированный outerRadius → классическая pie
  • переменный outerRadius → radial bar chart

Radial Bar Chart через arc

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

Пример:

{
  "mark": "arc",
  "encoding": {
    "theta": {"field": "value"},
    "radius": {"field": "value"},
    "color": {"field": "category"}
  }
}

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

  • theta — угол
  • radius — длина дуги

Это позволяет строить:

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

Внутренняя структура вычисления arc

При рендеринге Vega выполняет следующие шаги:

  1. Агрегация данных (в Vega-Lite)
  2. Вычисление долей (theta)
  3. Назначение стартовых углов
  4. Построение геометрии дуг
  5. Тесселяция в SVG/Canvas path

Геометрическая аппроксимация дуги осуществляется через разбиение на сегменты Bézier-кривых.

Arc и масштабирование

Arc тесно взаимодействует с scale-компонентами:

  • theta-scale — распределяет углы
  • color-scale — кодирует категории
  • radius-scale — задаёт радиальную глубину

Пример:

"encoding": {
  "theta": {
    "field": "value",
    "scale": {"type": "linear"}
  },
  "color": {
    "field": "group",
    "scale": {"scheme": "category10"}
  }
}

Работа с пустыми и нулевыми значениями

Arc требует аккуратной обработки крайних случаев:

  • нулевые значения → отсутствующий сектор
  • отрицательные значения → обычно игнорируются или требуют трансформации
  • суммарный ноль → невозможность нормализации углов

Типичная стратегия обработки:

  • фильтрация
  • агрегация
  • нормализация через transform

Композиция arc с другими mark

Arc часто используется совместно с:

  • text (подписи внутри или снаружи сектора)
  • rule (разделители)
  • line (радиальные указатели)

Пример наложения текста:

{
  "mark": "text",
  "encoding": {
    "theta": {"field": "value"},
    "radius": {"value": 60},
    "text": {"field": "category"}
  }
}

Анимация arc

Arc поддерживает интерполяцию параметров:

  • startAngle / endAngle → плавное раскрытие
  • innerRadius / outerRadius → эффект «пульсации»
  • theta → динамическое обновление долей

Анимация основана на интерполяции путей SVG.

Производительность arc

Производительность зависит от:

  • количества сегментов
  • сложности дуг (cornerRadius увеличивает вычисления)
  • режима рендеринга (SVG vs Canvas)

При большом числе сегментов предпочтительнее Canvas-рендеринг, так как SVG создаёт множество DOM-узлов.

Ограничения модели arc

Несмотря на универсальность, arc имеет структурные ограничения:

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

Arc как базовый строительный блок

Arc выступает фундаментом для множества производных визуализаций:

  • pie chart
  • donut chart
  • sunburst диаграммы (в сочетании с иерархиями)
  • radial dendrogram
  • gauge-индикаторы
  • circular progress bars

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

Декларативная природа arc в Vega-Lite

Ключевая особенность Vega-Lite заключается в том, что arc определяется не как геометрия, а как функция отображения данных:

  • данные → агрегация → нормализация → углы → дуги
  • пользователь задаёт только смысловые поля
  • система самостоятельно формирует геометрию

Такой подход отделяет описание данных от их визуального представления, делая arc универсальным элементом полярной визуализации.

Оглавление