Области — Area

Примитив area представляет несколько элементов данных одной заполненной областью. Такие диаграммы часто показывают изменения во времени: одной областью или областями с накоплением.

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

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

Примеры

Диаграмма с областью

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

import altair as alt
from altair.datasets import data

source = data.unemployment_across_industries.url

alt.Chart(source).mark_area().encode(
    x="yearmonth(date):T",
    y="sum(count):Q",
).properties(width=300, height=200)

Область с линиями и точками

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

import altair as alt
from altair.datasets import data

source = data.stocks.url

alt.Chart(source).mark_area(line=True, point=True).encode(
    x="date:T",
    y="price:Q",
).transform_filter(
    alt.datum.symbol == "GOOG"
)

Вместо одноцветной заливки можно использовать градиент. Здесь также настраивается наложенная линия. Подробнее о градиентах см. документацию Vega-Lite:

import altair as alt
from altair.datasets import data

source = data.stocks()

alt.Chart(source).transform_filter(alt.datum.symbol == "GOOG").mark_area(
    line={"color": "darkgreen"},
    color=alt.Gradient(
        gradient="linear",
        stops=[
            alt.GradientStop(color="white", offset=0),
            alt.GradientStop(color="darkgreen", offset=1),
        ],
        x1=1,
        x2=1,
        y1=1,
        y2=0,
    ),
).encode(
    alt.X("date:T"),
    alt.Y("price:Q"),
)

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

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

import altair as alt
from altair.datasets import data

source = data.unemployment_across_industries.url

alt.Chart(source).mark_area().encode(
    alt.X("yearmonth(date):T").axis(format="%Y", domain=False, tickSize=0),
    alt.Y("sum(count):Q"),
    alt.Color("series:N").scale(scheme="category20b"),
)

Нормализованное накопление

stack="normalize" в канале кодирования создаёт нормализованные области с накоплением. Так удобно сравнивать долю безработных в разных отраслях:

import altair as alt
from altair.datasets import data

source = data.unemployment_across_industries.url

alt.Chart(source).mark_area().encode(
    alt.X("yearmonth(date):T").axis(format="%Y", domain=False, tickSize=0),
    alt.Y("sum(count):Q").stack("normalize"),
    alt.Color("series:N").scale(scheme="category20b"),
)

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

stack="center" сдвигает базовую линию накопления к центру и создаёт потоковую диаграмму. Метод interactive добавляет масштабирование и перемещение шкалы x:

import altair as alt
from altair.datasets import data

source = data.unemployment_across_industries.url

alt.Chart(source).mark_area().encode(
    alt.X("yearmonth(date):T").axis(format="%Y", domain=False, tickSize=0),
    alt.Y("sum(count):Q").stack("center").axis(None),
    alt.Color("series:N").scale(scheme="category20b"),
).interactive()

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

Указание X2 или Y2 для количественной оси создаёт область между двумя границами. Например, покажем минимальные и максимальные температуры во времени с агрегированием по monthdate:

import altair as alt
from altair.datasets import data

source = data.seattle_weather()

alt.Chart(source).mark_area(opacity=0.7).encode(
    alt.X("monthdate(date):T").title("Date"),
    alt.Y("mean(temp_max):Q").title("Daily Temperature Range (C)"),
    alt.Y2("mean(temp_min):Q"),
).properties(width=600, height=300)