Тип line

Линейный график в Vega-Lite строится на основе марки line, предназначенной для отображения непрерывных данных, чаще всего временных рядов или упорядоченных последовательностей значений. Геометрически линия формируется соединением точек, заданных через каналы кодирования, где ось X определяет порядок, а ось Y — величину.

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

Базовая структура спецификации Vega-Lite

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

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"x": 1, "y": 2},
      {"x": 2, "y": 5},
      {"x": 3, "y": 3}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

В этом описании:

  • mark: "line" определяет тип графического примитива
  • x и y задают координатное пространство
  • quantitative указывает на числовую природу данных

Линия строится в порядке значений X. При отсутствии явного порядка применяется сортировка по оси X.

Линейные графики временных рядов

Одно из наиболее частых применений линии — временные данные. В этом случае ось X использует тип temporal, обеспечивающий корректную интерпретацию дат и времени.

{
  "data": {
    "values": [
      {"date": "2024-01-01", "value": 10},
      {"date": "2024-01-02", "value": 14},
      {"date": "2024-01-03", "value": 9}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

Тип temporal обеспечивает:

  • корректный парсинг строковых дат
  • равномерное распределение шкалы времени
  • поддержку масштабирования (time scale)

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

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

Наиболее используемые режимы:

  • linear — прямые сегменты между точками
  • monotone — сглаживание без пересечений экстремумов
  • step — ступенчатая форма
  • basis — B-spline сглаживание

Пример сглаженной линии:

{
  "mark": {
    "type": "line",
    "interpolate": "monotone"
  },
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

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

Многосерийные линии

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

{
  "data": {
    "values": [
      {"x": 1, "y": 10, "series": "A"},
      {"x": 2, "y": 15, "series": "A"},
      {"x": 1, "y": 7, "series": "B"},
      {"x": 2, "y": 12, "series": "B"}
    ]
  },
  "mark": "line",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"field": "series", "type": "nominal"}
  }
}

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

Дополнительно может использоваться strokeDash для различения линий стилем:

"strokeDash": {"field": "series", "type": "nominal"}

Агрегация данных в линейных графиках

Линия часто строится не на исходных данных, а на агрегированных значениях. Vega-Lite поддерживает встроенные агрегаторы:

  • mean
  • sum
  • median
  • min
  • max

Пример агрегации:

{
  "mark": "line",
  "encoding": {
    "x": {"field": "month", "type": "temporal"},
    "y": {
      "field": "value",
      "type": "quantitative",
      "aggregate": "mean"
    }
  }
}

Агрегация выполняется до построения визуализации, что позволяет уменьшить шум и выявить общую тенденцию.

Обработка пропусков и null значений

Линейные графики чувствительны к отсутствующим данным. Поведение при null определяется параметром defined.

{
  "mark": "line",
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "opacity": {
      "condition": {
        "test": "datum.y != null",
        "value": 1
      },
      "value": 0.2
    }
  }
}

В Vega также используется канал defined, который позволяет разрывать линию при отсутствии данных. Это важно для временных рядов с пропусками измерений.

Стилизация линий

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

  • color — цвет линии
  • strokeWidth — толщина
  • opacity — прозрачность
  • strokeCap — форма концов линии (round, square)
  • strokeJoin — форма соединений

Пример расширенной стилизации:

{
  "mark": {
    "type": "line",
    "strokeWidth": 3,
    "opacity": 0.8,
    "strokeCap": "round"
  },
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"},
    "color": {"value": "#4C78A8"}
  }
}

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

Комбинирование линий с другими mark-типами

Линия часто комбинируется с точками для повышения читаемости. Это достигается через слой (layer):

{
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "y", "type": "quantitative"}
      }
    },
    {
      "mark": "point",
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {"field": "y", "type": "quantitative"}
      }
    }
  ]
}

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

Vega: низкоуровневая реализация line mark

Vega-Lite компилируется в спецификацию Vega, где линия определяется через примитив marks с типом line.

{
  "marks": [
    {
      "type": "line",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "x"},
          "y": {"scale": "yscale", "field": "y"},
          "stroke": {"value": "steelblue"},
          "strokeWidth": {"value": 2}
        }
      }
    }
  ]
}

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

  • явное связывание с масштабами (scale)
  • ручное управление вводом данных (from)
  • пошаговое определение визуальных атрибутов (encode)

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

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

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

Факторы влияния:

  • число уникальных значений по оси X
  • наличие агрегации
  • количество слоёв (layer)
  • использование сглаживания (interpolate)

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

Масштабирование и оси

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

  • scale: linear — стандартная шкала
  • scale: log — логарифмическая шкала
  • scale: time — временная шкала

Пример логарифмической оси:

{
  "encoding": {
    "y": {
      "field": "value",
      "type": "quantitative",
      "scale": {"type": "log"}
    }
  }
}

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

Особенности семантики линии

Линия в Vega-Lite не является просто графическим соединением точек. Она интерпретирует данные как упорядоченную последовательность, где важен контекст оси X.

Ключевые свойства:

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

Эти свойства делают line mark центральным элементом аналитических визуализаций временных и количественных данных.

Оглавление