Поле interpolate для линий и областей

Поле interpolate в Vega и Vega-Lite управляет способом соединения точек в линейных (line) и областных (area) графиках. От выбора интерполяции зависит визуальное восприятие данных: график может выглядеть строго дискретным, плавным, ступенчатым или математически сглаженным.

Интерполяция применяется:

к линиям (mark: "line");
к областям (mark: "area");
к линиям внутри составных визуализаций;
к временным рядам;
к кривым плотности и статистическим отображениям.

Простейший пример:

{
  "mark": {
    "type": "line",
    "interpolate": "linear"
  }
}

Где задаётся `interpolate`

В Vega-Lite поле располагается внутри объекта mark.

{
  "data": {
    "values": [
      {"x": 1, "y": 10},
      {"x": 2, "y": 30},
      {"x": 3, "y": 20},
      {"x": 4, "y": 50}
    ]
  },

  "mark": {
    "type": "line",
    "interpolate": "monotone"
  },

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

В Vega используется аналогичное свойство:

{
  "type": "line",
  "interpolate": "basis"
}

Принцип работы интерполяции

При построении линии визуализация получает набор точек:

(1, 10)
(2, 30)
(3, 20)
(4, 50)

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

Интерполяция изменяет форму перехода между точками:

создаёт плавные изгибы;
формирует ступени;
минимизирует резкие углы;
сглаживает шум;
делает график визуально непрерывным.

Тип `linear`

Базовая линейная интерполяция

linear — стандартный режим. Точки соединяются прямыми линиями.

{
  "mark": {
    "type": "line",
    "interpolate": "linear"
  }
}

Особенности:

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

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

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

финансовых графиков;
инженерных измерений;
телеметрии;
дискретных наблюдений;
научных данных.

Визуальные свойства

Ломаная линия:

•
 \
  •
 / \
•   •

Преимущества

точное отображение;
отсутствие искусственных изгибов;
высокая читаемость.

Недостатки

резкие углы;
визуальная «шумность»;
менее эстетичное отображение.

Тип `monotone`

Монотонная интерполяция

monotone создаёт плавную кривую без паразитических экстремумов.

{
  "mark": {
    "type": "line",
    "interpolate": "monotone"
  }
}

Главная особенность

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

Это особенно важно для:

временных рядов;
финансов;
медицинских графиков;
статистики.

Поведение

Если значения растут, кривая не уйдёт вниз.

Если значения падают, не появится искусственный максимум.

Пример проблемы обычного сглаживания

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

точки:     •     •
             \ /
              •

monotone предотвращает такие эффекты.

Преимущества

плавность;
высокая достоверность;
отсутствие ложных колебаний.

Недостатки

более сложная геометрия;
не всегда подходит для дискретных процессов.

Тип `basis`

Кубическая B-сплайн интерполяция

basis создаёт очень плавную кривую.

{
  "mark": {
    "type": "line",
    "interpolate": "basis"
  }
}

Особенности

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

Внешний вид

~ ~ ~ плавная кривая ~ ~ ~

Где применяется

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

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

Недостатки

Главная проблема — потеря точности.

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

Тип `cardinal`

Кардинальная интерполяция

cardinal создаёт плавную кривую, проходящую через точки.

{
  "mark": {
    "type": "line",
    "interpolate": "cardinal"
  }
}

Отличия от `basis`

Тип	Проходит через точки	Степень сглаживания
basis	не всегда	высокая
cardinal	да	средняя

Поведение

Кривая:

мягче линейной;
более естественная;
визуально гладкая.

Проблемы

Возможны:

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

Тип `catmull-rom`

Интерполяция Катмулла — Рома

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

{
  "mark": {
    "type": "line",
    "interpolate": "catmull-rom"
  }
}

Особенности

проходит через все точки;
хорошо подходит для траекторий;
обеспечивает мягкие изгибы.

Области применения

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

маршрутов;
анимаций;
физических траекторий;
движения объектов.

Визуальные свойства

Кривая выглядит «живой» и непрерывной.

Тип `step`

Ступенчатая интерполяция

step формирует ступени между точками.

{
  "mark": {
    "type": "line",
    "interpolate": "step"
  }
}

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

Сначала выполняется горизонтальное смещение, затем вертикальное.

•───┐
    │
    └──•

Где используется

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

цифровых сигналов;
состояний системы;
биржевых котировок;
событийных данных.

Особенности

Изменение происходит мгновенно, а не плавно.

Тип `step-before`

Изменение перед точкой

{
  "mark": {
    "type": "line",
    "interpolate": "step-before"
  }
}

Поведение

Сначала выполняется вертикальный переход.

  ┌──•
  │
•─┘

Интерпретация

Новое значение начинает действовать ДО следующей точки.

Примеры применения

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

Тип `step-after`

Изменение после точки

{
  "mark": {
    "type": "line",
    "interpolate": "step-after"
  }
}

Поведение

Текущее значение сохраняется до следующей точки.

•──┐
   │
   └─•

Когда применять

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

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

Тип `bundle`

Пучковая интерполяция

bundle используется значительно реже.

{
  "mark": {
    "type": "line",
    "interpolate": "bundle"
  }
}

Назначение

Применяется в:

иерархических графах;
edge bundling;
сетевых диаграммах.

Особенности

Линии визуально группируются в «пучки».

Типы интерполяции для `area`

Поле interpolate работает и для областей.

{
  "mark": {
    "type": "area",
    "interpolate": "monotone"
  }
}

Интерполяция областей

Линейная область

{
  "mark": {
    "type": "area",
    "interpolate": "linear"
  }
}

Область повторяет форму ломаной линии.

Плавная область

{
  "mark": {
    "type": "area",
    "interpolate": "basis"
  }
}

Создаётся мягкая волнообразная поверхность.

Ступенчатая область

{
  "mark": {
    "type": "area",
    "interpolate": "step"
  }
}

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

накопительных процессов;
интервальных данных;
отображения состояний.

Влияние интерполяции на восприятие данных

Линейная интерпретация

Создаёт ощущение:

резких изменений;
точности;
дискретности.

Плавная интерпретация

Создаёт ощущение:

непрерывности;
естественного движения;
тренда.

Ступенчатая интерпретация

Подчёркивает:

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

Интерполяция и временные ряды

Временные ряды

Для временных данных чаще используются:

Тип	Назначение
linear	точный анализ
monotone	плавный временной ряд
step	интервальные значения

Ошибки выбора интерполяции

Слишком сильное сглаживание

Проблема:

"interpolate": "basis"

может скрыть:

пики;
провалы;
аномалии.

Ложные экстремумы

Некоторые кривые:

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

Особенно это заметно у:

cardinal;
catmull-rom.

Неверная интерпретация данных

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

Интерполяция и производительность

Простые алгоритмы

Быстрее работают:

linear;
step.

Сложные алгоритмы

Требуют больше вычислений:

basis;
cardinal;
catmull-rom.

Комбинирование с `tension`

Некоторые типы поддерживают параметр tension.

{
  "mark": {
    "type": "line",
    "interpolate": "cardinal",
    "tension": 0.8
  }
}

Назначение

tension регулирует:

степень изгиба;
мягкость кривой;
интенсивность сглаживания.

Диапазон `tension`

Обычно:

0 → сильное сглаживание
1 → более жёсткая форма

Пример с `cardinal`

{
  "data": {
    "values": [
      {"x": 0, "y": 10},
      {"x": 1, "y": 30},
      {"x": 2, "y": 15},
      {"x": 3, "y": 40}
    ]
  },

  "mark": {
    "type": "line",
    "interpolate": "cardinal",
    "tension": 0.3
  },

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

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

Пример Vega-спецификации:

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",

  "width": 400,
  "height": 200,

  "data": [
    {
      "name": "table",
      "values": [
        {"x": 0, "y": 28},
        {"x": 1, "y": 55},
        {"x": 2, "y": 43},
        {"x": 3, "y": 91}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "linear",
      "domain": {"data": "table", "field": "x"},
      "range": "width"
    },
    {
      "name": "yscale",
      "type": "linear",
      "domain": {"data": "table", "field": "y"},
      "range": "height"
    }
  ],

  "marks": [
    {
      "type": "line",

      "from": {
        "data": "table"
      },

      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "steelblue"},
          "strokeWidth": {"value": 2}
        }
      },

      "interpolate": "monotone"
    }
  ]
}

