[Altair] Area

작성일자 : 2024-09-17

Ver 0.1.1

 

Area

Area는 단일 면적 모양으로 다중 데이터 요소를 나타낸다. 면적 표시는 종종 단일 면적 또는 stack 면적을 사용하여 시간 경과에 따른 변화를 표시하는 데 사용된다.

---

속성

속성	유형	설명
align	anyOf(Align,ExprRef)	The horizontal alignment of the text or ranged marks (area, bar, image, rect, rule). One of "left", "right", "center". Note: Expression reference is not supported for range marks.
baseline	anyOf(TextBaseline, ExprRef)	For text marks, the vertical text baseline. One of "alphabetic" (default), "top", "middle", "bottom", "line-top", "line-bottom", or an expression reference that provides one of the valid values. The "line-top" and "line-bottom" values operate similarly to "top" and "bottom", but are calculated relative to the lineHeight rather than fontSize alone. For range marks, the vertical alignment of the marks. One of "top", "middle", "bottom". Note: Expression reference is not supported for range marks.
orient	Orientation	The orientation of a non-stacked bar, tick, area, and line charts. The value is either horizontal (default) or vertical. For bar, rule and tick, this determines whether the size of the bar and tick should be applied to x or y dimension. For area, this property determines the orient property of the Vega output. For line and trail marks, this property determines the sort order of the points in the line if config.sortLineBy is not specified. For stacked charts, this is always determined by the orientation of the stack; therefore explicitly specified value will be ignored.
interpolate	anyOf(Interpolate, ExprRef)	The line interpolation method to use for line and area marks. One of the following: "linear": piecewise linear segments, as in a polyline. "linear-closed": close the linear segments to form a polygon. "step": alternate between horizontal and vertical segments, as in a step function. "step-before": alternate between vertical and horizontal segments, as in a step function. "step-after": alternate between horizontal and vertical segments, as in a step function. "basis": a B-spline, with control point duplication on the ends. "basis-open": an open B-spline; may not intersect the start or end. "basis-closed": a closed B-spline, as in a loop. "cardinal": a Cardinal spline, with control point duplication on the ends. "cardinal-open": an open Cardinal spline; may not intersect the start or end, but will intersect other control points. "cardinal-closed": a closed Cardinal spline, as in a loop. "bundle": equivalent to basis, except the tension parameter is used to straighten the spline. "monotone": cubic interpolation that preserves monotonicity in y.
tension	anyOf(number, ExprRef)	Depending on the interpolation type, sets the tension parameter (for line and area marks).
line	anyOf(number, OverlayMarkDef)	A flag for overlaying line on top of area marks, or an object defining the properties of the overlayed lines. If this value is an empty object ({}) or true, lines with default properties will be used. If this value is false, no lines would be automatically added to area marks. Default value: false.
point	anyOf(boolean, OverlayMarkDef, string)	A flag for overlaying points on top of line or area marks, or an object defining the properties of the overlayed points. If this property is "transparent", transparent points will be used (for enhancing tooltips and selections). If this property is an empty object ({}) or true, filled points with default properties will be used. If this property is false, no points would be automatically added to line or area marks. Default value: false.

import altair as alt
import pandas as pd

interpolate_select = alt.binding_select(
    options=[
        "basis",
        "cardinal",
        "catmull-rom",
        "linear",
        "monotone",
        "natural",
        "step",
        "step-after",
        "step-before",
    ],
    name="interpolate",
)
interpolate_var = alt.param(bind=interpolate_select, value="linear")

tension_slider = alt.binding_range(min=0, max=1, step=0.05, name="tension")
tension_var = alt.param(bind=tension_slider, value=0)

source = pd.DataFrame({"u": [1, 2, 3, 4, 5, 6], "v": [28, 55, 42, 34, 36, 38]})

alt.Chart(source).mark_area(interpolate=interpolate_var, tension=tension_var).encode(
    x="u", y="v"
).add_params(interpolate_var, tension_var)

코드의 결과를 html로 업로드 해보았으나, output이 제대로 작동되지 않아 캡쳐화면으로 대체하였으나,

html로 열어보면 위 interpolate 들을 사용자가 바꿀때 마다 Area가 각 속성에 맞게 변화한다.

---

예시

Area Chart

시간 또는 순서 필드(일반적으로 x)와 정량 필드(일반적으로 y)가 하나인 면적 표시를 사용하면 면적 차트가 생성된다.

예를 들어, 다음 면적 차트는 시간 경과에 따른 미국 내 실업자 수를 보여준다.

import altair as alt
from vega_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)

오버레이 선 및 점 마커가 있는 영역 차트

마크 정의의 선 및 점 속성을 참 또는 오버레이하는 점 마크의 속성을 정의하는 객체로 설정하여 영역 위에 선 및 점 마커를 오버레이할 수 있다.

import altair as alt
from vega_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"
)

 

영역의 채우기 색상으로 단일 색상을 사용하는 대신 gradient로 설정할 수 있다. 이 예제에서는 오버레이도 사용자 지정한다.

gradient 옵션에 대한 자세한 내용은 Vega-Lite Gradient Document를 참조하세요.

import altair as alt
from vega_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"),
)

스택 (Stacked) 영역 차트 

영역 차트에 색 필드를 추가하면 기본적으로 스택 영역 차트가 생성된다. 예를 들어, 여기서는 영역 차트를 산업별로 나눈다.

import altair as alt
from vega_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"),
)

정규화된 스택  (Normalized Stacked) 영역 차트

import altair as alt
from vega_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"),
)

Steamgraph

또한스택 영역 차트의 베이스라인을 중앙으로 이동하고 인코딩 채널에서 스택을 "중앙"으로 설정하여 스트림그래프를 생성할 수 있다. 대화형 방법을 추가하면 x 스케일을 확대하고 패닝할 수 있습니다.

import altair as alt
from vega_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()

Ranged Area

면적 표시의 정량적 축에 X2 또는 Y2를 지정하면 범위 영역이 생성된다.

예를 들어, 범위 영역을 사용하여 월별 날짜별로 집계된 시간 경과에 따른 미니멈 및 최대 측정 온도를 강조 표시할 수 있다.

import altair as alt
from vega_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)