Cross-filtering между несколькими видами

Cross-filtering представляет собой механизм взаимодействия между несколькими визуализациями, при котором выбор данных в одном представлении автоматически влияет на отображение данных в других. В контексте Vega и Vega-Lite этот подход является ключевым элементом построения интерактивных дашбордов, обеспечивая координированное исследование данных (coordinated multiple views, CMV). Основная идея заключается в том, что пользовательский жест — выделение, клик, диапазонный выбор — преобразуется в сигнал или фильтр, который переиспользуется другими графиками.

В Vega архитектура взаимодействия строится на основе signals и data transformations. Каждый интерактивный жест порождает сигнал, который может быть:

  • локальным (в пределах одного графика),
  • глобальным (разделяемым между несколькими визуализациями).

Cross-filtering возникает тогда, когда один сигнал используется как вход для фильтрации данных в нескольких независимых наборах данных или сценах.

Ключевые компоненты:

  • signals — реактивные переменные, отражающие пользовательский ввод;
  • scale domains — динамически изменяемые области отображения;
  • data transforms — фильтрация, агрегация и вычисления;
  • event streams — события мыши и клавиатуры.

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

Базовый механизм реализации в Vega

На уровне Vega cross-filtering обычно реализуется через следующий паттерн:

  1. Создаётся сигнал, фиксирующий выбранный диапазон или категорию.
  2. Сигнал обновляется через interaction (например, rect:brush, click).
  3. Несколько dataset используют этот сигнал в filter.

Пример логики:

  • пользователь выделяет диапазон на scatter plot;
  • сигнал brush хранит координаты;
  • другие графики используют filter: datum.x in brush.x && datum.y in brush.y.

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

Cross-filtering в Vega-Lite через selections

Vega-Lite предоставляет более высокоуровневую абстракцию — selections, которые автоматически компилируются в Vega-конструкции.

Основные типы selection:

  • interval — диапазонное выделение (brush);
  • single — выбор одного элемента;
  • multi — множественный выбор категорий.

Механизм cross-filtering реализуется через параметр bind и передачу selection между слоями или отдельными view.

Пример логики interval selection

В Vega-Lite:

  • создаётся selection brush;
  • он применяется к одному графику;
  • другие графики используют его как фильтр через transform filter.

Ключевая особенность: Vega-Lite автоматически синхронизирует signal-состояние между представлениями при компиляции в Vega.

Передача состояния между несколькими визуализациями

Cross-filtering становится полноценным только при наличии нескольких независимых view. В Vega это достигается двумя основными способами:

1. Общие сигналы (top-level signals)

Сигнал объявляется на уровне spec и используется во всех подграфиках:

  • один сигнал selectedCategory;
  • несколько datasets используют transform: filter на основе этого сигнала.

Это наиболее прямой способ, обеспечивающий строгую синхронизацию.

2. Event-driven propagation

События одного view изменяют сигнал, который затем обновляет другие view:

  • click в bar chart обновляет selectedBar;
  • scatter plot фильтруется по selectedBar;
  • line chart агрегирует только отфильтрованные данные.

Типовые сценарии cross-filtering

Связь bar chart → scatter plot

Один из наиболее распространённых паттернов.

  • Bar chart выбирает категорию;
  • Scatter plot отображает только точки выбранной категории.

Фильтрация:

  • datum.category === selectedCategory

Brush selection → histogram + table

Brush на scatter plot задаёт диапазон:

  • histogram пересчитывает распределение только внутри выбранной области;
  • таблица отображает записи, попадающие в диапазон.

Multi-view dashboard coordination

В сложных дашбордах несколько представлений могут быть связаны через единый слой состояния:

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

Все они реагируют на один набор сигналов:

  • timeRange;
  • selectedRegion;
  • selectedCategory.

Декларативная фильтрация данных

В Vega и Vega-Lite cross-filtering не требует мутаций исходных данных. Вместо этого применяется цепочка трансформаций:

  • исходный dataset остаётся неизменным;
  • создаётся derived dataset;
  • применяется filter на основе сигналов.

