arc: круговые и кольцевые диаграммы

Марк arc используется для построения круговых, кольцевых и секторных диаграмм. Он описывает дуги окружности с заданными углами, радиусами и центром. В Vega-Lite arc применяется как высокоуровневый способ построения pie chart и donut chart, а в Vega предоставляет полный контроль над геометрией каждого сегмента.

Ключевая особенность arc — работа не с координатами x и y, а с углами и радиусами.

Геометрия дуги

Каждая дуга определяется следующими параметрами:

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

В Vega углы задаются в радианах.

Полная окружность:

2

Простая круговая диаграмма в Vega-Lite

Минимальный пример pie chart:

const spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "data": {
    "values": [
      {"category": "A", "value": 30},
      {"category": "B", "value": 80},
      {"category": "C", "value": 45},
      {"category": "D", "value": 60}
    ]
  },

  "mark": "arc",

  "encoding": {
    "theta": {
      "field": "value",
      "type": "quantitative"
    },

    "color": {
      "field": "category",
      "type": "nominal"
    }
  }
};

Как работает theta

Канал theta определяет размер сектора.

Vega-Lite автоматически:

  1. вычисляет сумму значений;
  2. определяет долю каждого элемента;
  3. преобразует долю в угол;
  4. строит сектор.

Если сумма значений равна 215, а элемент содержит 80, его угол:

Цветовые категории

Обычно круговые диаграммы используют категориальное кодирование цвета:

"color": {
  "field": "category",
  "type": "nominal"
}

Vega-Lite автоматически создаёт шкалу цветов.

Для задания собственной палитры:

"color": {
  "field": "category",
  "type": "nominal",
  "scale": {
    "range": [
      "#4c78a8",
      "#f58518",
      "#e45756",
      "#72b7b2"
    ]
  }
}

Кольцевая диаграмма

Donut chart создаётся через innerRadius.

const spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "data": {
    "values": [
      {"category": "Desktop", "value": 55},
      {"category": "Mobile", "value": 35},
      {"category": "Tablet", "value": 10}
    ]
  },

  "mark": {
    "type": "arc",
    "innerRadius": 60
  },

  "encoding": {
    "theta": {
      "field": "value",
      "type": "quantitative"
    },

    "color": {
      "field": "category",
      "type": "nominal"
    }
  }
};

Принцип работы

У обычной круговой диаграммы:

innerRadius = 0

У кольцевой:

innerRadius > 0

Чем больше внутренний радиус, тем тоньше кольцо.

Управление внешним радиусом

Размер диаграммы регулируется через radius:

"mark": {
  "type": "arc",
  "radius": 120
}

В Vega-Lite:

Свойство Значение
radius внешний радиус
innerRadius внутренний радиус

Толщина кольца

Толщина кольца вычисляется как разница между радиусами:

R-r

где:

  • R — внешний радиус;
  • r — внутренний радиус.

Подписи с текстом

Круговые диаграммы часто комбинируются с марком text.

const spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "layer": [
    {
      "data": {
        "values": [
          {"category": "A", "value": 40},
          {"category": "B", "value": 60}
        ]
      },

      "mark": {
        "type": "arc",
        "innerRadius": 50
      },

      "encoding": {
        "theta": {
          "field": "value",
          "type": "quantitative"
        },

        "color": {
          "field": "category",
          "type": "nominal"
        }
      }
    },

    {
      "data": {
        "values": [
          {"category": "A", "value": 40},
          {"category": "B", "value": 60}
        ]
      },

      "mark": {
        "type": "text",
        "radius": 90
      },

      "encoding": {
        "theta": {
          "field": "value",
          "type": "quantitative"
        },

        "text": {
          "field": "category"
        }
      }
    }
  ]
};

Центрирование текста внутри donut chart

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

{
  "mark": {
    "type": "text",
    "fontSize": 28,
    "fontWeight": "bold"
  },

  "encoding": {
    "text": {
      "value": "75%"
    }
  }
}

Такой подход часто используется для KPI-индикаторов.

Разделение сегментов

Свойство padAngle добавляет расстояние между дугами.

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

Чем больше значение, тем заметнее промежутки.

Скругление сегментов

Свойство cornerRadius создаёт плавные края.

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

Особенно эффективно смотрится в donut chart.

Сортировка сегментов

По умолчанию Vega-Lite сортирует категории.

Управление сортировкой:

"color": {
  "field": "category",
  "type": "nominal",
  "sort": "-x"
}

Либо:

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

Начальный угол

Диаграмма может начинаться не с верхней точки.

"mark": {
  "type": "arc",
  "startAngle": 0
}

Или:

"mark": {
  "type": "arc",
  "startAngle": -1.57
}

Значение задаётся в радианах.

Половина окружности:

Четверть окружности:

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

Gauge-подобные визуализации строятся ограничением углов.

"mark": {
  "type": "arc",
  "startAngle": -1.57,
  "endAngle": 1.57
}

Получается половина окружности.

Радиальная визуализация

В Vega arc может использоваться не только для pie chart, но и для сложных радиальных схем:

  • radial bar chart;
  • polar histogram;
  • sunburst;
  • circular timeline;
  • radial heatmap.

Низкоуровневый arc в Vega

