Overview + detail: связанные виды

Модель многоуровневой визуализации

Подход overview + detail в декларативных системах визуализации основан на разделении информации на два (или более) синхронизированных уровня:

  • Обзор (overview) — агрегированное представление данных, позволяющее увидеть структуру, распределения и аномалии.
  • Детализация (detail) — фокусное представление выбранного подмножества данных с повышенной плотностью информации.

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

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

Архитектурная основа связанных представлений

Декларативная модель данных

В Vega данные описываются как поток трансформаций:

  • загрузка (data)
  • преобразование (transform)
  • визуальное кодирование (marks)
  • реактивные зависимости (signals)

Связанные представления возникают, когда несколько визуализаций:

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

Сигнальная модель связи (Vega)

Ключевой механизм:

  • signals — реактивные переменные
  • изменения сигнала автоматически пересчитывают зависимости

Типичный паттерн:

  • сигнал выбора диапазона в overview
  • фильтрация detail через тот же сигнал

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

{
  "signals": [
    { "name": "brush", "value": null }
  ]
}

Далее этот сигнал используется в фильтрах:

{
  "type": "filter",
  "expr": "inrange(datum.x, brush)"
}

Overview + detail как паттерн проектирования

Основные варианты связки

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

  • overview отображает весь набор данных
  • пользователь выделяет область (brush)
  • detail отображает выбранный диапазон

Характерные признаки:

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

2. Click-to-filter (точечное связывание)

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

  • выбор категории
  • выбор точки
  • выбор группы

Detail обновляется через фильтрацию по значению:

  • datum.category == selectedCategory

3. Drill-down (иерархическая детализация)

Используется при многоуровневых данных:

  • уровень 1: агрегаты
  • уровень 2: группы
  • уровень 3: элементы

Переход между уровнями может быть:

  • кликом
  • переключением сигнала
  • изменением масштаба

Реализация в Vega: связка сцен

Общий принцип

В Vega multiple views строятся как:

  • независимые группы (group marks)
  • общие сигналы
  • общие или производные данные

Структура:

{
  "marks": [
    {
      "type": "group",
      "name": "overview",
      "marks": []
    },
    {
      "type": "group",
      "name": "detail",
      "marks": []
    }
  ]
}

Синхронизация через сигналы

Ключевой механизм:

  • сигнал определяется на верхнем уровне
  • используется в нескольких группах

Пример концепции:

  • brush.x задаёт диапазон
  • overview его изменяет
  • detail его читает

Vega-Lite: композиция связных представлений

Layered approach (слои)

В Vega-Lite слои позволяют накладывать:

  • основную визуализацию
  • интерактивные элементы
  • вспомогательные маркеры

Пример:

{
  "layer": [
    { "mark": "line" },
    { "mark": "rule" }
  ]
}

Concatenation (concat)

Позволяет размещать overview и detail рядом:

  • горизонтально (hconcat)
  • вертикально (vconcat)

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

  • слева overview
  • справа detail
{
  "hconcat": [
    { "mark": "area" },
    { "mark": "bar" }
  ]
}

Faceting как способ детализации

Facet создаёт множественные detail-панели:

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

Пример:

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

Selection как ядро связанного взаимодействия

Типы selection

interval selection

Используется для overview:

  • выделение диапазона по оси X
  • выделение области на плоскости
"selection": {
  "brush": { "type": "interval" }
}

point selection

Используется для дискретных связей:

  • выбор точки
  • выбор категории
"selection": {
  "sel": { "type": "point", "encodings": ["x"] }
}

Привязка detail к selection

Основной механизм фильтрации:

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

Фактически detail становится проекцией состояния selection.

Двунаправленная связь представлений

Обновление overview через detail

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

  • detail может изменять агрегаты overview
  • пересчёт статистик
  • динамическая агрегация

Пример сценария:

  • пользователь изменяет фильтр detail
  • overview обновляет распределение

Общие данные и производные наборы

Структурный подход:

  • base dataset
  • filtered dataset
  • aggregated dataset

Каждое представление использует свой уровень трансформации.

Сложные паттерны связности

Linked brushing между несколькими графиками

Несколько визуализаций:

  • scatterplot overview
  • histogram detail
  • time series detail

Все связаны одним selection.

Многомерное связывание

Selection может быть:

  • по X
  • по Y
  • по категории
  • по времени

Комбинация создаёт многомерный фильтр.

Синхронизация масштаба

Zoom selection:

  • overview управляет масштабом detail
  • detail может менять область видимости overview

Производительность и поток данных

Dataflow оптимизация Vega

В Vega оптимизация строится на:

  • инкрементальных обновлениях
  • кешировании вычислений
  • минимальном пересчёте marks

Связанные представления выигрывают от:

  • общих трансформаций
  • повторного использования derived data

Разделение вычислений

Типичная стратегия:

  • heavy aggregation → overview
  • filtered subset → detail

Это снижает стоимость пересчёта при интерактивности.

Интерпретация через реактивную модель

Сигналы как источник истины

Вся система сводится к:

  • сигналам состояния
  • зависимостям между сценами
  • декларативным описаниям поведения

Изменение одного сигнала приводит к каскадному обновлению:

  • selection → filter → marks → rendering

Связанные представления как граф зависимостей

Можно интерпретировать систему как DAG:

  • узлы: data, transforms, marks
  • рёбра: зависимости сигналов
  • пересчёт: реактивный propagation

Сравнение подходов Vega и Vega-Lite

Уровень абстракции

  • Vega: низкоуровневый граф вычислений
  • Vega-Lite: декларативные шаблоны визуализаций

Реализация linked views

  • Vega: через signals и explicit dataflow
  • Vega-Lite: через selection + composition operators

Гибкость

  • Vega: максимальная гибкость
  • Vega-Lite: ограниченная, но более структурированная композиция

Типовые архитектуры overview + detail

1. Двухпанельная модель

  • слева overview
  • справа detail
  • синхронизация через brush

2. Три уровня детализации

  • global overview
  • mid-level grouping
  • local detail

3. Панель фильтров + визуализация

  • фильтр выступает как overview состояния
  • график — как detail представление

Расширенные техники взаимодействия

Cross-filtering

  • выбор в одном графике фильтрует другие
  • используется shared selection state

Coordinated multiple views (CMV)

Несколько визуализаций:

  • каждая отвечает за свой аспект данных
  • все синхронизированы через общие сигналы

Semantic linking

Связывание не только по данным, но и по смыслу:

  • одинаковые категории
  • временные интервалы
  • метки событий
Оглавление