Поле resolve в многовидовых выделениях

В многовидовых визуализациях Vega-Lite выделения (selection) могут использоваться одновременно в нескольких графиках. По умолчанию механизм выделения пытается синхронизировать состояние между всеми представлениями (views), однако при сложной композиции — layer, concat, repeat, facet — возникает необходимость явно управлять тем, как именно выделение объединяется между графиками.

Поле resolve определяет стратегию согласования (resolution strategy) выделений в многовидовых представлениях.

Наиболее часто resolve применяется:

  • в repeat;
  • в facet;
  • в concat и vconcat;
  • при работе с независимыми масштабами;
  • при интерактивной фильтрации между несколькими графиками.

Общая структура

Поле задаётся внутри определения выделения:

selection: {
  brush: {
    type: "interval",
    resolve: "global"
  }
}

Либо в новой системе параметров:

params: [
  {
    name: "brush",
    select: {
      type: "interval",
      resolve: "global"
    }
  }
]

Поддерживаемые значения resolve

Для многовидовых выделений доступны три стратегии:

Значение Назначение
global Одно общее выделение для всех представлений
union Объединение выделений из всех представлений
intersect Пересечение выделений между представлениями

Режим global

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

global создаёт единое состояние выделения для всех графиков.

Когда пользователь создаёт новое выделение в одном представлении:

  • старое выделение удаляется;
  • остальные представления получают то же состояние;
  • одновременно существует только одно активное выделение.

Пример с repeat

{
  data: {
    url: "data/cars.json"
  },

  repeat: ["Horsepower", "Acceleration", "Miles_per_Gallon"],

  spec: {
    width: 200,
    height: 200,

    mark: "point",

    params: [
      {
        name: "brush",

        select: {
          type: "interval",
          resolve: "global"
        }
      }
    ],

    encoding: {
      x: {
        field: { repeat: "repeat" },
        type: "quantitative"
      },

      y: {
        field: "Weight_in_lbs",
        type: "quantitative"
      },

      color: {
        condition: {
          param: "brush",
          value: "steelblue"
        },
        value: "lightgray"
      }
    }
  }
}

Поведение

Если выделение создаётся:

  • в первом графике — оно становится активным;
  • во втором — первое автоматически исчезает;
  • в третьем — второе заменяется новым.

Когда использовать

global подходит для:

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

Особенности

Централизованное состояние

Все представления используют один объект выделения.

Это означает:

View A -> Selection State
View B -> Selection State
View C -> Selection State

Состояние физически одно.

Минимальные накладные расходы

Так как хранится только одно состояние выделения:

  • уменьшается объём внутренних сигналов Vega;
  • упрощается синхронизация;
  • повышается производительность.

Конфликты взаимодействий

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

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

Режим union

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

union объединяет выделения из всех представлений.

Каждый график хранит собственное локальное выделение, а итоговый результат вычисляется как логическое ИЛИ (OR).

Схема работы

Selection A
OR
Selection B
OR
Selection C

Пример

{
  data: {
    url: "data/cars.json"
  },

  repeat: {
    column: ["Horsepower", "Acceleration", "Miles_per_Gallon"]
  },

  spec: {
    width: 180,
    height: 180,

    mark: "point",

    params: [
      {
        name: "brush",

        select: {
          type: "interval",
          resolve: "union"
        }
      }
    ],

    encoding: {
      x: {
        field: { repeat: "column" },
        type: "quantitative"
      },

      y: {
        field: "Weight_in_lbs",
        type: "quantitative"
      },

      color: {
        condition: {
          param: "brush",
          value: "firebrick"
        },

        value: "#ddd"
      }
    }
  }
}

Поведение

Пользователь может:

  • создать выделение в первом графике;
  • затем во втором;
  • затем в третьем.

Все выделения сохраняются одновременно.

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

Логика вычисления

Пусть имеются три диапазона:

A = Horsepower ∈ [100, 150]
B = Acceleration ∈ [10, 15]
C = MPG ∈ [20, 30]

При union запись будет выбрана, если выполняется хотя бы одно условие:

A OR B OR C

Практическое применение

