Диаграмма связей (arc diagram)

Диаграмма связей представляет собой способ визуализации графов, в котором вершины располагаются вдоль одной оси (обычно линейной или круговой), а связи между ними отображаются дугами. Такой формат позволяет компактно представить структуру сетей, где важны не географические координаты, а отношения между сущностями: социальные графы, зависимости модулей, связи между объектами.

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

Базовая модель графа состоит из двух типов сущностей:

  • узлы (nodes)
  • рёбра (links)

Формат данных обычно задаётся в виде таблицы рёбер:

[
  { "source": "A", "target": "B", "value": 1 },
  { "source": "A", "target": "C", "value": 2 },
  { "source": "B", "target": "D", "value": 1 }
]

Из этой структуры далее вычисляется множество уникальных узлов и их порядок на оси.

Ключевой этап подготовки данных:

  • извлечение уникальных вершин
  • сортировка (алфавитная, по степени связности, по весу)
  • назначение координат вдоль оси X или Y

Базовая идея визуализации

Arc diagram опирается на три компонента:

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

Геометрия дуги определяется парой координат:

  • (x₁, y₁) — источник
  • (x₂, y₂) — цель

При этом y часто фиксируется, а дуга формируется через контрольную точку, создающую изгиб вверх или вниз.

Реализация в Vega

В Vega arc diagram строится через низкоуровневые примитивы: symbol для узлов и path для связей.

Основная идея — предварительно вычислить координаты узлов через window или formula.

Вычисление позиций узлов

{
  "name": "nodes",
  "source": "links",
  "transform": [
    { "type": "fold", "fields": ["source", "target"], "as": ["role", "node"] },
    { "type": "aggregate", "groupby": ["node"] },
    { "type": "window", "ops": ["row_number"], "as": ["index"] }
  ]
}

Далее индекс используется для координаты:

  • x = index * step

Построение рёбер

{
  "name": "edges",
  "source": "links",
  "transform": [
    {
      "type": "lookup",
      "from": "nodes",
      "key": "node",
      "fields": ["source"],
      "as": ["sourceNode"]
    },
    {
      "type": "lookup",
      "from": "nodes",
      "key": "node",
      "fields": ["target"],
      "as": ["targetNode"]
    },
    {
      "type": "linkpath",
      "shape": "arc",
      "sourceX": "sourceNode.x",
      "targetX": "targetNode.x",
      "sourceY": 200,
      "targetY": 200
    }
  ]
}

Отрисовка

{
  "type": "path",
  "from": { "data": "edges" },
  "encode": {
    "enter": {
      "path": { "field": "path" },
      "stroke": { "value": "#999" },
      "strokeWidth": { "value": 1 }
    }
  }
}

Узлы:

{
  "type": "symbol",
  "from": { "data": "nodes" },
  "encode": {
    "enter": {
      "x": { "field": "x" },
      "y": { "value": 200 },
      "size": { "value": 80 },
      "fill": { "value": "steelblue" }
    }
  }
}

Реализация в Vega-Lite

В Vega-Lite нет полноценного специализированного типа arc diagram, поэтому используется комбинация слоёв (layer) и преобразований данных.

Базовая идея слоя

  • слой 1: узлы
  • слой 2: связи (rule или path)
  • слой 3: подписи

Подготовка узлов

{
  "data": { "values": links },
  "transform": [
    { "fold": ["source", "target"], "as": ["role", "node"] },
    { "aggregate": [{ "op": "count", "as": "degree" }], "groupby": ["node"] },
    { "window": [{ "op": "row_number", "as": "index" }] }
  ]
}

Узлы

{
  "mark": "point",
  "encoding": {
    "x": { "field": "index", "type": "quantitative" },
    "y": { "value": 0 },
    "tooltip": [{ "field": "node" }]
  }
}

Связи через rule + transform

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

{
  "mark": "rule",
  "encoding": {
    "x": { "field": "sourceIndex" },
    "x2": { "field": "targetIndex" },
    "y": { "value": 0 },
    "strokeWidth": { "field": "value" }
  }
}

Такой подход создаёт линейные связи. Для дуг требуется использование Vega или кастомного path.

Сортировка узлов и её влияние

Порядок узлов критически влияет на читаемость диаграммы.

Используются стратегии:

Алфавитная сортировка

Проста, но часто даёт пересечения дуг.

По степени (degree sorting)

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

Кластеризация

Группы узлов размещаются блоками, уменьшая пересечения.

Оптимизация читаемости дуг

Основные техники:

1. Инверсия дуг

Все дуги направляются вверх:

  • y + offset для контрольной точки

2. Разделение по слоям

  • положительные связи выше оси
  • отрицательные ниже

3. Прозрачность

"strokeOpacity": 0.3

Масштабирование и большие графы

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

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

Используются методы:

Фильтрация рёбер

{ "filter": "datum.value > 2" }

Аггрегация

Объединение множества связей между двумя узлами в одну:

  • сумма весов
  • среднее значение

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

Arc diagram в Vega/Vega-Lite может включать:

Подсветку связей

"opacity": {
  "condition": {
    "selection": "hover",
    "value": 1
  },
  "value": 0.2
}

Выделение узла

  • hover → подсветка всех связанных рёбер
  • click → фиксация фокуса

Вариации arc diagram

Круговой arc diagram

Узлы располагаются по окружности:

  • используется polar coordinates
  • дуги становятся более симметричными

Двухосевой вариант

  • X — узлы
  • Y — группы или категории

Практические ограничения Vega-Lite

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

  • отсутствует нативный linkpath
  • ограниченная поддержка кривых
  • сложные графы требуют перехода к Vega

Поэтому архитектура часто выглядит так:

  • Vega-Lite: прототипирование
  • Vega: финальная визуализация arc diagram

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

Классическая дуга определяется как квадратичная кривая Безье:

  • стартовая точка
  • конечная точка
  • контрольная точка

Формально:

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

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

Arc diagram используется для:

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

Ошибки проектирования

Частые проблемы:

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

Корректная модель всегда требует:

  • структурирования порядка узлов
  • ограничения числа рёбер
  • регулировки прозрачности и толщины линий
Оглавление