Область

// Спецификация одиночного представления
{
  "data": ... ,
  "mark": "area",
  "encoding": ... ,
  ...
}

Примитив area объединяет несколько записей данных в одну заполненную область. Диаграммы областей часто показывают изменение величины во времени; несколько рядов могут складываться в области с накоплением.

Содержание страницы

Свойства области

// Спецификация одиночного представления
{
  ...,
  "mark": {
    "type": "area",
    ...
  },
  "encoding": ... ,
  ...
}

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

Свойство Тип Описание
align Align, ExprRef Горизонтальное выравнивание текста или интервальных примитивов (area, bar, image, rect, rule): "left", "right" или "center".

Примечание: ссылки на выражения для интервальных примитивов не поддерживаются.
baseline TextBaseline, ExprRef Для текста — вертикальная базовая линия: "alphabetic" (по умолчанию), "top", "middle", "bottom", "line-top", "line-bottom" или ссылка на выражение, возвращающее допустимое значение. Варианты line-top и line-bottom действуют подобно top и bottom, но рассчитываются относительно lineHeight, а не только fontSize.

Для интервальных примитивов — вертикальное выравнивание: "top", "middle" или "bottom".

Примечание: ссылки на выражения для интервальных примитивов не поддерживаются.
orient Orientation Ориентация столбчатых диаграмм без укладки, штрихов, областей и линий: "horizontal" (по умолчанию) или "vertical".

• Для bar, rule и tick определяет, применяется ли размер столбца или штриха к измерению X или Y.
• Для area определяет свойство orient выходной спецификации Vega.
• Для line и trail определяет порядок сортировки точек линии, если не задано config.sortLineBy.

Для диаграмм с укладкой ориентация всегда определяется направлением укладки; явно заданное значение игнорируется.
interpolate Interpolate, ExprRef Метод интерполяции для линий и областей:
• "linear" — последовательность прямых отрезков, как у ломаной.
• "linear-closed" — замыкает прямые отрезки в многоугольник.
• "step" — чередует горизонтальные и вертикальные отрезки, как ступенчатая функция.
• "step-before" — чередует вертикальные и горизонтальные отрезки.
• "step-after" — чередует горизонтальные и вертикальные отрезки.
• "basis" — B-сплайн с дублированием контрольных точек на концах.
• "basis-open" — открытый B-сплайн; может не проходить через начальную и конечную точки.
• "basis-closed" — замкнутый B-сплайн, образующий петлю.
• "cardinal" — кардинальный сплайн с дублированием контрольных точек на концах.
• "cardinal-open" — открытый кардинальный сплайн; может не проходить через начальную и конечную точки, но проходит через остальные контрольные точки.
• "cardinal-closed" — замкнутый кардинальный сплайн, образующий петлю.
• "bundle" — аналог basis, но параметр натяжения используется для выпрямления сплайна.
• "monotone" — кубическая интерполяция, сохраняющая монотонность по Y.
tension number, ExprRef Параметр натяжения для линий и областей; его действие зависит от метода интерполяции.
line boolean, OverlayMarkDef Флаг наложения линии поверх области либо объект свойств этой линии.

• Пустой объект {} или true — линия со стандартными свойствами.
• false — линия не добавляется автоматически.

По умолчанию: false.
point boolean, OverlayMarkDef, "transparent" Флаг наложения точек поверх линии или области либо объект свойств этих точек.

• "transparent" — прозрачные точки для улучшения работы подсказок и выделения.
• Пустой объект {} или true — точки с заливкой и стандартными свойствами.
• false — точки не добавляются автоматически.

По умолчанию: false.

Примеры

Простая диаграмма областей

Временное или порядковое поле на оси x и количественное поле на оси y дают диаграмму изменения величины. Здесь показано число безработных в США во времени:

Линия и точки поверх области

Задайте line и point равными true или объектам свойств накладываемых примитивов, чтобы добавить линию и точечные маркеры поверх области:

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

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

Если добавить поле в канал color, по умолчанию ряды укладываются друг на друга. Здесь они представляют отрасли:

Нормированные области

Значение "stack": "normalize" в канале кодирования приводит сумму рядов к единице для каждой позиции. Так легче сравнить доли безработных по отраслям:

Потоковая диаграмма

Значение "stack": "center" центрирует основание накопленных областей и создаёт потоковую диаграмму:

Область между двумя границами

Канал x2 или y2 задаёт вторую границу количественного измерения. Например, агрегаты ci0 и ci1 позволяют показать 95-процентный доверительный интервал вокруг среднего значения во времени:

Настройка областей

// Спецификация представления верхнего уровня
{
  ...,
  "config": {
    "area": ...,
    ...
  }
}

Свойство area объекта config верхнего уровня задаёт стандартные свойства всех областей. Каналы свойств примитива переопределяют эти значения.

Конфигурация может содержать любые свойства областей, кроме type, style, clip и orient.