Исследовательская аналитика

Позволяет накапливать несколько независимых выделений.

Сравнение групп

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

Интерактивные панели

Подходит для интерфейсов, где пользователь постепенно расширяет область анализа.

Внутренняя реализация

Vega-Lite создаёт:

  • отдельные сигналы выделения для каждого view;
  • объединяющий predicate;
  • итоговую композицию условий.

Условно:

brush_0 OR brush_1 OR brush_2

Недостатки

Рост сложности

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

  • увеличивается число predicate;
  • усложняется вычисление;
  • возрастает количество сигналов Vega.

Неочевидное состояние

Пользователь может забыть о ранее созданных выделениях.

Иногда интерфейс визуально не показывает:

  • сколько выделений существует;
  • где именно они расположены;
  • какие фильтры активны.

Режим intersect

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

intersect выбирает только те записи, которые удовлетворяют всем выделениям одновременно.

Используется логическое И (AND).

Схема

Selection A
AND
Selection B
AND
Selection C

Пример

{
  data: {
    url: "data/cars.json"
  },

  repeat: {
    column: [
      "Horsepower",
      "Acceleration",
      "Miles_per_Gallon"
    ]
  },

  spec: {
    width: 180,
    height: 180,

    mark: "point",

    params: [
      {
        name: "brush",

        select: {
          type: "interval",
          resolve: "intersect"
        }
      }
    ],

    encoding: {
      x: {
        field: {
          repeat: "column"
        },

        type: "quantitative"
      },

      y: {
        field: "Weight_in_lbs",
        type: "quantitative"
      },

      color: {
        condition: {
          param: "brush",
          value: "green"
        },

        value: "#ddd"
      }
    }
  }
}

Поведение

Точка выделяется только если:

  • попадает в выделение первого графика;
  • и одновременно второго;
  • и одновременно третьего.

Логика

A AND B AND C

Пример фильтрации

Допустим:

Horsepower ∈ [120, 180]
Acceleration ∈ [12, 14]
MPG ∈ [25, 35]

Тогда запись должна удовлетворять всем трём условиям одновременно.

Сценарии использования

Многомерный анализ

Особенно полезен при exploratory data analysis.

Последовательное уточнение

Пользователь постепенно сужает выборку:

Шаг 1 -> широкий диапазон
Шаг 2 -> уточнение
Шаг 3 -> финальная фильтрация

Работа с большими датасетами

intersect позволяет быстро уменьшать объём отображаемых данных.

Проблемы UX

Быстрое исчезновение данных

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

Неочевидность логики

Не все пользователи ожидают поведение AND.

Часто требуется:

  • визуальное пояснение;
  • отображение активных фильтров;
  • indicator состояния selection.

Сравнение режимов

Режим Логика Количество выделений Тип поведения
global одно общее 1 замещение
union OR много накопление
intersect AND много пересечение

Влияние на predicate

Поле resolve напрямую влияет на predicate, который Vega-Lite генерирует внутри фильтров.

global

predicate(brush)

union

predicate(brush_0)
OR
predicate(brush_1)
OR
predicate(brush_2)

intersect

predicate(brush_0)
AND
predicate(brush_1)
AND
predicate(brush_2)

Использование с transform.filter

Пример

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

Поведение фильтра полностью зависит от resolve.

Эффект при union

Фильтр пропускает записи, попадающие хотя бы в одно выделение.

Эффект при intersect

Фильтр пропускает только записи, удовлетворяющие всем selection одновременно.

Работа с facet

Особенности facet-представлений

При использовании facet каждый facet становится отдельным view.

Следовательно:

  • создаются отдельные selection state;
  • resolve начинает играть ключевую роль.

Пример

{
  facet: {
    field: "Origin",
    type: "nominal"
  },

  spec: {
    params: [
      {
        name: "brush",

        sel ect: {
          type: "interval",
          resolve: "union"
        }
      }
    ],

    mark: "point",

    encoding: {
      x: {
        field: "Horsepower",
        type: "quantitative"
      },

      y: {
        field: "Miles_per_Gallon",
        type: "quantitative"
      },

      color: {
        condition: {
          param: "brush",
          value: "orange"
        },

        value: "lightgray"
      }
    }
  }
}

