컴포넌트 공방: Reflex 라이브러리 100
·
강의 개요
레이아웃
·
Box
·
Flex
·
Stack
·
Grid
·
Container
·
Section
·
Center
·
Spacer
·
Separator
·
Card
·
Inset
·
Aspect Ratio
·
Fragment
타이포그래피
·
Text
·
Heading
·
Link
·
Code
·
Markdown
·
Blockquote
·
Quote
·
Strong
·
Em
·
Kbd
폼
·
Button
·
Input
·
Text Area
·
Checkbox
·
Switch
·
Radio Group
·
Select
·
Slider
·
Form
·
Upload
데이터 표시
·
Badge
·
Avatar
·
Icon
·
Callout
·
List
·
Data List
·
Code Block
·
Progress
·
Spinner
·
Scroll Area
·
Moment
펼침과 전환
·
Tabs
·
Accordion
·
Segmented Control
오버레이
·
Tooltip
·
Popover
·
Hover Card
·
Dialog
·
Alert Dialog
·
Drawer
·
Dropdown Menu
·
Context Menu
·
Toast
동적 렌더링
·
Cond
·
Match
·
Foreach
·
Auto Scroll
미디어
·
Image
·
Audio
·
Video
표와 데이터 그리드
·
Table
·
Data Table
·
Data Editor
차트
·
Area Chart
·
Bar Chart
·
Line Chart
·
Composed Chart
·
Pie Chart
·
Radar Chart
·
Radial Bar Chart
·
Scatter Chart
·
Funnel Chart
·
Treemap
·
Sankey Chart
·
Error Bar
차트 부품
·
Axis
·
Cartesian Grid
·
Chart Tooltip
·
Legend
·
Label
·
Reference
·
Brush
다른 차트 라이브러리
·
Plotly
·
Pyplot
HTML 요소
·
HTML
·
HTML Text
·
HTML Layout
·
HTML Forms
·
HTML Media
·
HTML Tables
·
SVG
그 밖의 도구
·
Theme
·
Skeleton
·
Clipboard
·
Html Embed
·
Script
·
Memo
공방 주문서
두 팀 선수의 키와 몸무게를 점으로 찍고, 나이는 점의 크기로 보여서 팀마다 체격 분포를 비교하게 해 주세요.
rx.recharts.scatter_chart는 x값과 y값이 만나는 자리에 점을 찍는 산점도입니다. 두 숫자 사이의 관계(키가 크면 몸무게도 큰가)나, 무리와 동떨어진 값을 찾을 때 씁니다. 다른 직교 차트와 달리 data를 계열(rx.recharts.scatter)마다 따로 주고, 축의 data_key로 어느 값을 x·y로 쓸지 정합니다.
x축은 기본이 항목 축이므로, 숫자로 쓰려면 type_="number"를 꼭 줍니다. 예제들은 아래의 두 데이터를 씁니다.
scatterchart_a = [
{"x": 100, "y": 200, "z": 200},
{"x": 120, "y": 100, "z": 260},
{"x": 170, "y": 300, "z": 400},
{"x": 140, "y": 250, "z": 280},
{"x": 150, "y": 400, "z": 500},
{"x": 110, "y": 280, "z": 200},
]
scatterchart_b = [
{"x": 200, "y": 260, "z": 240},
{"x": 240, "y": 290, "z": 220},
{"x": 190, "y": 290, "z": 250},
{"x": 198, "y": 250, "z": 210},
{"x": 180, "y": 280, "z": 260},
{"x": 210, "y": 220, "z": 230},
]
rx.recharts.scatter_chart(
rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9)),
rx.recharts.x_axis(data_key="x", type_="number"),
rx.recharts.y_axis(data_key="y"),
width="100%",
height=280,
)점의 모양(shape), 범례 아이콘(legend_type), 점을 잇는 선(line)과 그 선의 방식(line_type)을 바꿔 보세요. line_type="fitting"은 점들을 지나는 회귀 직선을 그립니다.
속성 바꿔 보기
color
shape
legend_type
line
line_type
rx.recharts.scatter_chart(
rx.recharts.scatter(
data=scatterchart_a,
name="A",
fill=rx.color("indigo", 9),
shape="circle",
legend_type="circle",
line=False,
line_type="joint",
),
rx.recharts.x_axis(data_key="x", type_="number"),
rx.recharts.y_axis(data_key="y"),
rx.recharts.legend(),
width="100%",
height=280,
)| 속성 | 값 | 기본값 | 쓰임 |
|---|---|---|---|
scatter_chart(width=, height=, margin=) | 숫자·퍼센트 / dict | "100%" / 5씩 | 크기와 여백. data는 여기 없음 |
scatter(data=) | dict의 리스트 | 없음 | 이 계열의 점들 |
scatter(name=) | 문자열 | 없음 | 범례·툴팁에 보일 이름 |
scatter(fill=) | 색 | accent 9 | 점 색 |
scatter(shape=) | "circle" "square" "cross" "diamond" "star" "triangle" "wye" | "circle" | 점 모양 |
scatter(legend_type=) | 위 모양들, "line" "rect" "none" … | "circle" | 범례 아이콘 |
scatter(line=, line_type=) | True / False, "joint" "fitting" | False / "joint" | 점을 잇는 선 |
scatter(x_axis_id=, y_axis_id=, z_axis_id=) | 문자열·숫자 | 0 | 어느 축에 붙을지 |
scatter(is_animation_active=, animation_duration=, …) | 등장 애니메이션 | ||
z_axis(data_key=, range=, name=, unit=) | 열쇠, [최소, 최대] 픽셀 | [60, 400] | 세 번째 값을 점 크기로 |
| 이벤트 | on_click on_mouse_enter on_mouse_leave … | 차트와 scatter 모두 받음 |
scatter를 계열마다 하나씩 넣고, 각각 data와 name, 색을 줍니다. 범례에는 name이 보입니다. z_axis를 넣으면 데이터의 세 번째 값(z)이 툴팁에 함께 나오고 점 크기에도 쓰입니다. 여러 축에 나눠 붙이는 x_axis_id, y_axis_id는 영역 차트 페이지에서 다룹니다.
scatterchart_a = [
{"x": 100, "y": 200, "z": 200},
{"x": 120, "y": 100, "z": 260},
{"x": 170, "y": 300, "z": 400},
{"x": 140, "y": 250, "z": 280},
{"x": 150, "y": 400, "z": 500},
{"x": 110, "y": 280, "z": 200},
]
scatterchart_b = [
{"x": 200, "y": 260, "z": 240},
{"x": 240, "y": 290, "z": 220},
{"x": 190, "y": 290, "z": 250},
{"x": 198, "y": 250, "z": 210},
{"x": 180, "y": 280, "z": 260},
{"x": 210, "y": 220, "z": 230},
]
rx.recharts.scatter_chart(
rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B"),
rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
rx.recharts.x_axis(data_key="x", type_="number"),
rx.recharts.y_axis(data_key="y"),
rx.recharts.z_axis(data_key="z", range=[60, 400], name="score"),
rx.recharts.legend(),
rx.recharts.graphing_tooltip(),
width="100%",
height=300,
)색만으로 무리를 나누면, 색을 구분하기 어려운 사람에게는 같은 무리로 보일 수 있습니다. 계열마다 shape도 다르게 주면 흑백에서도 구분됩니다. 범례 아이콘도 그 모양을 따라갑니다.
scatterchart_a = [
{"x": 100, "y": 200, "z": 200},
{"x": 120, "y": 100, "z": 260},
{"x": 170, "y": 300, "z": 400},
{"x": 140, "y": 250, "z": 280},
{"x": 150, "y": 400, "z": 500},
{"x": 110, "y": 280, "z": 200},
]
scatterchart_b = [
{"x": 200, "y": 260, "z": 240},
{"x": 240, "y": 290, "z": 220},
{"x": 190, "y": 290, "z": 250},
{"x": 198, "y": 250, "z": 210},
{"x": 180, "y": 280, "z": 260},
{"x": 210, "y": 220, "z": 230},
]
rx.recharts.scatter_chart(
rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 9), name="A"),
rx.recharts.scatter(data=scatterchart_b, fill=rx.color("teal", 9), name="B", shape="triangle"),
rx.recharts.scatter(
data=[
{"x": 130, "y": 150},
{"x": 160, "y": 180},
{"x": 220, "y": 170},
{"x": 250, "y": 200},
{"x": 175, "y": 130},
],
fill=rx.color("amber", 9),
name="C",
shape="star",
),
rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
rx.recharts.x_axis(data_key="x", type_="number"),
rx.recharts.y_axis(data_key="y"),
rx.recharts.legend(),
rx.recharts.graphing_tooltip(),
width="100%",
height=300,
)z_axis(data_key="z", range=[60, 400])는 z 값이 가장 작은 점을 60, 가장 큰 점을 400 크기(넓이)로 그립니다. x·y에 더해 세 번째 값을 점 크기로 보여 주는 것이 버블 차트입니다. 축의 name은 툴팁에 보일 이름입니다.
scatterchart_a = [
{"x": 100, "y": 200, "z": 200},
{"x": 120, "y": 100, "z": 260},
{"x": 170, "y": 300, "z": 400},
{"x": 140, "y": 250, "z": 280},
{"x": 150, "y": 400, "z": 500},
{"x": 110, "y": 280, "z": 200},
]
scatterchart_b = [
{"x": 200, "y": 260, "z": 240},
{"x": 240, "y": 290, "z": 220},
{"x": 190, "y": 290, "z": 250},
{"x": 198, "y": 250, "z": 210},
{"x": 180, "y": 280, "z": 260},
{"x": 210, "y": 220, "z": 230},
]
rx.recharts.scatter_chart(
rx.recharts.scatter(data=scatterchart_a, fill=rx.color("accent", 8)),
rx.recharts.x_axis(data_key="x", name="x", type_="number"),
rx.recharts.y_axis(data_key="y", name="y", type_="number"),
rx.recharts.z_axis(data_key="z", range=[60, 400], name="size"),
rx.recharts.graphing_tooltip(),
width="100%",
height=300,
)콜라츠 추측의 수열을 점으로 찍습니다. 짝수면 2로 나누고 홀수면 3을 곱해 1을 더하기를 1이 될 때까지 되풀이합니다. 숫자를 넣고 제출하면 핸들러가 수열을 새로 계산해 data에 넣고, 차트가 다시 그려집니다. 처음 값은 15에서 시작합니다.
Start: 15
def scatterchart_collatz(n: int) -> list[dict[str, int]]:
rows = []
for step in range(400):
rows.append({"x": step, "y": n})
if n == 1:
break
n = n // 2 if n % 2 == 0 else 3 * n + 1
return rows
class ScatterChartCollatzState(rx.State):
start: int = 15
data: list[dict[str, int]] = scatterchart_collatz(15)
@rx.event
def compute(self, form_data: dict):
try:
n = int(form_data.get("start") or 1)
except ValueError:
n = 1
self.start = min(max(n, 1), 1_000_000)
self.data = scatterchart_collatz(self.start)
rx.vstack(
rx.text("Start: ", ScatterChartCollatzState.start, size="2"),
rx.recharts.scatter_chart(
rx.recharts.scatter(data=ScatterChartCollatzState.data, fill=rx.color("accent", 9)),
rx.recharts.x_axis(data_key="x", type_="number"),
rx.recharts.y_axis(data_key="y", type_="number"),
rx.recharts.graphing_tooltip(),
width="100%",
height=260,
),
rx.form.root(
rx.hstack(
rx.input(placeholder="Enter a number", name="start", type="number"),
rx.button("Compute", type="submit"),
),
on_submit=ScatterChartCollatzState.compute,
reset_on_submit=True,
),
width="100%",
)키를 x, 몸무게를 y, 나이를 z_axis의 점 크기로 썼습니다. 두 팀은 색과 모양을 함께 다르게 하고, 축에 unit과 name을 주어 툴팁이 "height: 170cm"처럼 읽히게 합니다. x축은 domain으로 150~190만 보여 점이 넓게 퍼지게 했습니다.
rx.recharts.scatter_chart(
rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
rx.recharts.scatter(
data=[
{"height": 160, "weight": 52, "age": 21},
{"height": 165, "weight": 58, "age": 34},
{"height": 170, "weight": 63, "age": 28},
{"height": 158, "weight": 49, "age": 45},
{"height": 175, "weight": 70, "age": 39},
],
name="Team A",
fill=rx.color("accent", 9),
),
rx.recharts.scatter(
data=[
{"height": 172, "weight": 66, "age": 25},
{"height": 180, "weight": 78, "age": 31},
{"height": 168, "weight": 61, "age": 52},
{"height": 185, "weight": 82, "age": 27},
{"height": 177, "weight": 74, "age": 44},
],
name="Team B",
fill=rx.color("teal", 9),
shape="triangle",
),
rx.recharts.x_axis(data_key="height", name="height", unit="cm", type_="number", domain=[150, 190]),
rx.recharts.y_axis(data_key="weight", name="weight", unit="kg", type_="number"),
rx.recharts.z_axis(data_key="age", name="age", range=[60, 300]),
rx.recharts.graphing_tooltip(),
rx.recharts.legend(),
width="100%",
height=320,
)공방 노트
data는 차트가 아니라 scatter마다 준다. x·y는 축의 data_key로 고른다.
숫자 x축은 x_axis(type_="number")를 꼭 준다.
무리마다 scatter 하나. name은 범례, shape는 점 모양(색과 함께 쓰면 더 잘 구분된다).
z_axis(data_key=, range=[최소, 최대])로 세 번째 값을 점 크기로 보이면 버블 차트.
line=True와 line_type="fitting"으로 추세선을 긋는다.
새 교시·새 강의 소식 받기
이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.
R
ReflexKR
눌러 보며 배우는 파이썬과 Reflex. 모든 예제는 Reflex 0.10.0에서 직접 실행해 확인했습니다.
ReflexKR은 배너 광고 없이 무료로 운영돼요. 도움이 되셨다면 커피 한 잔으로 응원해 주세요.
© 2026 ReflexKR · Since 2026 · CC BY-NC 4.0
질문과 답변
이 교시에서 궁금한 점을 남겨 주세요. 모든 언어 페이지의 질문이 함께 모입니다.