Архитектура стека: Vega-Lite → Vega → SVG/Canvas

Стек Vega-Lite → Vega → SVG/Canvas представляет собой слоистую систему, в которой каждый уровень отвечает за строго определённый этап преобразования декларативного описания данных в интерактивную графику.

Ключевая идея архитектуры — разделение ответственности:

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

Такой подход обеспечивает переносимость, расширяемость и оптимизацию исполнения без изменения пользовательской спецификации.

Vega-Lite как уровень декларативного описания

Vega-Lite задаёт визуализацию в терминах визуальных намерений, а не алгоритмов отрисовки. Спецификация описывает:

  • источник данных;
  • тип визуализации (bar, line, point и др.);
  • кодирование каналов (x, y, color, size);
  • агрегации и трансформации;
  • базовую интерактивность.

Принципиальная особенность уровня — отсутствие описания того, как именно строится графическая сцена. Вместо этого используется декларативная модель:

{
  "data": {"url": "data.csv"},
  "mark": "bar",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

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

Компиляция Vega-Lite → Vega

Следующий этап — трансляция спецификации Vega-Lite в промежуточный формат Vega.

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

Основные преобразования компилятора:

1. Разворачивание абстракций

Vega-Lite использует сокращённые конструкции:

  • mark: "bar"
  • encoding.x
  • aggregate

Компилятор преобразует их в:

  • explicit marks;
  • dataflow transforms;
  • scale/axis definitions.

2. Явное построение scales и axes

Если в Vega-Lite шкалы подразумеваются, то в Vega они становятся явными объектами:

  • scale linear
  • scale band
  • axis components

3. Генерация dataflow graph

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

  • filter
  • aggregate
  • bin
  • calculate

4. Разворачивание интерактивности

События (hover, click, drag) преобразуются в:

  • signals
  • event streams
  • reactive bindings

Vega как система исполнения визуального dataflow

Vega представляет собой реактивный движок визуализации, основанный на dataflow-архитектуре.

Основные сущности:

Dataflow graph

Визуализация представляется как граф, где:

  • узлы — операции над данными;
  • рёбра — зависимости вычислений.

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

Signals

Signals — это реактивные переменные, управляющие состоянием визуализации:

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

Signals связываются с графом и могут:

  • изменять данные;
  • изменять свойства визуальных элементов;
  • запускать пересчёт трансформаций.

Transforms

Transforms формируют вычислительное ядро:

  • aggregation transforms;
  • window functions;
  • filter pipelines;
  • formula computation.

Каждый transform — это узел чистой функции в графе вычислений.

Scenegraph

Результатом вычисления dataflow является scenegraph — дерево визуальных примитивов:

  • группы (groups);
  • формы (rect, circle, path);
  • текстовые элементы;
  • интерактивные области.

Scenegraph является промежуточным представлением между логикой и рендерингом.

Переход к графическому backend: SVG и Canvas

Финальный этап архитектуры — отрисовка scenegraph на графическом API браузера.

Vega поддерживает два основных backend’а:

  • SVG (Scalable Vector Graphics);
  • Canvas (2D rendering context).

SVG-рендеринг

SVG представляет сцену как DOM-дерево:

Особенности:

  • каждый графический элемент — DOM-нода;
  • поддержка CSS-стилей;
  • высокая точность масштабирования;
  • встроенная доступность (accessibility).

Преобразование scenegraph:

  • rect → <rect>
  • circle → <circle>
  • text → <text>
  • path → <path>

Ограничения:

  • высокая стоимость при большом количестве элементов;
  • DOM-операции становятся узким местом;
  • сложная анимация при больших наборах данных.

Canvas-рендеринг

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

Особенности:

  • один bitmap-слой;
  • отрисовка через API context2d;
  • отсутствие DOM-узлов для каждого элемента;
  • высокая производительность при больших объёмах данных.

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

Scenegraph проходит traversal-алгоритм, и каждый узел преобразуется в последовательность команд:

  • beginPath
  • moveTo
  • lineTo
  • fill
  • stroke
  • fillText

Ограничения:

  • отсутствие нативного hit-testing;
  • сложность интеграции с CSS;
  • более сложная доступность.

Связь уровней: полный pipeline

Архитектура формирует строго направленный поток данных:

Vega-Lite
   ↓ компиляция
Vega (dataflow graph)
   ↓ execution
Scenegraph
   ↓ rendering backend
SVG / Canvas
   ↓ GPU/Browser rendering
Pixels on screen

Каждый уровень выполняет строго ограниченную функцию:

  • Vega-Lite: описание;
  • Vega: вычисление;
  • Scenegraph: представление;
  • SVG/Canvas: визуализация.

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

Одной из ключевых особенностей архитектуры является инкрементальное обновление состояния.

При изменении:

  • данных;
  • сигналов;
  • пользовательских событий;

не пересчитывается вся визуализация. Вместо этого:

  1. определяется затронутая часть dataflow graph;
  2. пересчитываются только зависимые узлы;
  3. обновляется scenegraph;
  4. патчится SVG или перерисовывается Canvas.

Это позволяет поддерживать интерактивность даже при сложных визуализациях.

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

Dataflow архитектура Vega предполагает:

  • ленивое вычисление узлов;
  • кэширование промежуточных результатов;
  • минимизацию пересчётов.

Особенно важно при:

  • больших временных рядах;
  • многомерных агрегациях;
  • интерактивных фильтрах.

Абстракции уровня сцены

Scenegraph вводит важную концепцию:

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

Это позволяет:

  • унифицировать SVG и Canvas backend;
  • отделить вычисления от рендеринга;
  • обеспечить переносимость визуализаций.

Роль компилятора Vega-Lite

Компилятор выполняет не только синтаксическое преобразование, но и:

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

Фактически он превращает высокоуровневую спецификацию в исполнимую программу визуализации.

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

Архитектура стека можно формализовать как систему уровней абстракции:

  • декларативная визуальная грамматика (Vega-Lite);
  • вычислительный dataflow runtime (Vega);
  • граф сцены (scenegraph);
  • графический backend (SVG/Canvas).

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

  • от типа данных;
  • от способа рендеринга;
  • от интерактивных сценариев;
  • от конкретного графического API браузера.
Оглавление