Dash 구성 요소 배치

Dash와 Plotly로 대시보드 만들기

Alex Scriven

Data Scientist

HTML과 웹

HTML: 웹사이트 구조 언어

HTML: 집의 골조
- 객체의 위치를 정함
CSS: 방의 페인트 색
- 객체의 스타일(예: 배경색)

공식 HTML 로고. 파란 글씨로 HTML 표기

공식 CSS 로고. 입체 파란 글씨로 CSS 표기

Div와 H 태그

Dash는 dash.html로 HTML과 Python을 연결

중요한 HTML 구조(‘태그’) 두 가지:

Div 태그: 웹 구조에 중요
- 크기와 내용이 다른 여러 div 가능
H 태그: 다양한 크기의 제목(H1 > H6)

Div와 H 태그 사용

전체 div(모두 포함)
내부 div: 빨간 배경
파란 배경 div
- 내부에 H 태그
style은 무시 - CSS는 나중에 다룸!

<div>
  <div style="background-color: red; 
              width:250; height:250;">
  </div>
  <div style="background-color: lightblue; 
              width:250; height:250;">
    <h1>This box</h1>
    <h2>Another Title</h2>
  </div>
</div>

예시 표시 결과

점선 테두리의 파란 상자 이미지. 왼쪽 위 일부에 채워진 빨간 상자가 있고, 아래에 'This box'와 'another title' 텍스트가 있는 채워진 파란 상자가 있음

주의:

빨간 배경 div
H 태그가 있는 파란 배경 div

Dash에서의 예시

Dash로 HTML 예제 재현

from dash import Dash, html
app = Dash()
app.layout = [
    html.Div(style={'height':250, 'width':250, 'background-color':'red'}),
    html.Div(children=[
        html.H1("This box"),
        html.H2("Another Title")], 
        style={'background-color':'lightblue'})
    ]

레이아웃 분해하기

HTML 태그는 Dash html.()에 매핑됨
- html.Div() = <div>
- html.H1() = <h1>
마지막 div에는 children 인수가 있음
- 내부에 넣을 객체 목록
dcc.Graph()도 넣을 수 있음!

from dash import Dash, html
app.layout = [
  html.Div(
    style={'background-color':'red', 
           'height':250, 'width':250}),
  html.Div(
  children=[
      html.H1("This box"),
      html.H2("Another Title")]
    ,style={'background-color':'lightblue', 
              'height':250, 'width':250})
]

레이아웃에 그래프 추가

bar_fig_country = px.bar(ecom_sales, 
 x='Total Sales ($)', y='Country',
 color='Country', color_discrete_map=
 {'United Kingdom':'lightblue', 
 'Germany':'orange', 'France':'darkblue', 
 'Australia':'green', 'Hong Kong':'red'})
app = Dash()

app.layout = [
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

크롬 브라우저에서 x축은 총매출, y축은 국가인 가로 막대 차트 GIF. 국가별로 색이 다름. 마우스가 그래프 위에 있다가 서버 주소가 있는 URL 바로 이동함

구조 더하기

app.layout = [
  html.Div(style={
    'width':150,'height':150, 
    'background-color':'lightblue'}),
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

이전 예시와 같은 앱의 GIF. 막대 차트가 아래로 밀리고, 위에 작은 연파란 박스가 있음

연습해 봅시다!

Dash와 Plotly로 대시보드 만들기