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

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

От JSON к представлению

Работа визуализации проходит несколько этапов:

  1. Разбор спецификации. vega.parse проверяет и преобразует описание в структуру, которую понимает среда выполнения Vega.
  2. Подготовка данных. Vega загружает наборы данных и применяет указанные преобразования: фильтрацию, агрегацию, вычисление полей и другие операции.
  3. Вычисление визуальных свойств. Шкалы сопоставляют значения данных с координатами, цветами и размерами. Правила кодирования примитивов задают, как рисовать каждый элемент.
  4. Построение сцены. На основе данных и правил кодирования Vega формирует элементы диаграммы: прямоугольники, линии, текст, символы и группы.
  5. Отрисовка. Представление выводит сцену в SVG или Canvas и обновляет её, когда данные или сигналы изменяются.

В браузере представление можно создать так:

const runtime = vega.parse(spec);
const view = new vega.View(runtime, {renderer: 'svg'});
await view.initialize('#chart').hover().runAsync();

Здесь spec — объект спецификации, а #chart — элемент страницы, в котором появится диаграмма. Метод runAsync() выполняет вычисления и отрисовку. Подробнее о создании и управлении представлением рассказывает API представления.

Как происходит обновление

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

Когда значение меняется, Vega пересчитывает зависящие от него данные и визуальные свойства, после чего обновляет изображение. Это позволяет добавлять взаимодействие прямо в спецификацию. Посмотрите пример с интерактивной легендой и найдите в его JSON определения signals, data и marks.

Что изучать дальше

Если вы только начинаете работать с Vega, пройдите урок «Создадим столбчатую диаграмму». Затем откройте карту авиасообщения: в ней последовательно используются данные, преобразования, картографическая проекция и взаимодействие. Эти два урока показывают, как описанные выше этапы работают в полной спецификации.