Сравнение основных типов

Тип	Плавность	Проходит через точки	Основное применение
linear	нет	да	аналитика
monotone	средняя	да	временные ряды
basis	высокая	не всегда	декоративные графики
cardinal	высокая	да	плавные тренды
catmull-rom	высокая	да	траектории
step	нет	да	дискретные состояния

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

Для аналитических систем

Предпочтительно:

"interpolate": "linear"

или:

"interpolate": "monotone"

Для презентационной визуализации

Подходят:

"basis"

или:

"cardinal"

Для цифровых процессов

Используются:

"step"

"step-before"

"step-after"

Интерполяция и точность визуализации

Выбор метода интерполяции влияет не только на внешний вид графика, но и на интерпретацию данных:

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

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

Поле interpolate для линий и областей

Где задаётся interpolate

Принцип работы интерполяции

Тип linear

Базовая линейная интерполяция

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

Визуальные свойства

Преимущества

Недостатки

Тип monotone

Монотонная интерполяция

Главная особенность

Поведение

Пример проблемы обычного сглаживания

Преимущества

Недостатки

Тип basis

Кубическая B-сплайн интерполяция

Особенности

Внешний вид

Где применяется

Недостатки

Тип cardinal

Кардинальная интерполяция

Отличия от basis

Поведение

Проблемы

Тип catmull-rom

Интерполяция Катмулла — Рома

Особенности

Области применения

Визуальные свойства

Тип step

Ступенчатая интерполяция

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

Где используется

Особенности

Тип step-before

Изменение перед точкой

Поведение

Интерпретация

Примеры применения

Тип step-after

Изменение после точки

Поведение

Когда применять

Тип bundle

Пучковая интерполяция

Назначение

Особенности

Типы интерполяции для area

Интерполяция областей

Линейная область

Плавная область

Ступенчатая область

Влияние интерполяции на восприятие данных

Линейная интерпретация

Плавная интерпретация

Ступенчатая интерпретация

Интерполяция и временные ряды

Временные ряды

Ошибки выбора интерполяции

Слишком сильное сглаживание

Ложные экстремумы

Неверная интерпретация данных

Интерполяция и производительность

Простые алгоритмы

Сложные алгоритмы

Комбинирование с tension

Назначение

Диапазон tension

Пример с cardinal

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

Сравнение основных типов

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

Для аналитических систем

Для презентационной визуализации

Для цифровых процессов

Интерполяция и точность визуализации

Где задаётся `interpolate`

Тип `linear`

Тип `monotone`

Тип `basis`

Тип `cardinal`

Отличия от `basis`

Тип `catmull-rom`

Тип `step`

Тип `step-before`

Тип `step-after`

Тип `bundle`

Типы интерполяции для `area`

Комбинирование с `tension`

Диапазон `tension`

Пример с `cardinal`