작성일자 : 2024-09-19
Ver 0.1.1
Bar
Bar(막대)는 막대 차트, 스택 막대 차트, 시계열과 같은 많은 시각화에서 유용하다.
속성
속성 | 유형 | 설명 |
width | anyOf(number, ExprRef, RelativeBandSize) | Width of the marks. One of: - A number representing a fixed pixel width. - A relative band size definition. For example, {band: 0.5} represents half of the band. |
height | anyOf(number, ExprRef, RelativeBandSize) | Height of the marks. One of: - A number representing a fixed pixel height. - A relative band size definition. For example, {band: 0.5} represents half of the band |
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. |
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. |
binSpacing | number | Offset between bars for binned field. The ideal value for this is either 0 (preferred by statisticians) or 1 (Vega-Lite default, D3 example style). Default value: 1 |
cornerRadius | anyOf(number, ExprRef) | The radius in pixels of rounded rectangles or arcs’ corners. Default value: 0 |
cornerRadiusEnd | anyOf(number, ExprRef) | - For vertical bars, top-left and top-right corner radius. - For horizontal bars, top-right and bottom-right corner radius. |
cornerRadiusTopLeft | anyOf(number, ExprRef) | The radius in pixels of rounded rectangles’ top left corner. Default value: 0 |
cornerRadiusTopRight | anyOf(number, ExprRef) | The radius in pixels of rounded rectangles' top right corner. Default value: 0 |
cornerRadiusBottomRight | anyOf(number, ExprRef) | The radius in pixels of rounded rectangles’ bottom right corner. Default value: 0 |
cornerRadiusBottomLeft | anyOf(number, ExprRef) | The radius in pixels of rounded rectangles’ bottom left corner. Default value: 0 |
import altair as alt
import pandas as pd
corner_slider = alt.binding_range(min=0, max=50, step=1)
corner_var = alt.param(bind=corner_slider, value=0, name="cornerRadius")
source = pd.DataFrame(
{
"a": ["A", "B", "C", "D", "E", "F", "G", "H", "I"],
"b": [28, 55, 43, 91, 81, 53, 19, 87, 52],
}
)
alt.Chart(source).mark_bar(cornerRadius=corner_var).encode(
x=alt.X("a:N").axis(labelAngle=0),
y="b:Q",
).add_params(corner_var)
코드의 결과를 html로 업로드 해보았으나, output이 제대로 작동되지 않아 캡쳐화면으로 대체하였으나,
html로 열어보면 위 cornerRadius 들을 사용자가 바꿀때 마다 막대의 가장자리가 변화한다.
예시
Single Bar Chart
막대의 x 또는 y에 양적 필드를 매핑하면 Single Bar chart가 생성된다.
import altair as alt
from altair import datum
from vega_datasets import data
source = data.population.url
alt.Chart(source).mark_bar().encode(
alt.X("sum(people):Q").title("Population")
).transform_filter(
datum.year == 2000
)
Bar chart
import altair as alt
from altair import datum
from vega_datasets import data
source = data.population.url
alt.Chart(source).mark_bar().encode(
alt.X("sum(people):Q").title("Population"),
alt.Y("age:O"),
).transform_filter(
datum.year == 2000
).properties(height=alt.Step(20))
Bar Chart with a Temporal Axis
import altair as alt
from vega_datasets import data
source = data.seattle_weather()
alt.Chart(source).mark_bar().encode(
alt.X("month(date):T").title("Date"),
alt.Y("mean(precipitation):Q"),
)
Histogram
import altair as alt
from vega_datasets import data
source = data.movies.url
alt.Chart(source).mark_bar().encode(
alt.X("IMDB_Rating:Q").bin(),
y='count()',
)
Stacked Bar Chart
import altair as alt
from vega_datasets import data
source = data.barley()
alt.Chart(source).mark_bar().encode(
x="variety",
y="sum(yield)",
color="site"
)
Grouped Bar Chart with Offset
import altair as alt
import pandas as pd
source = pd.DataFrame(
{
"category": ["A", "A", "B", "B", "C", "C"],
"group": ["x", "y", "z", "x", "y", "z"],
"value": [0.1, 0.6, 0.9, 0.7, 0.2, 0.6],
}
)
alt.Chart(source).mark_bar().encode(
x=alt.X("category:N"),
xOffset="group:N",
y=alt.Y("value:Q"),
color=alt.Color("group:N"),
)