Vega предоставляет прямой контроль над геометрией.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",

  "width": 400,
  "height": 400,

  "data": [
    {
      "name": "table",
      "values": [
        {
          "startAngle": 0,
          "endAngle": 1.5,
          "innerRadius": 40,
          "outerRadius": 120
        }
      ]
    }
  ],

  "marks": [
    {
      "type": "arc",

      "from": {
        "data": "table"
      },

      "encode": {
        "enter": {
          "x": {"value": 200},
          "y": {"value": 200},

          "startAngle": {
            "field": "startAngle"
          },

          "endAngle": {
            "field": "endAngle"
          },

          "innerRadius": {
            "field": "innerRadius"
          },

          "outerRadius": {
            "field": "outerRadius"
          },

          "fill": {
            "value": "#4c78a8"
          }
        }
      }
    }
  ]
}

Координаты центра

В Vega дуга привязывается к координатам:

"x": {"value": 200},
"y": {"value": 200}

Это центр окружности.

Динамическое управление радиусом

Радиус можно вычислять из данных.

"outerRadius": {
  "scale": "rScale",
  "field": "value"
}

Так создаются radial bar chart.

Анимация дуг

Vega поддерживает анимированные переходы.

Пример:

"encode": {
  "update": {
    "endAngle": {
      "signal": "progress"
    }
  }
}

Значение progress может изменяться через signal.

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

Signals позволяют создавать интерактивные donut chart.

{
  "name": "hoverIndex",
  "value": -1,

  "on": [
    {
      "events": "arc:mouseover",
      "update": "datum.index"
    },

    {
      "events": "arc:mouseout",
      "update": "-1"
    }
  ]
}

Эффект выделения сегмента

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

"outerRadius": [
  {
    "test": "datum.index === hoverIndex",
    "value": 140
  },

  {
    "value": 120
  }
]

Sunburst-диаграммы

arc является базой для sunburst visualization.

В этом случае:

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

Polar coordinate system

arc работает в полярной системе координат.

Связь декартовых и полярных координат:

genui{“math_block_widget_always_prefetch_v2”:{“content”:“x=r”}}

genui{“math_block_widget_always_prefetch_v2”:{“content”:“y=r”}}

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

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

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

Проблемы:

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

Практически полезный диапазон:

3–8 сегментов

Ошибки восприятия углов

Человек хуже сравнивает углы, чем длины.

Поэтому:

  • bar chart обычно точнее pie chart;
  • небольшие различия трудно заметить;
  • круговые диаграммы плохо подходят для аналитики высокой точности.

Проблемы сортировки

Случайный порядок сегментов ухудшает читаемость.

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

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

Малые сегменты

Сектора менее 2–3% практически неразличимы.

Типичные решения:

  • объединение в категорию Other;
  • использование tooltip;
  • переход к bar chart.

Настройка tooltip

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

Кольцевые KPI-индикаторы

Один из популярных вариантов использования arc.

Пример:

const spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",

  "data": {
    "values": [
      {"label": "progress", "value": 75},
      {"label": "rest", "value": 25}
    ]
  },

  "layer": [
    {
      "mark": {
        "type": "arc",
        "innerRadius": 70,
        "cornerRadius": 10
      },

      "encoding": {
        "theta": {
          "field": "value",
          "type": "quantitative"
        },

        "color": {
          "field": "label",
          "scale": {
            "range": ["#4c78a8", "#e0e0e0"]
          },
          "legend": null
        }
      }
    },

    {
      "mark": {
        "type": "text",
        "fontSize": 30,
        "fontWeight": "bold"
      },

      "encoding": {
        "text": {
          "value": "75%"
        }
      }
    }
  ]
};

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

arc обычно работает быстро, поскольку:

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

Однако большое количество сегментов:

  • усложняет SVG;
  • увеличивает объём DOM;
  • снижает производительность интерактивности.

SVG path для дуги

В конечном итоге arc преобразуется в SVG path.

Команда дуги в SVG:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

Vega генерирует path автоматически.

Canvas renderer

Для крупных визуализаций Vega может использовать Canvas:

vegaEmbed("#view", spec, {
  renderer: "canvas"
});

Canvas быстрее при большом количестве элементов.

Сравнение Vega и Vega-Lite

Vega-Lite

Преимущества:

  • компактность;
  • автоматические вычисления;
  • быстрое создание pie chart;
  • декларативность.

Недостатки:

  • ограниченный контроль над геометрией;
  • сложнее создавать нестандартные radial chart.

Vega

Преимущества:

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

Недостатки:

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

Практические рекомендации

Когда использовать pie chart

Подходящие случаи:

  • отображение долей;
  • 3–6 категорий;
  • суммарное распределение;
  • приблизительное сравнение.

Когда использовать donut chart

Подходящие случаи:

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

Когда отказаться от arc

Лучше использовать bar chart, если:

  • категорий много;
  • важна точность;
  • значения близки;
  • требуется сортировка и сравнение.

Ключевые свойства arc

Свойство Назначение
theta размер сектора
radius внешний радиус
innerRadius внутренний радиус
outerRadius внешний радиус в Vega
startAngle стартовый угол
endAngle конечный угол
padAngle промежуток
cornerRadius скругление
color цвет категории
tooltip всплывающая подсказка
order порядок сегментов
Оглавление