Работа с repeat

repeat — наиболее распространённый сценарий использования resolve.

Причина:

  • каждый повторяемый график создаёт собственное представление;
  • selection автоматически становится multi-view.

Типичная схема SPLOM

Scatter Plot Matrix:

HP vs MPG
HP vs Weight
MPG vs Weight
Acceleration vs MPG
...

Здесь resolve определяет:

  • как selection распространяется;
  • как объединяются brush-состояния;
  • как работает cross-filtering.

Совместимость с типами selection

Interval selection

Поддерживается полностью.

Наиболее частый сценарий.

Point selection

Также поддерживает resolve.

Пример:

params: [
  {
    name: "pts",

    select: {
      type: "point",
      resolve: "union"
    }
  }
]

Multi selection

В старом API (selection) параметр также поддерживался:

selection: {
  pts: {
    type: "multi",
    resolve: "intersect"
  }
}

Влияние на производительность

global

Наиболее дешёвый режим.

Причины:

  • одно состояние;
  • минимальное число сигналов;
  • простой predicate.

union

Средняя нагрузка.

Рост сложности линейно зависит от количества views.

intersect

Обычно самый тяжёлый режим.

Особенно при:

  • больших datasets;
  • множестве facets;
  • сложных фильтрах;
  • nested compositions.

Внутренние сигналы Vega

При компиляции Vega-Lite создаёт:

brush_store
brush_tuple
brush_modify

Для multi-view layouts появляются дополнительные структуры:

brush_0
brush_1
brush_2

А resolve определяет механизм их композиции.

Поведение при очистке selection

global

Очистка удаляет единственное состояние.

union

Удаляется только локальное выделение текущего view.

Остальные продолжают действовать.

intersect

Удаление одного selection может резко расширить итоговую выборку, поскольку исчезает одно из условий AND.

Комбинация с независимыми scale

Пример

resolve: {
  scale: {
    x: "independent",
    y: "independent"
  }
}

Не следует путать:

  • resolve для scale;
  • resolve для selection.

Это разные механизмы.

Важный нюанс

При независимых шкалах interval selection может выглядеть одинаково визуально, но соответствовать разным диапазонам данных.

Типичные ошибки

Путаница между resolve.scale и selection.resolve

Частая ошибка:

resolve: "union"

на верхнем уровне spec.

Правильно:

select: {
  type: "interval",
  resolve: "union"
}

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

global плохо подходит для:

  • сравнения нескольких диапазонов;
  • накопления фильтров;
  • exploratory workflows.

Слишком агрессивный intersect

Может приводить к:

  • пустым результатам;
  • исчезновению данных;
  • сложному UX.

Практические рекомендации

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

Подходит для:

  • dashboards;
  • linked highlighting;
  • master-detail;
  • простых интерфейсов.

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

Подходит для:

  • exploratory analysis;
  • сравнения;
  • накопления selection;
  • группировки диапазонов.

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

Подходит для:

  • сложной фильтрации;
  • narrowing workflows;
  • multidimensional analysis;
  • поиска пересечений.

Архитектурные особенности Vega-Lite

Поле resolve существует потому, что Vega-Lite использует декларативную модель.

Каждое view:

  • автономно;
  • имеет собственные сигналы;
  • создаёт локальное состояние interaction.

resolve выступает механизмом композиции этих состояний.

Разница между Vega и Vega-Lite

В Vega:

  • логика объединения реализуется вручную;
  • требуется самостоятельное управление сигналами;
  • interaction pipeline задаётся явно.

В Vega-Lite:

  • resolve скрывает сложность;
  • автоматически создаются predicate;
  • interaction-композиция формируется декларативно.

Отладка

Vega Editor

Для анализа selection-state удобно использовать:

Vega Editor

Что проверять

Signals

brush
brush_tuple
brush_store

Data sources

brush_store

Generated predicates

Проверка скомпилированного Vega-кода помогает понять:

  • как объединяются selection;
  • какие условия создаются;
  • как работает resolve.
Оглавление