Доступ к параметрам: param()

Параметры как основа интерактивности спецификаций

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

Каждый параметр определяется на уровне спецификации и становится доступным внутри выражений через функцию param().

Структурно параметр включает:

  • имя (name)
  • начальное значение (value)
  • привязку к UI (bind)
  • тип взаимодействия (select, toggle, interval и др.)
  • дополнительные свойства поведения

Определение параметров в Vega-Lite

Параметры задаются в массиве params внутри спецификации:

{
  data: { url: "data.csv" },
  params: [
    {
      name: "threshold",
      value: 50,
      bind: { input: "range", min: 0, max: 100, step: 1 }
    }
  ],
  mark: "bar",
  encoding: {
    x: { field: "category", type: "nominal" },
    y: { field: "value", type: "quantitative" }
  }
}

В этом примере параметр threshold связан с ползунком. Его значение изменяется в реальном времени и может использоваться в выражениях.

Функция param() в выражениях

Функция param() используется внутри выражений Vega-Lite для получения текущего значения параметра.

Синтаксис:

param("имя_параметра")

Она применяется в:

  • transform → calculate
  • encoding → condition
  • filter → expression
  • scale → domain expressions (в ограниченных сценариях)
  • opacity, color, size через conditional expressions

Использование param() для фильтрации данных

Один из базовых сценариев — динамическая фильтрация:

{
  data: { url: "data.json" },
  params: [
    {
      name: "minValue",
      value: 10,
      bind: { input: "range", min: 0, max: 100 }
    }
  ],
  transform: [
    {
      filter: "datum.value >= param('minValue')"
    }
  ],
  mark: "point",
  encoding: {
    x: { field: "x", type: "quantitative" },
    y: { field: "value", type: "quantitative" }
  }
}

Здесь param('minValue') определяет порог, ниже которого данные исключаются из визуализации.

Условное форматирование через param()

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

{
  params: [
    {
      name: "highlight",
      value: "A",
      bind: {
        input: "select",
        options: ["A", "B", "C"]
      }
    }
  ],
  mark: "bar",
  encoding: {
    x: { field: "category", type: "nominal" },
    y: { field: "value", type: "quantitative" },
    color: {
      condition: {
        test: "datum.category === param('highlight')",
        value: "orange"
      },
      value: "lightgray"
    }
  }
}

Механизм param() позволяет создавать реактивные условия без изменения структуры данных.

Параметры и вычисляемые поля

В Vega-Lite параметры часто комбинируются с transform → calculate:

{
  params: [
    {
      name: "scaleFactor",
      value: 1.5
    }
  ],
  transform: [
    {
      calculate: "datum.value * param('scaleFactor')",
      as: "scaledValue"
    }
  ],
  mark: "line",
  encoding: {
    y: { field: "scaledValue", type: "quantitative" }
  }
}

Здесь параметр выступает как внешний множитель, влияющий на вычисляемое поле.

Двусторонние связи через bind

Привязка параметра к интерфейсу управления позволяет создавать интерактивные панели управления без внешнего JavaScript-кода.

Поддерживаемые типы:

  • range — ползунок
  • select — выпадающий список
  • checkbox — переключатель
  • radio — набор кнопок
  • text — текстовый ввод

Пример:

{
  params: [
    {
      name: "opacityLevel",
      value: 0.8,
      bind: { input: "range", min: 0, max: 1, step: 0.05 }
    }
  ],
  mark: "circle",
  encoding: {
    opacity: { value: { expr: "param('opacityLevel')" } }
  }
}

Логические параметры и переключатели режимов

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

{
  params: [
    {
      name: "logScale",
      value: false,
      bind: { input: "checkbox" }
    }
  ],
  mark: "point",
  encoding: {
    y: {
      field: "value",
      type: "quantitative",
      scale: {
        type: { expr: "param('logScale') ? 'log' : 'linear'" }
      }
    }
  }
}

Такой подход позволяет изменять поведение шкалы без модификации самой схемы данных.

Интервал и выбор диапазонов

Параметры могут представлять диапазоны, включая brush-интеракции:

{
  params: [
    {
      name: "brush",
      select: "interval"
    }
  ],
  mark: "point",
  encoding: {
    x: { field: "x", type: "quantitative" },
    y: { field: "y", type: "quantitative" },
    opacity: {
      condition: {
        param: "brush",
        value: 1
      },
      value: 0.1
    }
  }
}

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

Взаимодействие нескольких параметров

Комбинация параметров позволяет строить сложную логику управления:

{
  params: [
    { name: "min", value: 0, bind: { input: "range", min: 0, max: 100 } },
    { name: "max", value: 50, bind: { input: "range", min: 0, max: 100 } }
  ],
  transform: [
    {
      filter: "datum.value >= param('min') && datum.value <= param('max')"
    }
  ],
  mark: "bar",
  encoding: {
    x: { field: "category", type: "nominal" },
    y: { field: "value", type: "quantitative" }
  }
}

Параметры формируют логический слой управления поверх данных, не изменяя исходный датасет.

Различие между параметрами Vega-Lite и сигналами Vega

В Vega-Lite параметры являются абстракцией над сигналами Vega.

Ключевые отличия:

  • параметры описываются декларативно
  • не требуют ручного управления графом сигналов
  • автоматически интегрируются в bind-интерфейсы
  • поддерживают высокоуровневые конструкции select/interval

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

Использование param() в сложных выражениях

Функция может применяться в составных логических выражениях:

filter: "datum.a > param('aMin') && datum.b < param('bMax') || param('mode') === 'all'"

Подобные конструкции позволяют реализовать сложные сценарии интерактивного анализа без выхода за пределы декларативного описания.

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

В составных визуализациях (facet, repeat, concat) параметры могут использоваться как глобальные состояния:

{
  params: [
    { name: "metric", value: "sales", bind: { input: "select", options: ["sales", "profit"] } }
  ],
  transform: [
    {
      calculate: "datum[param('metric')]",
      as: "selectedMetric"
    }
  ],
  mark: "bar",
  encoding: {
    y: { field: "selectedMetric", type: "quantitative" }
  }
}

Таким образом достигается переключение метрики без изменения структуры визуализации.

Динамическое поведение через параметрические зависимости

Параметры могут влиять не только на данные, но и на конфигурацию визуальных элементов:

  • масштабирование осей
  • выбор цветовых схем
  • изменение формы маркеров
  • переключение агрегаций
scale: {
  type: { expr: "param('useLog') ? 'log' : 'linear'" }
}

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

Роль param() в архитектуре декларативной визуализации

Функция param() выступает связующим звеном между статической спецификацией и динамическим состоянием интерфейса. Она обеспечивает единый способ доступа к интерактивным переменным внутри выражений, трансформаций и условий отображения.

Через параметризацию достигается разделение:

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

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

Оглавление