Dash + Plotly 사용법/튜토리얼
Programming Set-Up

Dash + Plotly 사용법/튜토리얼

일시불

Table of Contents

이 포스팅은 숙명여대에서 진행한 빅데이터캠프의 데이터 시각화 과정의 강의자료 중 일부입니다. 강의 의뢰는  아래 카톡으로 연락주세요.
서울대 현직자에게 배우는 코딩/과제/프로젝트
❤️모든 코딩 문제 해결! #파이썬 #데이터분석 #코딩 #프로그래밍 #컴공과제 #코딩과외

dash를 시작합니다

dash는 프론트엔드로 plotly.js와 React를 사용하고 백엔드로 Flask를 사용하는 데이터 시각화 프레임워크입니다. dash를 사용하면 파이썬 하나만으로 데이터 분석 결과를 간편하게 웹 서비스로 구현할 수 있습니다.

Manufacturing SPC Dashboard

HTML 기초

dash 는 HTML을 사용해 화면을 구성합니다. 여기에서는 HTML의 기본 문법을 소개합니다.

Untitled

위에서 보신 멋진 스케치에서 해골 그림을 잘 기억하세요. 웹에서 HTML(HyperText Markup Language)은 데이터의 전체적인 "골격"을 나타냅니다. HTML은 골격을 나타낸다는 의미에 부합하는 구조를 가지고 있습니다. 즉 "head", "body", "footer" 3개의 태그로 구분됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
💡 CSS(Cascade Style Sheet)는 골격 외부를 꾸미는 역할을 하고, 실제로 움직이도록 하는 건 자바스크립트가 담당합니다.

index.html

이제 VS Code에서 index.html 이라는 파일을 하나 생성합니다. 이 파일은 모든 웹사이트의 메인 페이지가 되는 파일입니다. 만일 우리가 https://google.com이라는 주소로 접속하면, 실제로는 https://google.com/index.html로 접속하는 것과 동일합니다. 직접 해보세요!

Untitled
Untitled

이제 html 파일에 아래 코드를 입력합니다.

<!DOCTYPE html> # Standard type document
<html></html> # root element

HTML에서는 코드를 <> 와 </>단위로 구분하고, <> 가 한번 나오면 반드시 그에 해당하는 </> 가 쌍으로 따라와야 합니다. 이를 관용적으로 "태그를 열고 닫는다" 라고 말합니다.

이제 이 파일을 브라우저에서 열면 지금은 빈 화면이지만,  HTML 코드가 브라우저에 렌더링되는 것을 볼 수 있습니다.

<html> 태그 아래에 <head> 태그를 아래와 같이 입력합니다.

<head>
	<title>Document</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

head 태그는 웹페이지의 중요한 정보들을 담고 있는 영역입니다. 이를 메타데이터(metadata)라고 부르며, <meta> 태그로 표기합니다. 위 head 태그에서 알 수 있는 정보는 다음과 같습니다.

  • 웹 페이지의 타이틀(<title>)
  • 웹 페이지의 인코딩 방식("utf-8")
  • 브라우저 호환성 정보
  • Viewport 정보. 웹 페이지의 콘텐츠가 화면에 어떻게 표시될지를 정의합니다.
  • 나중에 모바일 화면을 다루게 될 때 Viewport를 자세히 배웁니다.

body

이제 head 태그 다음에 body 태그를 넣습니다.

<!DOCTYPE html>
<html lang="en">
		<head>
		    <meta charset="UTF-8">
		    <meta http-equiv="X-UA-Compatible" content="IE=edge">
		    <meta name="viewport" content="width=300, initial-scale=1.0">
		    <title>Document</title>
		</head>
		<body>
		    
		</body>
</html>

body 태그는 화면에 표시되는 요소들을 담고 있습니다. 여기서 기본적인 HTML 엘리먼트 몇 가지를 소개합니다.

먼저 헤딩 태그입니다. 헤딩은 텍스트 요소의 수준을 나타냅니다. 헤딩 1부터 6까지 순서가 커질수록 아래 수준의 요소를 의미합니다. 이를 Semantic markup 이라고 부릅니다. 이 시맨틱 마크업이 중요한 이유는 웹페이지의 구조를 직관적으로 파악하기 쉽기 때문입니다. 즉 헤딩 숫자가 낮을수록 가장 핵심적인 내용을 포함하고 있다는 뜻입니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

다음으로 <p> 태그는 문단을 나타냅니다. 그리고 이미지를 표시하는 태그는 <img> 로, 닫는 태그가 필요 없습니다. src 라는 속성이 있어서 여기에 이미지 주소를 담기 때문입니다. 속성에 관해서는 다음 섹션에서 자세히 다루겠습니다.

마지막으로 <div> 태그는 어떤 요소를 논리적으로 구분하기 위한 태그입니다. 실제로 화면에는 아무것도 표시되지 않지만, div 태그 안에 들어가 있는 요소들을 묶어줌으로써 이해하기 쉬운 코드를 만듭니다.

