Plotly에서 Dash로

Dash와 Plotly로 대시보드 만들기

Alex Scriven

Data Scientist

첫 번째 Dash 앱

완성된 Dash 앱:

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)

Python 기능 사용 가능
- 예: 문자열 보간 print("f{my_variable}")

주요 Dash 임포트

from dash import Dash, dcc

Dash는 앱을 초기화
dcc는 그래프·입력 등 UI 구성요소 제공
- 이번 앱에는 하나의 컴포넌트
- 이후 더 많은 컴포넌트 사용

앱 레이아웃

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

Dash()로 앱 객체 생성
app.layout 설정
- dcc.Graph() 사용
  - figure = 렌더링할 Plotly 그림
  - id = 이후 콜백에 중요

앱 실행

if __name__ == '__main__':
    app.run(debug=True)

커맨드라인에서 스크립트 실행
- 예: 커맨드라인에서 python my_app.py
debug는 테스트 시 피드백 제공

우리의 앱

Google Chrome과 같은 웹 브라우저로 접속
서버 실행 중 .py 파일을 수정·저장하면 브라우저에 실시간 반영

Dash 앱 실행 후 터미널 화면 스크린샷. 검은 배경의 흰 텍스트로 스크립트에 언급된 세부 정보가 표시됨.

브라우저에서 본 앱

가로 막대형 차트 GIF: x축은 총 매출, y축은 국가. 이전 레슨의 그래프와 동일하나 Chrome 브라우저에서 서버 주소가 URL 바에 보임. 마우스가 그래프 위를 호버하고 URL 바를 클릭해 서버 존재를 보여줌.

DataCamp에서의 Dash

다른 DataCamp 연습과의 차이점:
- 연습 상단에 설정 코드가 있음
- 줄 단위가 아닌 한 번에 실행
- (훨씬) 긴 코드
완전한 대시보드 동작 (창을 확장해 확인)

Dash 코딩 연습 상단 스크린샷. 실행 후 앱을 전체 화면으로 볼 수 있게 HTML 출력을 확장하는 버튼이 강조됨.

연습해 봅시다!

Dash와 Plotly로 대시보드 만들기