Тип image

Общее назначение изображения как графического примитива

Тип mark image в Vega и Vega-Lite предназначен для отображения растровых изображений как визуальных элементов в координатной системе визуализации. В отличие от геометрических примитивов (кругов, линий, прямоугольников), изображение рассматривается как текстурированный маркер, привязанный к данным и позиционируемый через стандартные каналы координат.

Изображения интегрируются в визуализацию как полноценные элементы сцены, поддерживающие масштабирование, трансформации и привязку к данным, что позволяет использовать их в качестве:

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

Спецификация mark image в Vega

В Vega тип image задаётся через объект mark с обязательным указанием типа:

{
  "type": "image",
  "from": { "data": "table" },
  "encode": {
    "enter": {
      "x": { "scale": "xscale", "field": "x" },
      "y": { "scale": "yscale", "field": "y" },
      "url": { "field": "url" },
      "width": { "value": 40 },
      "height": { "value": 40 }
    }
  }
}

Ключевой особенностью является обязательное использование канала url, который указывает путь к изображению. Vega не интерпретирует изображения как бинарные данные — они всегда загружаются по URL.

Каналы изображения в Vega

Mark image поддерживает стандартные визуальные каналы:

  • x, y — позиционирование на плоскости
  • url — источник изображения
  • width, height — размеры отображения
  • align — горизонтальное выравнивание (left, center, right)
  • baseline — вертикальное выравнивание (top, middle, bottom)
  • opacity — прозрачность
  • aspect — сохранение пропорций изображения

Особое значение имеет aspect, контролирующий искажение изображения при масштабировании. При значении true сохраняются пропорции исходного файла, при false изображение растягивается под заданные размеры.

Image mark в Vega-Lite

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

Базовая форма:

{
  "data": {
    "values": [
      { "x": 10, "y": 20, "img": "a.png" },
      { "x": 30, "y": 40, "img": "b.png" }
    ]
  },
  "mark": "image",
  "encoding": {
    "x": { "field": "x", "type": "quantitative" },
    "y": { "field": "y", "type": "quantitative" },
    "url": { "field": "img" }
  }
}

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

Масштабирование и позиционирование изображений

Изображения в визуализациях подчиняются правилам координатных систем и масштабов. При использовании количественных шкал (quantitative scales) координаты x и y преобразуются через scale-функции, после чего изображение размещается в вычисленной точке.

Размер изображения задаётся двумя основными стратегиями:

  • фиксированные размеры (width, height)
  • вычисляемые размеры через encoding (size, scale)

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

Работа с пропорциями

Ключевой аспект работы с image mark — управление соотношением сторон. Поведение определяется параметром aspect:

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

В Vega это выражается явно, в Vega-Lite — чаще через дополнительные параметры конфигурации:

"config": {
  "mark": {
    "aspect": true
  }
}

Использование изображений как маркеров данных

Типичный сценарий — замена точек scatter plot изображениями:

{
  "mark": "image",
  "encoding": {
    "x": { "field": "time", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative" },
    "url": { "field": "icon" }
  }
}

В таком представлении каждая точка данных заменяется визуальным символом, что усиливает семантическую интерпретацию графика.

Интеграция с трансформациями данных

Image mark тесно взаимодействует с transform-пайплайном Vega:

  • filter позволяет отбирать изображения по условиям
  • calculate формирует динамические URL
  • lookup связывает таблицы изображений с основными данными
  • join aggregate используется для группировки изображений по категориям

Пример вычисляемого URL:

{
  "transform": [
    {
      "calculate": "'/icons/' + datum.type + '.png'",
      "as": "icon_url"
    }
  ]
}

Работа с сетками и плотными раскладками

Image mark часто используется в grid-визуализациях, где изображения размещаются в регулярной структуре. В таких случаях координаты задаются через индексные вычисления:

  • x = index % columns
  • y = floor(index / columns)

Такая схема применяется для построения галерей, каталогов и матричных представлений данных.

Производительность при большом количестве изображений

Отображение большого количества image-mark элементов имеет особенности:

  • загрузка ресурсов зависит от кеширования браузера
  • каждая ссылка инициирует отдельный HTTP-запрос при отсутствии кеша
  • рендеринг ограничивается производительностью canvas или SVG-движка

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

  • предварительной оптимизации изображений
  • снижению разрешения
  • переходу на sprite sheets

Взаимодействие с событиями

Image mark поддерживает стандартные события Vega:

  • hover
  • click
  • select

События позволяют связывать изображения с интерактивными фильтрами и динамическими обновлениями данных. Изображения становятся не только визуальными элементами, но и интерактивными узлами визуализации.

Масштабирование в различных системах координат

При использовании различных coordinate systems (например, polar или geo) поведение image mark изменяется:

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

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

Использование в faceting и small multiples

Image mark эффективно применяется в фасетированных визуализациях:

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

Такая структура используется для визуальных сравнений категорий через набор изображений, распределённых по сетке подграфиков.

Оглавление