위의 내용을 모두 포함한 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=300, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>

    <div id="article">
        <p>This is paragraph.</p>
        <img
            src="https://www.apple.com/105/media/us/macbook-pro-16/2019/fa0563a0-8534-4e01-a62a-081b87805fea/anim/hero/large/large_0118.jpg">
    </div>
</body>

</html>
💡 VS Code에서는 매우 편리한 기능을 제공합니다. html 파일에 `!` 를 입력하고 엔터를 입력하면 표준 HTML 코드를 만들어줍니다.

img 태그

위에서 img 태그에 대해서 짧게 설명하고 넘어갔는데요. 지금까지 배운 HTML 태그들은 <something> 과 같이 표현되었습니다. 그런데 웹에 이미지를 표시하기 위해서 만든 img 태그는, 이미지를 어디서 가져와야 할지를 나타내는 src 라는 부분이 들어있습니다. 이를 속성(attribute)이라고 부릅니다. 속성은 태그 내부에 어떤 값을 넣고자 할때 사용하는 문법입니다. 태그마다 어떤 속성을 가지고 있고, 어떤 값을 넣을 수 있는지는 웹 표준을 다루고 있는 MDN에서 찾을 수 있습니다.

HTML: Hypertext Markup Language | MDN

MDN에서 우측 상단의 검색창에 찾아보고 싶은 태그를 입력하면 됩니다. 우리는 img 태그를 찾아보겠습니다.

Untitled

특성(속성) 섹션에서 우리가 원하는 정보를 찾을 수 있습니다.

Untitled

예를 들어 이미지의 크기를 바꾸려면 width 의 값을 %로 입력하면 됩니다. img 태그에 width=10% 를 추가해 보세요.

ol/ul/li

다음으로 다룰 태그는 목록을 만드는 태그입니다. 여기서 말하는 목록(list)란 다음과 같은 두 가지 경우가 있습니다.

  1. 순서가
  2. 있는
  3. 목록
  • 순서가
  • 없는
  • 목록

각각은 다음과 같이 만들 수 있습니다. (HTML 버튼을 눌러보세요)

ul 은 순서가 없는 목록, Unordered list입니다. ol 은 순서가 있는 목록, Ordered list 입니다. 둘 다 하위 태그로 li 를 가지고 있습니다. 이와 같은 구조를 부모-자식 관계라고 부르고, ol/ul 태그를 부모 태그, li 태그를 자식 태그라고 부릅니다.

ol 태그의 경우, 안에 있는 li 태그의 갯수에 맞추어 목록의 순서가 늘어나기 때문에 편리합니다.

a 태그

마지막으로 다룰 태그는 앵커(anchor) 태그인 a 태그입니다. 이 태그는 다른 태그에 링크를 걸 수 있는 태그입니다. 아래 예제에서 Google이라는 텍스트와 애플 로고를 누르면 각 회사의 홈페이지로 이동합니다.

a 태그는 href 라는 속성에 링크를 걸 수 있습니다. 참고로 href 란 Hypertext reference라는 뜻으로, HTML의 Hypertext와 같은 단어입니다. 웹은 항상 이 링크를 이용해서 다른 페이지로 이동하기 때문에, 앵커 태그야말로 웹의 가장 핵심적인 태그라고 할 수 있습니다.

프로젝트 파일 만들기

현재 폴더에 index.html 을 만들고, 아래 코드를 입력해주세요.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

그 다음 브라우저에서 index.html 파일을 열어줍니다.

CSS 기초

CSS(Cascading Style Sheets)는 웹 페이지를 보기 좋게 만드는 역할을 합니다. "보기 좋게"라는 말은 사용자가 좀더 쉽고 편리하게 웹 페이지를 사용할 수 있도록 도와준다는 의미입니다. 또한 CSS를 사용하면 반응형 웹 디자인을 만들거나 애니메이션을 추가해 좀더 역동적인 웹 페이지를 만드는 것도 가능합니다.

External CSS

index.css 파일을 현재 폴더에 만든 다음,  아래와 같이 index.html 파일에서 css를 불러와 주겠습니다.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="index.css">
...

CSS rules

CSS는 다음과 같은 모양으로 코드를 작성합니다. 가장 먼저 스타일이 적용될 HTML 요소를 적고, {} 안에 스타일을 표기하면 됩니다.

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

이렇게 표현된 CSS 코드의 각 부분을 부르는 명칭은 다음과 같습니다.

  • selector: ul {} → <ul>
  • property name: font-family
  • value: helvetica

Selectors

스타일이 적용될 요소를 지정하는 방법은 총 3가지가 있습니다.

  • 요소 태그
  • class name
  • id

아래 예제에서는 각 방법을 예시로 보여주고 있습니다.

  • .list : 클래스 selector
  • #msg : id selector
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: helvetica;
}

