ReflexKR

AI의 일기장 Reflex 공식 문서

컴포넌트 공방: Reflex 라이브러리 100

강의 개요

레이아웃

Box

Flex

Stack

Grid

Container

Section

Center

Spacer

Separator

Card

Inset

Aspect Ratio

Fragment

타이포그래피

Text

Heading

Link

Code

Markdown

Blockquote

Quote

Strong

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

컴포넌트 공방: Reflex 라이브러리 100

차트

Treemap

rx.recharts.treemap

공식 문서

공방 주문서

휴대폰 저장 공간을 사진·영상·앱이 얼마나 차지하는지, 넓이로 비교되는 그림 하나로 보여 주세요.

rx.recharts.treemap은 전체를 하나의 사각형으로 보고, 각 항목을 값에 비례하는 넓이의 작은 사각형으로 나눠 채우는 차트입니다. 항목이 많아 파이 차트로는 조각이 너무 작아질 때, 또는 분류 안에 하위 분류가 있는 계층 데이터를 보여 줄 때 씁니다.

다른 차트와 달리 자식 부품 없이 treemap 하나로 그립니다. data_key는 넓이가 될 값, name_key는 사각형에 적힐 이름이고, 데이터의 "fill"이 사각형 색이 됩니다.

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

속성 바꿔 보기

같은 데이터에 크기 값이 두 가지(size, visits) 있습니다. data_key를 바꾸면 넓이를 정하는 기준이 바뀌어 사각형 배치가 새로 계산됩니다. 애니메이션 방식도 함께 바꿔 보세요.

속성 바꿔 보기

data_key

animate

easing

rx.recharts.treemap(
    data=treemap_data,
    data_key="size",
    name_key="name",
    is_animation_active=True,
    animation_easing="ease",
    width="100%",
    height=300,
)

data_key를 바꿀 때마다 새 배치로 다시 그려집니다. is_animation_active를 끄면 바로 바뀝니다.

속성	값	기본값	쓰임
`data`	dict의 리스트	없음	항목들. `"children"`으로 하위 항목, `"fill"`로 색
`data_key`	문자열	`"value"`	넓이가 될 값의 열쇠
`name_key`	문자열	`"name"`	사각형에 적힐 이름의 열쇠
`aspect_ratio`	숫자	자동	사각형들이 맞추려는 가로:세로 비율
`width`, `height`	숫자·퍼센트	`"100%"`	크기. 높이는 숫자로
`is_animation_active`	`True` / `False`	`True`	애니메이션 켜기
`animation_begin`, `animation_duration`	밀리초	`0` / `1500`	시작 지연, 걸리는 시간
`animation_easing`	`"ease"` `"ease-in"` `"ease-out"` `"ease-in-out"` `"linear"`	`"ease"`	속도 변화
`on_animation_start`, `on_animation_end`	이벤트		애니메이션 시작·끝
`on_click` `on_mouse_enter` `on_mouse_leave` …	이벤트		마우스 이벤트

가로세로 비율 (aspect_ratio)

aspect_ratio는 각 사각형이 가까워지려는 가로:세로 비율입니다. 1이면 되도록 정사각형에 가깝게, 4면 가로로 긴 사각형이 되도록 나눕니다. 정사각형에 가까울수록 넓이를 눈으로 비교하기 쉽고, 이름도 잘 들어갑니다. 0.10에서는 정수만 받습니다.

treemap_data = [
    {"name": "Docs", "size": 2400, "visits": 900, "fill": rx.color("accent", 8)},
    {"name": "Blog", "size": 4567, "visits": 3100, "fill": rx.color("blue", 8)},
    {"name": "Shop", "size": 1398, "visits": 4200, "fill": rx.color("green", 8)},
    {"name": "Home", "size": 9800, "visits": 5000, "fill": rx.color("orange", 8)},
    {"name": "Help", "size": 3908, "visits": 1200, "fill": rx.color("red", 8)},
    {"name": "Jobs", "size": 4800, "visits": 600, "fill": rx.color("purple", 8)},
]


rx.flex(
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=1,
        width="100%",
        height=220,
    ),
    rx.recharts.treemap(
        data=treemap_data,
        data_key="size",
        name_key="name",
        aspect_ratio=4,
        width="100%",
        height=220,
    ),
    direction="column",
    spacing="4",
    width="100%",
)

