Поле line внутри area

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

Поле line управляет отображением линии поверх области и позволяет объединить преимущества двух типов графиков:

  • наглядность заполненной области;
  • точность восприятия линии тренда.

Базовое использование line

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

{
  "data": {
    "values": [
      {"x": 1, "y": 10},
      {"x": 2, "y": 20},
      {"x": 3, "y": 15},
      {"x": 4, "y": 30}
    ]
  },
  "mark": {
    "type": "area",
    "line": true
  },
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

Здесь:

"line": true

включает автоматическое рисование линии вдоль верхней границы области.

Без этого свойства отображалась бы только залитая фигура.

Визуальная разница

Без line

"mark": "area"

Результат:

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

С line

"mark": {
  "type": "area",
  "line": true
}

Результат:

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

Зачем используется line

Поле особенно полезно в следующих сценариях:

Отображение временных рядов

Например:

  • посещаемость сайта;
  • температура;
  • продажи;
  • нагрузка на сервер.

Область показывает объём, а линия подчёркивает изменение показателя.

Повышение читаемости графика

Если область имеет:

  • полупрозрачность;
  • градиент;
  • насыщенный цвет,

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

Наложение нескольких областей

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

Внутреннее устройство

При указании:

"line": true

Vega-Lite фактически создаёт дополнительный слой линии поверх area-mark.

То есть визуально получается комбинация:

  • area;
  • line.

Но пользователю не нужно вручную использовать layer.

Использование объекта вместо true

Поле line может быть не только логическим значением, но и объектом конфигурации.

Пример:

{
  "mark": {
    "type": "area",
    "line": {
      "color": "red",
      "strokeWidth": 3
    }
  }
}

Теперь линия:

  • красная;
  • толщиной 3 пикселя.

Настройка внешнего вида линии

Цвет

"line": {
  "color": "black"
}

Толщина

"line": {
  "strokeWidth": 2
}

Прозрачность

"line": {
  "opacity": 0.5
}

Тип штриха

"line": {
  "strokeDash": [6, 3]
}

Создаёт пунктирную линию.

Скругление соединений

"line": {
  "strokeJoin": "round"
}

Делает переходы между сегментами плавнее.

Полный пример настройки

{
  "data": {
    "values": [
      {"month": "Jan", "value": 12},
      {"month": "Feb", "value": 28},
      {"month": "Mar", "value": 19},
      {"month": "Apr", "value": 35}
    ]
  },
  "mark": {
    "type": "area",
    "color": "#87CEFA",
    "opacity": 0.4,
    "line": {
      "color": "#1E3A8A",
      "strokeWidth": 3
    }
  },
  "encoding": {
    "x": {
      "field": "month",
      "type": "ordinal"
    },
    "y": {
      "field": "value",
      "type": "quantitative"
    }
  }
}

Отличие от отдельного line-слоя

Технически похожий результат можно получить через layer.

Пример:

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

Однако поле line внутри area удобнее:

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

Когда лучше использовать layer

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

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

Взаимодействие с interpolate

Поле line наследует интерполяцию области.

Пример:

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

Линия станет сглаженной вместе с областью.

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

Linear

"interpolate": "linear"

Прямые сегменты.

Monotone

"interpolate": "monotone"

Плавный тренд без резких перегибов.

Step

"interpolate": "step"

Ступенчатый график.

Basis

"interpolate": "basis"

Сильное сглаживание.

Использование с временными шкалами

Особенно часто line применяется при работе с датами.

Пример:

{
  "data": {
    "values": [
      {"date": "2024-01-01", "value": 12},
      {"date": "2024-01-02", "value": 18},
      {"date": "2024-01-03", "value": 25}
    ]
  },
  "mark": {
    "type": "area",
    "line": true
  },
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal"
    },
    "y": {
      "field": "value",
      "type": "quantitative"
    }
  }
}

Использование с накопительными диаграммами

line хорошо работает в stacked area chart.

Пример:

{
  "mark": {
    "type": "area",
    "line": true
  },
  "encoding": {
    "color": {
      "field": "category"
    }
  }
}

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

Проблемы при использовании нескольких серий

Если серий слишком много:

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

В таких случаях полезны:

"opacity": 0.3

или уменьшение толщины линии.

Сочетание с point

Поле point можно использовать одновременно с line.

{
  "mark": {
    "type": "area",
    "line": true,
    "point": true
  }
}

Результат:

  • область;
  • линия;
  • точки данных.

Пример комбинированного графика

{
  "data": {
    "values": [
      {"x": 1, "y": 5},
      {"x": 2, "y": 15},
      {"x": 3, "y": 10},
      {"x": 4, "y": 20}
    ]
  },
  "mark": {
    "type": "area",
    "opacity": 0.5,
    "line": {
      "color": "darkblue",
      "strokeWidth": 2
    },
    "point": {
      "filled": true,
      "size": 80
    }
  },
  "encoding": {
    "x": {"field": "x", "type": "quantitative"},
    "y": {"field": "y", "type": "quantitative"}
  }
}

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

В чистом Vega аналогичная функциональность реализуется через отдельные marks.

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

{
  "marks": [
    {
      "type": "area"
    },
    {
      "type": "line"
    }
  ]
}

Vega-Lite упрощает этот процесс через свойство line.

Производительность

Поле line практически не влияет на производительность при:

  • небольших наборах данных;
  • средних объёмах временных рядов.

Однако при десятках тысяч точек:

  • увеличивается количество SVG-путей;
  • возрастает нагрузка на Canvas/SVG;
  • сглаживание может стать дорогим.

Поведение при null-значениях

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

[
  {"x": 1, "y": 10},
  {"x": 2, "y": null},
  {"x": 3, "y": 20}
]

Линия будет разорвана в месте отсутствующего значения.

Область также разделится.

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

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

"tooltip": [
  {"field": "x"},
  {"field": "y"}
]

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

Использовать line, если:

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

Не использовать line, если:

  • график уже перегружен;
  • отображается слишком много серий;
  • важна минималистичность;
  • контур отвлекает от общей формы.

Частые ошибки

Слишком толстая линия

"strokeWidth": 10

Контур начинает доминировать над областью.

Полностью непрозрачная область

"opacity": 1

Линия может визуально сливаться с заливкой.

Слишком яркий контур

Например:

"line": {
  "color": "#FF0000"
}

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

Оптимальные сочетания

Хорошая практика:

"opacity": 0.4

для области и:

"strokeWidth": 2

для линии.

Совместимость со схемами рендеринга

Поле line одинаково работает:

  • в SVG;
  • в Canvas;
  • при экспорте в PNG;
  • при экспорте в PDF.

Поддерживаемые свойства линии

Внутри line доступны почти все свойства line-mark:

Свойство Назначение
color Цвет линии
strokeWidth Толщина
opacity Прозрачность
strokeDash Пунктир
strokeCap Форма концов
strokeJoin Соединение сегментов
cursor Тип курсора
tooltip Подсказка
clip Обрезка
interpolate Интерполяция

Архитектурная особенность Vega-Lite

Поле line относится к концепции composite marks — составных маркеров.

area становится более сложной конструкцией:

  • основная заливка;
  • дополнительная линия;
  • при необходимости точки (point).

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

Оглавление