클래스란, 같은 계층에 존재하는 요소들을 묶어주기 위해 사용됩니다.우리의 HTML 코드 예시를 살펴봅시다.

    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>

첫 번째와 두번째의 <li>는 class="list" 를 가지고 있지만 세번째는 가지고 있지 않습니다.  위 CSS를 index.css 에 추가한 다음, 실제 브라우저 화면을 보면 아래와 같이 나타납니다.

id는 어떤 요소를 특정하기 위해 사용되는 식별자입니다. 태그 이름이 같더라도, id가 다르면 스타일을 다르게 주는 것이 가능합니다.

다시 브라우저 화면을 살펴보면, 폰트가 요소마다 다르게 나타나는 것을 알 수 있습니다.  body 에서 정의한 스타일이 h1 에도 적용되는 것을 눈치채셨나요? 이처럼 CSS는 "연쇄적으로(cascade)" 적용됩니다. 반면, li 는 명시적으로 CSS를 정의해주었기 때문에 다르게 나타나는 것을 알 수 있습니다!

적용된 CSS 찾아보기

  1. 브라우저를 열고 개발자 도구를 실행합니다. F12 또는 Ctrl+Shift+I 또는 맥의 경우 Option+Command+I를 입력하면 됩니다.
  2. 요소 Elements 탭을 선택합니다.
  3. 스타일 Styles 탭을 선택합니다.
  4. HTML 요소들을 몇 개 선택해보고, 각각에 적용된 CSS를 확인합니다.
  5. <li> 요소의 경우, font-family: helvetica;가 적용되어 <body> 요소와는 스타일이 다른 것을 확인할 수 있습니다.

예제 앱 실행하기

pip3 install dash

이제 드디어 dash로 넘어왔습니다. dash는 plotly 그래프를 웹에서 표현할 수 있도록 하는 라이브러리입니다. plotly로 만든 fig 그래프들을 사용해 웹페이지를 만들어줍니다. 여기서부터는 노트북이 아닌 파이썬 모듈(app.py ) 파일을 만들어 실습을 진행해주세요.

💡 아래 예제 코드를 보면, `dash.Dash` 클래스가 플라스크의 `Flask` 객체와 유사하게 서버 인스턴스 `app` 을 생성하는 패턴을 가지고 있습니다.

먼저 필요한 패키지를 불러옵니다.

from dash import dcc, html, Dash
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

그리고 샘플 데이터셋을 만들어 보겠습니다.

df = pd.DataFrame(
    {
        "Fruit": [
            "Apples",
            "Oranges",
            "Bananas",
            "Apples",
            "Oranges",
            "Bananas",
        ],
        "Amount": [4, 1, 2, 2, 4, 5],
        "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"],
    }
)

다음으로는 plotly express의 바 그래프를 사용해 위 데이터를 나타냅니다.

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

여기서부터가 중요한데, dash는 HTML 요소들을 app.layout에 넣어서 화면 배치를 구성합합니다. 이때 일반 HTML 요소가 아닌 plotly 그래프를 추가하려면 dcc.Graph 클래스를 이용합니다.

app.layout = html.Div(
    children=[
        html.H1(children='Hello Dash'),
        html.Div(
            children='''
        Dash: A web application framework for your data.
    '''
        ),
        dcc.Graph(id='example-graph', figure=fig),
    ]
)

마지막으로 서버를 실행하는 코드를 추가합니다. 포트 번호를 별도로 지정할 수도 있지만, 그대로 실행하면 [https://localhost:8050](http://localhost:8050) 에서 서버가 시작됩니다. 여기서 debug=True 를 설정하면, 디버그 모드로 서버가 실행됩니다. 서버 성능이 떨어지고 보안에 취약해지지만, 대신 파이썬 코드가 수정될 때마다 화면이 자동으로 업데이트되기 때문에 편리합니다.

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

지금까지의 전체 코드는 다음과 같습니다.

from dash import dcc, html, Dash
import plotly.express as px
import pandas as pd

app = Dash(__name__)

df = pd.DataFrame(
    {
        "Fruit": [
            "Apples",
            "Oranges",
            "Bananas",
            "Apples",
            "Oranges",
            "Bananas",
        ],
        "Amount": [4, 1, 2, 2, 4, 5],
        "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"],
    }
)

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

app.layout = html.Div(
    children=[
        html.H1(children='Hello Dash'),
        html.Div(
            children='''
        Dash: A web application framework for your data.
    '''
        ),
        dcc.Graph(id='example-graph', figure=fig),
    ]
)

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

이제 [app.py](http://app.py) 를 실행합니다.

$ python app.py
...Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)

코드를 실행하면 웹브라우저에 아래와 같은 화면이 나타납니다. 그래프 부분을 plotly 로 만들었기 때문에, 여전히 인터랙션이 가능합니다.