계층 데이터 (children)

항목에 "children" 리스트를 넣으면 그 안에서 다시 나뉩니다. 부모의 넓이는 자식 값의 합이 되고, 같은 부모의 자식들은 한 덩어리 안에 모입니다. 아래는 식료품 세 분류 안에 품목이 들어 있는 예제입니다. 같은 분류는 같은 색의 진하기로 칠해 덩어리가 보이게 합니다.

rx.recharts.treemap(
    data=[
        {
            "name": "Fruit",
            "children": [
                {"name": "Apple", "size": 1200, "fill": rx.color("red", 8)},
                {"name": "Pear", "size": 600, "fill": rx.color("red", 6)},
                {"name": "Plum", "size": 400, "fill": rx.color("red", 5)},
            ],
        },
        {
            "name": "Veg",
            "children": [
                {"name": "Kale", "size": 900, "fill": rx.color("green", 8)},
                {"name": "Leek", "size": 500, "fill": rx.color("green", 6)},
            ],
        },
        {
            "name": "Grain",
            "children": [
                {"name": "Rice", "size": 1100, "fill": rx.color("amber", 8)},
                {"name": "Oat", "size": 300, "fill": rx.color("amber", 6)},
            ],
        },
    ],
    data_key="size",
    name_key="name",
    width="100%",
    height=300,
)

애니메이션 이벤트

on_animation_start와 on_animation_end는 그리는 애니메이션이 시작하고 끝날 때 불립니다. 아래 글자는 애니메이션이 도는 동안 "Drawing..."이었다가, 2.5초 뒤 끝나면 "Done"으로 바뀌고 괄호 안의 횟수가 하나 늘어납니다.

Animation: Waiting (0)

class TreemapEventState(rx.State):
    status: str = "Waiting"
    rounds: int = 0

    @rx.event
    def started(self):
        self.status = "Drawing..."

    @rx.event
    def ended(self):
        self.status = "Done"
        self.rounds += 1


rx.vstack(
    rx.text("Animation: ", TreemapEventState.status, " (", TreemapEventState.rounds, ")", size="2"),
    rx.recharts.treemap(
        data=[
            {"name": "A", "size": 5, "fill": rx.color("accent", 8)},
            {"name": "B", "size": 3, "fill": rx.color("teal", 8)},
            {"name": "C", "size": 2, "fill": rx.color("orange", 8)},
        ],
        data_key="size",
        name_key="name",
        animation_duration=2500,
        on_animation_start=TreemapEventState.started,
        on_animation_end=TreemapEventState.ended,
        width="100%",
        height=240,
    ),
    width="100%",
)

주문서 완성

저장 공간의 다섯 항목을 넓이로 그리고, 가장 작은 "Other"는 회색으로 힘을 뺐습니다. aspect_ratio=2로 넓은 화면에 맞는 가로로 조금 긴 사각형을 만들고, 애니메이션은 짧게 줄였습니다.

rx.recharts.treemap(
    data=[
        {"name": "Photos", "size": 48, "fill": rx.color("indigo", 9)},
        {"name": "Videos", "size": 31, "fill": rx.color("teal", 9)},
        {"name": "Apps", "size": 12, "fill": rx.color("orange", 9)},
        {"name": "Music", "size": 6, "fill": rx.color("plum", 9)},
        {"name": "Other", "size": 3, "fill": rx.color("gray", 8)},
    ],
    data_key="size",
    name_key="name",
    aspect_ratio=2,
    animation_duration=800,
    width="100%",
    height=280,
)

공방 노트

treemap(data=…, data_key=…, name_key=…) 하나로 그린다. 자식 부품이 필요 없다.
사각형 색은 데이터의 "fill", 하위 분류는 "children" 리스트.
aspect_ratio(정수)로 사각형 모양을 정한다. 1에 가까울수록 비교가 쉽다.
애니메이션은 is_animation_active·animation_duration·animation_easing, 끝나면 on_animation_end.
항목이 몇 개 안 되면 파이·막대 차트가 더 읽기 쉽다.

← 이전

차트 · Funnel Chart

차트 · Sankey Chart

새 교시·새 강의 소식 받기

이 강의에 새 교시가 더해지거나 이어지는 강의가 열리면 이메일로 알려 드려요.