Area-диаграмма в Vega и Vega-Lite используется для визуализации накопленных значений и отображения непрерывных изменений величин через заполнение области под линией. Этот тип визуализации является развитием линейного графика, где ключевым элементом становится не только траектория изменения данных, но и площадь под кривой, усиливающая восприятие масштаба и интегрального значения показателя.
В экосистеме декларативной визуализации Vega/Vega-Lite area-граф определяется через тип mark, который задаёт способ отображения данных, а поведение графика формируется исключительно через JSON-спецификацию. В отличие от императивных библиотек, здесь отсутствует необходимость ручного управления отрисовкой — вся логика описывается через структуру данных и набор правил преобразования.
В Vega-Lite area-диаграмма задаётся через mark: “area”. Основной смысл заключается в отображении зависимости значения y от оси x с заполнением области под линией.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{ "x": 1, "y": 10 },
{ "x": 2, "y": 25 },
{ "x": 3, "y": 15 },
{ "x": 4, "y": 40 }
]
},
"mark": "area",
"encoding": {
"x": { "field": "x", "type": "quantitative" },
"y": { "field": "y", "type": "quantitative" }
}
}В данной конфигурации Vega-Lite автоматически интерпретирует область как заполнение от значения y до базовой линии (обычно ноль). Важно, что базовая линия может быть переопределена через параметры y2 или baseline в зависимости от версии и режима визуализации.
В Vega уровень абстракции ниже. Здесь area описывается через mark с типом “area”, а данные проходят через явные transforms и scales.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"data": [
{
"name": "table",
"values": [
{ "x": 1, "y": 10 },
{ "x": 2, "y": 25 },
{ "x": 3, "y": 15 },
{ "x": 4, "y": 40 }
]
}
],
"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": "area",
"from": { "data": "table" },
"encode": {
"enter": {
"x": { "scale": "xscale", "field": "x" },
"y": { "scale": "yscale", "field": "y" },
"y2": { "scale": "yscale", "value": 0 }
},
"update": {
"fill": { "value": "steelblue" },
"opacity": { "value": 0.7 }
}
}
}
]
}Здесь ключевым элементом становится y2, определяющий нижнюю границу области. Без него area не формируется корректно, поскольку Vega не предполагает автоматической базовой линии.
Area-граф фактически строится как замкнутый полигон, состоящий из двух линий:
Внутри Vega эта геометрия преобразуется в path, который затем передаётся рендереру (Canvas или SVG). При этом важным моментом является порядок данных: сортировка по оси x критична для корректной формы области.
Vega/Vega-Lite поддерживают несколько типов интерполяции линии области. Это влияет на форму верхней границы area.
Наиболее используемые варианты:
Пример Vega-Lite:
{
"mark": {
"type": "area",
"interpolate": "monotone"
},
"encoding": {
"x": { "field": "x", "type": "quantitative" },
"y": { "field": "y", "type": "quantitative" }
}
}Интерполяция влияет не только на визуальную эстетику, но и на восприятие динамики данных. Monotone используется для предотвращения ложных пиков, возникающих при сглаживании.
Одно из ключевых применений area — накопительные (stacked) графики. В этом случае несколько рядов данных накладываются друг на друга.
{
"mark": "area",
"encoding": {
"x": { "field": "x", "type": "ordinal" },
"y": { "field": "value", "type": "quantitative", "stack": "zero" },
"color": { "field": "category", "type": "nominal" }
}
}Стековая логика реализуется через transform stack, который вычисляет y0 и y1 для каждого слоя.
В Vega этот процесс явно задаётся:
Area-диаграммы чувствительны к отсутствующим данным. Vega/Vega-Lite позволяют управлять этим через параметр interpolate и transform-операции.
Основные стратегии:
Пример удаления пропусков:
{
"transform": [
{ "filter": "datum.y != null" }
]
}Базовая линия area не всегда равна нулю. Возможны альтернативные режимы:
В Vega-Lite базовая линия может задаваться через scale domain и transform:
{
"transform": [
{
"joinaggregate": [
{ "op": "mean", "field": "y", "as": "mean_y" }
]
}
],
"mark": "area",
"encoding": {
"y": { "field": "y", "type": "quantitative" },
"y2": { "field": "mean_y" }
}
}Такой подход позволяет визуализировать отклонения относительно статистической нормы.
Fill и opacity являются основными визуальными параметрами area-марка. В Vega эти свойства задаются через encode.update, в Vega-Lite — через mark properties.
{
"mark": {
"type": "area",
"color": "#4c78a8",
"opacity": 0.5
}
}При работе со stacked area цвет становится семантическим признаком категории, поэтому используется шкала color encoding.
Часто area-диаграмма дополняется линией, подчёркивающей точную траекторию данных. В Vega-Lite это реализуется через layered charts.
{
"layer": [
{
"mark": "area",
"encoding": {
"x": { "field": "x", "type": "quantitative" },
"y": { "field": "y", "type": "quantitative" }
}
},
{
"mark": {
"type": "line",
"color": "black"
},
"encoding": {
"x": { "field": "x" },
"y": { "field": "y" }
}
}
]
}Layering позволяет разделить семантику площади и точечного изменения значения.
Area-диаграммы требуют построения path-геометрии, что может быть ресурсоёмким при больших наборах данных. Vega оптимизирует процесс через:
При десятках тысяч точек часто используется предварительная агрегация через binning или timeUnit трансформации.
Area-графики часто применяются к временным данным. Vega-Lite поддерживает автоматическую обработку времени через type: temporal.
{
"encoding": {
"x": {
"field": "date",
"type": "temporal"
},
"y": {
"field": "value",
"type": "quantitative"
}
},
"mark": "area"
}При этом система автоматически применяет временные масштабы, включая локализацию и форматирование оси.
С математической точки зрения area-граф представляет собой интегральное приближение функции y(x). Каждая вертикальная секция области соответствует элементарному прямоугольнику или трапеции, суммируемой по оси x.
В дискретной форме:
Эта интерпретация лежит в основе использования area для анализа накопленных значений, а не только визуального сравнения.
Vega-Lite предоставляет декларативный уровень:
Vega раскрывает полный контроль:
Vega-Lite компилируется в Vega, где area превращается в низкоуровневую графическую инструкцию.
На практике часто возникают следующие проблемы:
Каждая из этих ошибок приводит к искажению геометрии полигона, формирующего область.
Перед визуализацией area часто применяются трансформации:
Vega-Lite позволяет встроить такие операции прямо в pipeline:
{
"transform": [
{
"calculate": "datum.value / 100",
"as": "normalized"
}
]
}Хотя area сам по себе статичен, Vega поддерживает интерактивные сигналы:
Пример selection:
{
"selection": {
"brush": {
"type": "interval"
}
},
"mark": "area",
"encoding": {
"opacity": {
"condition": { "selection": "brush", "value": 1 },
"value": 0.3
}
}
}Это позволяет выделять участки области и анализировать локальные сегменты временного ряда.