반응형
Python Streamlit 알아보기 (5-1):Chart Elements
목차
Simple Area charts
✔ st.area_chart
st.area_chart는 간단한 Area chart를 표시하는 기능을 한다.
데이터의 컬럼과 인덱스를 사용하여 차트의 사양을 자동으로 결정한다.
st.area_chart(data=None,
*,
x=None,
y=None,
color=None,
width=0,
height=0,
use_container_width=True)📌 st.area_chart 인자
- data
차트에 표시될 데이터 - x
x축에 사용할 컬럼 이름. - y
y축에 사용할 컬럼 이름(들). - color
차트의 색상. - width
차트의 너비(픽셀 단위). 0으로 설정된 경우 자동으로 너비를 지정한다. - height
차트의 높이(픽셀 단위). 0으로 설정된 경우 자동으로 높이를 지정한다. - use_container_width
True로 설정된 경우, 차트 너비를 컬럼 너비에 맞춥니다. 이 설정은 width 인자보다 우선시된다.
# Example
df = pd.DataFrame(
np.random.randn(20, 4),
columns=["a", "b", "c", "d"])
st.area_chart(
df,
x="a",
y=["b", "c", "d"],
color=["#1764AB", "#4A98CA", "#94C5DF"],
)
Simple Bar charts
✔ st.bar_chart
st.bar_chart는 데이터의 컬럼과 인덱스를 활용해 간단한 막대(Bar) 차트를 생성한다.
st.bar_chart(data=None,
*,
x=None,
y=None,
color=None,
width=0,
height=0,
use_container_width=True)📌 st.bar_chart 인자
- data
차트에 표시될 데이터. - x
x축에 사용될 컬럼 이름. - y
y축에 사용될 컬럼 이름(들). - color
차트의 색상. - width
차트의 너비(픽셀 단위). 0으로 설정된 경우 자동으로 너비를 지정한다. - height
차트의 높이(픽셀 단위). 0으로 설정된 경우 자동으로 높이를 지정한다. - use_container_width
True로 설정된 경우, 차트 너비를 컬럼 너비에 맞춥니다. 이 설정은 width 인자보다 우선시된다.
# Example
df = pd.DataFrame(
{
"a": range(1, 13),
"b": np.random.randn(12),
"c": np.random.randn(12),
"d": np.random.randn(12),
}
)
st.bar_chart(
df,
x="a",
y=["b", "c", "d"],
color=["#1764AB", "#4A98CA", "#94C5DF"],
)
Simple Line charts
✔ st.line_chart
st.line_chart는 데이터의 컬럼과 인덱스를 이용해 선형(Line) 차트를 생성한다.
st.line_chart(data=None,
*,
x=None,
y=None,
color=None,
width=0,
height=0,
use_container_width=True)📌 st.line_chart 인자
- data
차트에 표시될 데이터. - x
x축에 사용될 컬럼 이름. - y
y축에 사용될 컬럼 이름(들). - color
차트의 색상. - width
차트의 너비(픽셀 단위). 0으로 설정된 경우 자동으로 너비를 지정한다. - height
차트의 높이(픽셀 단위). 0으로 설정된 경우 자동으로 높이를 지정한다. - use_container_width
True로 설정된 경우, 차트 너비를 컬럼 너비에 맞춥니다. 이 설정은 width 인자보다 우선시된다.
# Example
df = pd.DataFrame(
{
"quoter": ["1Q", "2Q", "3Q", "4Q"],
"sales": random.sample(range(0, 100), 4),
"margin": random.sample(range(0, 100), 4),
}
)
st.line_chart(
df,
x="quoter",
y=["sales", "margin"],
color=["#1764AB", "#4A98CA"],
)
Simple Scatter charts
✔ st.scatter_chart
st.scatter_chart는 산점도 차트를 생성한다.
st.scatter_chart(data=None,
*,
x=None,
y=None,
color=None,
size=None,
width=0,
height=0,
use_container_width=True)📌 st.scatter_chart 인자
- data
플로팅할 데이터. - x
x축에 사용할 열 이름. - y
y축에 사용할 열 이름(들). - color
각 데이터 포인트를 나타내는 원의 색상. - size
각 포인트의 크기. 모든 포인트에 대해 사용할 단일 크기를 지정하거나, 크기를 나타내는 열의 이름을 작성한다. - width
차트의 너비(픽셀 단위). 0으로 설정된 경우 자동으로 너비를 지정한다. - height
차트의 높이(픽셀 단위). 0으로 설정된 경우 자동으로 높이를 지정한다. - use_container_width
True로 설정된 경우, 차트 너비를 컬럼 너비에 맞춥니다. 이 설정은 width 인자보다 우선시된다.
# Example
df = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])
df['d'] = np.random.choice(['A','B','C'], 20)
st.scatter_chart(
df,
x='a',
y='b',
color='d',
size='c',
)
Scatterplots on Maps
✔ st.map
st.map은 지도 위에 산점도를 그릴 수 있는 기능을 제공한다.
Mapbox의 지도를 제공하여 콘텐츠를 렌더링하게 된다.
st.map(data=None,
*,
latitude=None,
longitude=None,
color=None,
size=None,
zoom=None,
use_container_width=True)📌 st.map 인자
- data
플로팅할 데이터. - latitude
차트의 데이터 포인트에 대한 위도 좌표를 포함하는 열의 이름.
None인 경우, 'lat', 'latitude', 'LAT', 또는 'LATITUDE'라는 이름의 모든 열에서 위도 데이터를 가져오게 된다. - longitude
차트의 데이터 포인트에 대한 경도 좌표를 포함하는 열의 이름.
None인 경우, 'lon', 'longitude', 'LON', 또는 'LONGITUDE'라는 이름의 모든 열에서 경도 데이터를 가져오게 된다. - color
각 데이터 포인트를 나타내는 원의 색상. - size
각 점을 나타내는 원의 크기(미터 단위). 이는 모든 데이터 포인트에 대해 사용할 단일 크기를 지정하는 숫자이거나, 크기를 나타내는 열의 이름을 선언할 수 있다. - zoom
https://wiki.openstreetmap.org/wiki/Zoom_levels에 명시된 줌 레벨. - use_container_width
True로 설정된 경우, 차트 너비를 컬럼 너비에 맞춥니다. 이 설정은 width 인자보다 우선시된다.
# Example 1
df = pd.DataFrame(
np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4],
columns=['lat', 'lon']
)
st.map(df)
한국 기준의 위도/경도로 예제를 하나 더 만들어보자.
이때, 컬러를 랜덤하게 넣어주고 싶어서 hex code를 랜덤으로 출력하는 함수를 구현해서 사용해보았다.
# Example 2
# 랜덤 데이터 생성 (한국 기준)
lat = np.random.uniform(35, 38, 20) # 위도: 33도에서 38도 사이의 랜덤 값
lon = np.random.uniform(126, 129, 20) # 경도: 126도에서 129도 사이의 랜덤 값
size = np.random.randint(1, 300, 20)*100 # 사이즈: 1에서 50 사이의 랜덤 정수 값
# 랜덤 HEX Code
def generate_hex_color(alpha='80'):
# RGB 값과 함께 알파(투명도) 값을 포맷 문자열에 추가
return '#{0:02X}{1:02X}{2:02X}{3}'.format(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255), alpha)
hex_colors = [generate_hex_color() for _ in range(20)]
df = pd.DataFrame({
'위도': lat,
'경도': lon,
'size': size,
'color': hex_colors
})
st.map(
df,
latitude='위도',
longitude='경도',
size='size',
color='color')
이렇게 Streamlit에서 간단한 차트를 구현하는 기능들에 대해서 알아보았다.
st.map의 경우에는 정말 심플하게 구현이 가능해서 굉장히 편해보인다.
다음 포스트에서는 Python의 다양한 차트 라이브러리와 함께 알아봐야해서 천천히 공부를 해야할 것 같다.
Matplotlib 정도만 알면 되겠거니 했는데, Altair, Vega, Plotly 등등... 알아봐야 할 것이 너무 많다.
물론 이 중 하나만 선택해서 하면 되긴 하겠으나... 그래도 이왕 하는 김에 시간내서 공부해볼 생각이다.
커피 한 잔으로
저를 응원해주세요!
저를 응원해주세요!
반응형
'Python > Streamlit' 카테고리의 다른 글
| Python Streamlit 알아보기 (6-1):Input widgets (0) | 2024.03.25 |
|---|---|
| Python Streamlit 알아보기 (4-2):Column configuration (0) | 2024.02.08 |
| Python Streamlit 알아보기 (4-1):Column configuration (0) | 2024.01.20 |
| Python Streamlit 알아보기 (3):Data Elements (0) | 2024.01.13 |
| Python Streamlit 알아보기 (2):Text Elements (0) | 2024.01.06 |
이번 포스트에서는 Streamlit의 Chart elements에 대해서 알아보고자 한다.
DOCS를 확인해보니 Streamlit에서 기본적으로 제공하는 Simple Chart들에 대해서만 먼저 알아보고자 하며, Matplotlib, Vega, Altair, Plotly 등의 Python 차트 라이브러리 관련된 기능들은 해당 라이브러리를 알아보면서 천천히 공부해볼 계획이다.
그럼 Simple Chart elements에 대해서 먼저 알아보자.