Фильтрация по периодам

Визуализация пространственных данных в Kepler.gl приобретает аналитическую глубину только при наличии корректно настроенной временной оси. Фильтрация по периодам позволяет переходить от статической карты к динамическому анализу процессов: транспортных потоков, миграций, изменений состояния объектов, событийной активности.

Временная фильтрация в Kepler.gl реализована через систему visState.filters, где каждый фильтр может быть связан с полем типа timestamp или числовым представлением времени. Основная идея заключается в том, что временной диапазон становится интерактивным ограничителем выборки данных, влияющим на все слои карты.

Структура временного фильтра

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

const timeFilter = {
  id: 'time-filter',
  dataId: 'dataset_1',
  name: 'timestamp',
  type: 'timeRange',
  value: [startTime, endTime],
  view: 'enlarged',
  speed: 1,
  enabled: true
};

Ключевые параметры:

  • dataId — идентификатор набора данных, к которому применяется фильтр
  • name — поле, содержащее временную метку
  • type — тип фильтра (timeRange)
  • value — массив из двух значений: начало и конец периода
  • speed — скорость анимации временного диапазона
  • enabled — активность фильтра

При корректной настройке Kepler.gl автоматически распознаёт временные значения и строит шкалу времени.

Подготовка данных для временной фильтрации

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

  • UNIX timestamp (миллисекунды)
  • ISO 8601 строка
  • числовое представление даты

Пример набора данных:

const data = [
  { lat: 49.806, lng: 73.085, timestamp: 1700000000000 },
  { lat: 49.812, lng: 73.090, timestamp: 1700003600000 },
  { lat: 49.820, lng: 73.100, timestamp: 1700007200000 }
];

При загрузке данных через addDataToMap Kepler.gl автоматически индексирует временное поле, если оно указано в конфигурации слоя или фильтра.

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

Фильтрация по периодам чаще всего задаётся через initialState:

const config = {
  visState: {
    filters: [
      {
        id: 'time_filter_1',
        dataId: ['dataset_1'],
        name: 'timestamp',
        type: 'timeRange',
        value: [1699990000000, 1700010000000],
        animationWindow: 'free',
        speed: 0.5
      }
    ]
  }
};

Параметр animationWindow определяет поведение временного окна:

  • full — охватывает весь диапазон данных
  • free — позволяет перемещать окно произвольно
  • incremental — постепенное расширение диапазона

Механика работы временного диапазона

При активации фильтра Kepler.gl выполняет следующие шаги:

  1. Сканирует указанное временное поле в dataset
  2. Строит минимальное и максимальное значения времени
  3. Применяет фильтрацию к каждому слою
  4. Обновляет визуализацию в соответствии с текущим диапазоном

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

Связь временного фильтра с слоями

Каждый слой в Kepler.gl наследует фильтры из visState.filters, если явно не переопределено поведение.

Пример слоя с временной зависимостью:

const layer = {
  id: 'points-layer',
  type: 'point',
  dataId: 'dataset_1',
  config: {
    columns: {
      lat: 'lat',
      lng: 'lng',
      timestamp: 'timestamp'
    }
  }
};

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

Анимация временного диапазона

Одной из ключевых возможностей является воспроизведение данных во времени. Это реализуется через параметры animationConfig:

const animationConfig = {
  currentTime: 1700000000000,
  speed: 1,
  timeFormat: 'milliseconds',
  timezone: 'UTC'
};

При активной анимации временной фильтр смещается по диапазону, создавая эффект “проигрывания” событий.

Параметры:

  • currentTime — текущая позиция временного курсора
  • speed — скорость движения по временной шкале
  • timeFormat — формат интерпретации времени

Интерактивное управление диапазоном

В пользовательском интерфейсе Kepler.gl временной фильтр представлен в виде:

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

Изменение диапазона приводит к мгновенному пересчёту всех активных слоёв.

Внутри состояния это отражается изменением массива value:

value: [newStartTime, newEndTime]

Комбинация нескольких временных фильтров

Kepler.gl поддерживает несколько фильтров одновременно. Это позволяет строить сложные логические ограничения.

Пример:

filters: [
  {
    id: 'time_filter',
    type: 'timeRange',
    name: 'timestamp',
    value: [t1, t2]
  },
  {
    id: 'secondary_time_filter',
    type: 'timeRange',
    name: 'event_time',
    value: [t3, t4]
  }
]

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

Поведение при больших объёмах данных

При работе с миллионами точек временная фильтрация становится критически важной частью производительности.

Kepler.gl использует:

  • предварительную индексацию временных полей
  • WebGL-рендеринг через deck.gl
  • агрегацию данных на уровне слоя (при необходимости)

Особенно эффективно работают комбинации временного фильтра и кластеризации точек, что снижает нагрузку на GPU.

Особенности работы с временными зонами

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

Рекомендуется:

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

Связь с histogram и распределением времени

Внутренне Kepler.gl может строить распределение временных значений, которое используется для:

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

Это распределение не всегда явно доступно в API, но влияет на UX временного управления.

Программное управление временным фильтром

Обновление фильтра через Redux action:

import { updateFilter } from 'kepler.gl/actions';

dispatch(updateFilter({
  dataId: 'dataset_1',
  filter: {
    id: 'time_filter_1',
    value: [start, end]
  }
}));

Это позволяет синхронизировать внешний UI с картой или подключать сторонние контроллеры времени.

Типичные ошибки при настройке периодов

Распространённые проблемы:

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

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

Взаимодействие с фильтрацией других типов

Временной фильтр может работать совместно с:

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

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

Оглавление