[Altair] Arc

작성일자 : 2024-09-16

Ver 0.1.1

 

Arc Mark

Arc Mark는 중심점과 각도 및 방사형 범위로 정의되는 원형 원호이다. Arc 표시는 일반적으로 Pie 및 Donut 차트와 같은 방사형 플롯에 사용된다.

---

속성

Arc 마크 정의에는 표준 마크 속성과 다음과 같은 특수 속성이 포함될 수 있다.

속성	유형	설명
radius	anyOf(number,ExprRef)	For arc Mark, the primary (outer) radius in pixels. For text marks, polar coordinate radial offset, in pixels, of the text from the origin determined by the x and y properties. Default value : min(plot_width, plot height) /2
radius2	anyOf(number,ExprRef)	The secondary (inner) radius in pixels of arc marks. Default value : 0
innerRadius	anyOf(number,ExprRef)	The inner radius in pixels of arc marks. innerRadius is an alias for radius2. Default value : 0
outerRadius	anyOf(number,ExprRef)	The outer radius in pixels of arc marks. outerRadius is an alias for radius. Default value : 0
theta	anyOf(number,ExprRef)	- For arc marks, the arc length in radians if theta2 is not specified, otherwise the start arc angle. (A value of 0 indicates up or “north”, increasing values proceed clockwise.) - For text marks, polar coordinate angle in radians.
theta2	anyOf(number,ExprRef)	The end angle of arc marks in radians. A value of 0 indicates up or “north”, increasing values proceed clockwise.
cornerRadius	anyOf(number,ExprRef)	The radius in pixels of rounded rectangles or arcs’ corners. Default value : 0
PadAngle	anyOf(number,ExprRef)	The angular padding applied to sides of the arc, in radians.
radiusOffset	anyOf(number,ExprRef)	Offset for raidus
radius2Offset	anyOf(number,ExprRef)	Offset for raidus2
thetaOffset	anyOf(number,ExprRef)	Offset for theta.
theta2Offset	anyOf(number,ExprRef)	Offset for theta2.

# 라이브러리 불러오기
import altair as alt
import numpy as np
import pandas as pd

# radius 슬라이더 할당
rad_slider = alt.binding_range(min=0, max=100, step=1)
rad_var = alt.param(bind=rad_slider, value=0, name="radius")

# radius 2 슬라이더 할당
rad2_slider = alt.binding_range(min=0, max=100, step=1)
rad_var2 = alt.param(bind=rad_slider, value=50, name="radius2")

# theta single arc 슬라이더 할당
theta_slider = alt.binding_range(min=-2 * np.pi, max=2 * np.pi)
theta_var = alt.param(bind=theta_slider, value=-0.73, name="theta_single_arc")

# theta2 single arc 슬라이더 할당
theta_slider2 = alt.binding_range(min=-2 * np.pi, max=2 * np.pi)
theta2_var = alt.param(bind=theta_slider, value=0.73, name="theta2_single_arc")

# cornerRadius 슬라이더 할당
corner_slider = alt.binding_range(min=0, max=50, step=1)
corner_var = alt.param(bind=corner_slider, value=0, name="cornerRadius")

# padAngle 슬라이더 할당
pad_slider = alt.binding_range(min=0, max=np.pi / 2)
pad_var = alt.param(bind=pad_slider, value=0, name="padAngle")

# 차트용 DataFrame 생성
source = pd.DataFrame({"category": [1, 2, 3, 4, 5, 6], "value": [4, 6, 10, 3, 7, 8]})

# Legend 없는 Arc Mark
c1 = alt.Chart(source, title="Single Arc").mark_arc(
    radius=rad_var,
    radius2=rad_var2,
    theta=theta_var,
    theta2=theta2_var,
    cornerRadius=corner_var,
    padAngle=pad_var,
)

# Legend 있는 Arc Mark
c2 = (
    alt.Chart(source, title="Stacked Arcs")
    .mark_arc(
        radius=rad_var,
        radius2=rad_var2,
        cornerRadius=corner_var,
        padAngle=pad_var,
    )
    .encode(
        theta=alt.Theta(field="value", type="quantitative"),
        color=alt.Color(field="category", type="nominal"),
    )
)

alt.hconcat(c1.properties(width=200), c2.properties(width=200)).add_params(
    rad_var, rad_var2, theta_var, theta2_var, corner_var, pad_var
)

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

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

---

예시

theta 또는 color Arc Mark를 Encoding 함으로써 Pie 차트를 그릴 수 있다.

import pandas as pd
import altair as alt

source = pd.DataFrame({"category": [1, 2, 3, 4, 5, 6], "value": [4, 6, 10, 3, 7, 8]})

alt.Chart(source).mark_arc().encode(
    theta=alt.Theta(field="value", type="quantitative"),
    color=alt.Color(field="category", type="nominal"),
)

innerRadius 값을 0이 아닌 값으로 설정하여 Donut 차트도 그릴 수 있다.

import pandas as pd
import altair as alt

source = pd.DataFrame({"category": [1, 2, 3, 4, 5, 6], "value": [4, 6, 10, 3, 7, 8]})

alt.Chart(source).mark_arc(innerRadius=50).encode(
    theta=alt.Theta(field="value", type="quantitative"),
    color=alt.Color(field="category", type="nominal"),
)

 

 

Text layer를 추가하여 Pie 차트에 Label을 추가할 수도 있다.

import pandas as pd
import altair as alt

source = pd.DataFrame(
    {"category": ["a", "b", "c", "d", "e", "f"], "value": [4, 6, 10, 3, 7, 8]}
)

base = alt.Chart(source).encode(
    theta=alt.Theta("value:Q").stack(True),
    color=alt.Color("category:N").legend(None),
)

pie = base.mark_arc(outerRadius=120)
text = base.mark_text(radius=140, size=20).encode(
    text="category:N"
)

pie + text