Типы: point selection и interval selection

Механизм selection в Vega-Lite представляет собой декларативный способ описания интерактивности визуализаций через выбор подмножеств данных. Вместо императивного управления событиями и DOM-логикой задаётся декларация: какие данные считаются выбранными, как формируется выбор и как он влияет на отображение.

Вся система selection строится вокруг двух базовых типов: point selection и interval selection. Эти два подхода покрывают большинство сценариев интерактивного анализа данных — от выделения отдельных наблюдений до работы с диапазонами значений.

Общая модель selection

В Vega-Lite selection определяется как именованный объект внутри секции selection, который:

  • отслеживает пользовательские события (click, drag, hover)
  • формирует состояние выбранных данных
  • используется как фильтр или модификатор визуальных каналов (opacity, color, size и др.)

Пример общей структуры:

{
  "selection": {
    "sel": {
      "type": "point",
      "fields": ["category"],
      "toggle": "event.shiftKey"
    }
  }
}

Сформированное состояние selection затем может использоваться в encoding через условные выражения (condition).

Point selection: дискретный выбор элементов

Point selection предназначен для выбора отдельных точек данных (или групп точек), соответствующих конкретным значениям.

Базовая семантика

Point selection оперирует дискретными объектами:

  • одна точка = одно наблюдение
  • или группа точек, объединённых по полю (fields)
  • выбор происходит по клику или наведению

Простейший пример

{
  "selection": {
    "picked": {
      "type": "point",
      "on": "click"
    }
  }
}

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

Point selection часто применяется для:

  • подсветки выбранной категории
  • фильтрации других графиков
  • выделения отдельных элементов scatter plot

Пример условного окрашивания:

{
  "mark": "circle",
  "selection": {
    "sel": { "type": "point" }
  },
  "encoding": {
    "color": {
      "condition": {
        "selection": "sel",
        "value": "red"
      },
      "value": "gray"
    }
  }
}

Свойства point selection

fields

Ограничивает выбор конкретными полями данных.

"fields": ["country"]

Если не указано — selection работает по всему объекту данных.

toggle

Управляет поведением множественного выбора.

  • true — добавление/удаление элементов (multi-select)
  • false — замена выбора
  • "event.shiftKey" — условное поведение через клавиши

nearest

Позволяет выбирать ближайшую точку к курсору.

Особенно полезно в плотных scatter plot.

"nearest": true

clear

Определяет событие сброса selection.

"clear": "dblclick"

Interval selection: выбор диапазонов

Interval selection используется для выделения диапазона значений по одной или нескольким осям.

Физически реализуется через brush-интерфейс: пользователь тянет прямоугольник, формируя область выбора.

Базовая структура

{
  "selection": {
    "brush": {
      "type": "interval"
    }
  }
}

Механика interval selection

Interval selection создаёт двумерный или одномерный диапазон:

  • X-диапазон (например, время)
  • Y-диапазон (например, значение)
  • либо оба одновременно (rectangular brush)

Выбранные данные интерпретируются как:

все точки, попадающие в заданный диапазон координат

Пример использования brush

{
  "selection": {
    "brush": {
      "type": "interval"
    }
  },
  "mark": "point",
  "encoding": {
    "x": { "field": "time", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative" }
  }
}

Свойства interval selection

encodings

Ограничивает оси, по которым можно выделять диапазон.

"encodings": ["x"]

Это превращает brush в горизонтальный слайдер.

mark

Позволяет стилизовать область выделения:

"mark": {
  "fill": "#blue",
  "fillOpacity": 0.2,
  "stroke": "black"
}

translate

Позволяет перемещать уже выделенный интервал.

"translate": true

zoom

Связывает selection с масштабированием (zooming):

"zoom": true

Это превращает brush в инструмент навигации по данным.

Сравнение point и interval selection

Granularity

  • Point selection: дискретная точка или набор точек
  • Interval selection: непрерывный диапазон

UI-парадигма

  • Point: click / hover
  • Interval: drag / brush

Применение

Point selection лучше подходит для:

  • категориальных данных
  • одиночных объектов
  • фильтрации по ID

Interval selection лучше подходит для:

  • временных рядов
  • числовых диапазонов
  • анализа распределений

Комбинирование selection типов

В сложных визуализациях point и interval selection часто используются одновременно.

Пример:

  • interval selection — фильтр диапазона времени
  • point selection — выбор конкретной точки внутри диапазона
"selection": {
  "brush": { "type": "interval" },
  "highlight": { "type": "point" }
}

Использование selection как фильтра

Selection может применяться как динамический фильтр данных через transform.

"transform": [
  {
    "filter": { "selection": "brush" }
  }
]

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

  • уменьшать объём отображаемых данных
  • строить связные графики (linked views)
  • реализовывать интерактивную агрегацию

Взаимодействие с encoding

Selection тесно интегрируется с каналами визуализации:

  • opacity
  • color
  • size
  • strokeWidth

Пример затемнения невыбранных элементов:

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

Множественные selection

Система позволяет объявлять несколько независимых selection:

  • один для фильтрации
  • другой для подсветки
  • третий для навигации
"selection": {
  "brush": { "type": "interval" },
  "focus": { "type": "point" }
}

Каждый selection имеет собственное состояние и может использоваться независимо.

Поведение при сложных событиях

Point selection и interval selection поддерживают разные модели событий:

  • click → выбор точки
  • shift+click → расширение набора
  • drag → создание интервала
  • dblclick → сброс

Эти события декларативно задаются через on.

Производительность и ограничения

Point selection:

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

Interval selection:

  • зависит от плотности данных
  • требует пересчёта попадания точек в диапазон
  • может быть чувствителен к количеству визуальных элементов

Интерпретация selection в runtime

Внутри Vega-Lite selection компилируется в:

  • сигналы (signals) в Vega
  • выражения фильтрации
  • реактивные зависимости между view и dataflow

Это означает, что selection не является «надстройкой», а частью реактивного графа исполнения.

Оглавление