В Vega-Lite интерактивность строится вокруг концепции selection — декларативного описания пользовательского выбора, который может влиять на визуализацию: фильтровать данные, изменять параметры графика, подсвечивать элементы и связывать несколько представлений. Внутри определения selection ключевую роль играют два механизма привязки к данным: encodings и fields. Эти два подхода определяют, каким образом пользовательское взаимодействие связано с данными в датасете.
Selection в Vega-Lite описывается в разделе selection (в
современных версиях — params с типом selection). Общая идея
заключается в том, что пользовательское действие (например, клик или
выделение области) преобразуется в набор условий, которые затем
применяются к данным.
Упрощённая структура:
{
"params": {
"brush": {
"select": "interval"
}
}
}Однако сам по себе selection ничего не делает без привязки к данным.
Именно здесь вступают в работу encodings и
fields.
Encodings связывают selection с визуальными каналами (encoding channels), такими как:
xycolorsizeopacityТо есть выбор интерпретируется через визуальные координаты или другие визуальные признаки.
Наиболее типичный пример использования encodings — interval selection, когда пользователь выделяет прямоугольную область.
{
"params": {
"brush": {
"select": {
"type": "interval",
"encodings": ["x", "y"]
}
}
}
}Здесь selection формируется на основе диапазонов по осям
x и y.
Encodings определяют:
Если указано только одно encoding, например:
"encodings": ["x"]то selection становится одномерным (горизонтальный brush).
В отличие от encodings, fields работают не с визуальными каналами, а напрямую с именами полей данных.
{
"params": {
"pick": {
"select": {
"type": "point",
"fields": ["category"]
}
}
}
}Здесь selection основан не на координатах, а на значениях конкретного столбца данных.
fields применяются в случаях:
Различие между подходами принципиальное:
Interval selection всегда опирается на геометрию. Пример:
{
"params": {
"brush": {
"select": {
"type": "interval",
"encodings": ["x"]
}
}
}
}x{ x: [min, max] }Point selection ориентирован на выбор конкретных значений.
{
"params": {
"highlight": {
"select": {
"type": "point",
"fields": ["country"]
}
}
}
}countryВ сложных визуализациях возможно одновременное использование разных selection:
{
"params": {
"brush": {
"select": {
"type": "interval",
"encodings": ["x", "y"]
}
},
"click": {
"select": {
"type": "point",
"fields": ["category"]
}
}
}
}Selection в Vega-Lite может использоваться в transform-блоке:
"transform": [
{
"filter": { "param": "brush" }
}
]Фильтр будет выглядеть как диапазон:
"x >= 10 && x <= 50"Фильтр будет категориальным:
"category == 'A'"fields могут содержать несколько колонок:
{
"fields": ["country", "year"]
}Encodings тесно связаны с:
fields же остаются на уровне данных и не зависят от визуального представления.
"select": {
"type": "interval",
"fields": ["x"]
}Такое определение некорректно: interval selection не работает через fields.
"select": {
"type": "point",
"encodings": ["color"]
}Это возможно, но приводит к неожиданному поведению, если color — не числовой канал.
Если одновременно заданы fields и encodings, Vega-Lite выбирает стратегию в зависимости от типа selection, что может приводить к неочевидным результатам.
Внутри Vega-Lite selection строится как промежуточный слой между:
Encodings выступают как мост между визуальным пространством и логикой выбора.
Fields выступают как прямой доступ к данным без визуальной интерпретации.
В низкоуровневой Vega:
Vega-Lite компилирует декларативные selection в эту низкоуровневую модель автоматически.
Выбор между encodings и fields определяет:
Encodings формируют визуально-интуитивные взаимодействия, где важна форма и расстояние.
Fields формируют семантические взаимодействия, где важны значения и идентичность объектов.