Пример логики:

  • data → transform(filter by signal) → encoding.

Это обеспечивает:

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

Производительность cross-filtering

При работе с большими наборами данных критичны следующие аспекты:

1. Локальная фильтрация vs глобальная агрегация

  • локальная фильтрация (datum-level) быстрее;
  • агрегации внутри filtered view требуют пересчёта.

2. Минимизация пересчёта сигналов

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

3. Использование pre-aggregated datasets

В Vega-Lite часто применяется стратегия:

  • подготовка агрегатов заранее;
  • фильтрация только по индексу или ключу.

Связанные сигналы и синхронизация состояний

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

  • brush selection;
  • hover highlight;
  • click selection.

Cross-filtering может комбинировать их:

  • hover подсвечивает элементы без фильтрации;
  • click фиксирует состояние фильтра;
  • brush задаёт диапазон.

Сигналы могут быть связаны логически:

  • selectedItem
  • highlightedItem
  • activeRange

Каждый из них влияет на разные слои визуализации.

Условная фильтрация и композиция логики

Vega поддерживает сложные выражения в фильтрах:

  • логические операторы;
  • арифметические сравнения;
  • условные конструкции.

Cross-filtering часто требует композиции:

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

Пример логики:

  • показывать datum, если он попадает в selectedCategory И внутри selectedRange.

Cross-filtering и layered views

В Vega-Lite layered charts позволяют строить несколько слоёв в одном view, однако cross-filtering между слоями имеет ограничения:

  • слой разделяет данные;
  • но selection может быть глобальным.

Для независимых cross-view взаимодействий чаще используется concat или facet.

Faceted views и автоматическая координация

Facet-композиция предоставляет естественную форму cross-filtering:

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

Однако важно учитывать:

  • facet создаёт локальные data scopes;
  • сигналы должны быть выведены на уровень выше для синхронизации.

Расширенные техники cross-filtering

1. Inverse filtering

Отображение не выбранных данных:

  • selected → highlight;
  • non-selected → fade.

Реализуется через условные encoding expressions.

2. Linked brushing

Несколько brush-инструментов:

  • горизонтальный диапазон (x-axis);
  • вертикальный диапазон (y-axis);
  • комбинированная область.

3. Drill-down фильтрация

Cross-filtering может использоваться как навигация:

  • уровень 1: категории;
  • уровень 2: подкатегории;
  • уровень 3: отдельные записи.

Каждый уровень уточняет фильтр.

Архитектурные паттерны

Shared state layer

Единый объект состояния:

  • хранит selection;
  • используется всеми view;
  • обновляется через сигналы.

Event bus approach

Сигналы выступают как события:

  • view A эмитит selection;
  • view B и C подписываются.

Declarative binding model

Самый характерный для Vega подход:

  • связывание через выражения;
  • отсутствие явных подписок;
  • реактивная компиляция зависимостей.

Ограничения и нюансы

Cross-filtering в Vega/Vega-Lite имеет ряд особенностей:

  • сложность отладки signal-графов;
  • потенциальная перегрузка при множестве взаимных зависимостей;
  • различия поведения между Vega и Vega-Lite при компиляции;
  • необходимость аккуратного управления scope сигналов.

Особенно важно учитывать:

  • избыточное использование глобальных сигналов приводит к трудно предсказуемым обновлениям;
  • локальные selections проще контролировать, но хуже масштабируются на несколько view.

Практическая модель взаимодействия

Типичный pipeline cross-filtering:

  1. пользователь взаимодействует с графиком;
  2. генерируется event;
  3. event обновляет signal;
  4. signal пересчитывает derived dataset;
  5. несколько view реагируют на обновлённые данные;
  6. происходит перерисовка только затронутых слоёв.

Эта цепочка является основой интерактивной аналитики в Vega-экосистеме.

Оглавление