인터랙티브 컴포넌트

Dash와 Plotly로 대시보드 만들기

Alex Scriven

Data Scientist

인터랙티브성 강화

유용한 인터랙티브 컴포넌트:
- dcc.Checklist() = 체크박스
- dcc.RadioItems() = 라디오 버튼
- dcc.Slider() / dcc.RangeSlider() = 슬라이더 선택기
- dcc.DatePickerSingle() / dcc.DatePickerRange() = 날짜용 슬라이더와 유사

슬라이더

슬라이더: 하나의 값 드래그 선택

범위 슬라이더: 두 값 드래그 선택

참고: 콜백에 연결 가능
- 플롯 또는 컴포넌트 업데이트

슬라이더:

검은 배경의 파란 슬라이더 GIF. 아래에 선택된 값이 표시됩니다. 마우스가 슬라이더를 위로 움직이면 표시 값이 증가합니다.

범위 슬라이더:

검은 배경의 파란 범위 슬라이더 GIF. 아래에 선택된 두 값이 표시됩니다. 마우스가 양쪽 손잡이를 움직이면 값이 변경됩니다.

Dash의 슬라이더

dcc.Slider(

    min=10,
    max=50,

    value=45,

    step=5,

    vertical=False

)

핵심 인자:

min/max : 슬라이더 범위
value : 시작 값
step : 눈금 간격
vertical : 수평/수직 설정

Dash의 날짜 선택기

DatePickerSingle: 단일 날짜 선택

dcc.DatePickerSingle(
  date=date(2025, 7, 1),
  initial_visible_month=datetime.now(),
)

date = 시작 선택값
initial_visible_month = 팝업에 보이는 월
min_date_allowed, max_date_allowed로 범위 제한 가능

일반적인 날짜 선택 예시 GIF. 날짜 입력 필드에 2025년 7월 1일이 표시됩니다. 클릭하면 달력이 열리고 2025년 7월 2일을 선택하면 달력이 닫히며 표시 날짜가 변경됩니다.

날짜 범위 선택기

DatePickerSingle와 유사함

dcc.DatePickerRange(
initial_visible_month=datetime.now(),
start_date=date(2025, 7, 1),
end_date=date(2025, 7, 16),
)

초기 start_date와 end_date 설정

일반적인 날짜 범위 선택 예시 GIF. 7월 2025의 두 날짜가 선택된 두 개의 입력 필드가 있습니다. 두 번째 입력을 클릭하면 달력이 열리고, 현재 범위의 모든 날이 초록색으로 표시됩니다. 새 범위를 선택하면 날짜가 변경됩니다.

플롯 업데이트

# dcc.DatePickerSingle(id='sale_date')
# dcc.Graph(id='sales_cat')

@callback(
    Output(component_id='sales_cat', 
           component_property='figure'),
    Input(component_id='sale_date', 
           component_property='date'))

def update_plot(input_date):
    sales = ecom_sales.copy(deep=True)

    if input_date:
        sales = sales[sales['InvoiceDate'] == input_date]

    # Create fig
    return fig

Dash에서 날짜 선택기를 사용하는 GIF. 왼쪽 상자는 'Controls' 제목과 'Sale Date Select' 제목의 날짜 선택기를 포함하며, 04/11/2011이 선택되어 있습니다. 오른쪽에는 x축이 "Total Sales ($)", y축이 "Major Category"인 막대 그래프가 있습니다. 아래에는 "Daily Sales by Major Category" 문구가 있고, 그래프 제목은 "Sales on 2011-04-11"입니다. 마우스가 날짜 선택기에서 2011년 4월 11일을 선택하자 막대 그래프와 제목이 해당 날짜로 변경됩니다.

연습해 봅시다!

Dash와 Plotly로 대시보드 만들기