Python을 사용한 Visualization Library Dash 1

구두

데이터를 처리할 때 중요한 것은 그 데이터를 잘 보는 것이다.
나는 데이터를 보고 그 데이터를 어떻게 처리해야 할지 생각했다.만약 그 데이터를 깊이 이해한다면 데이터는 이전보다 더욱 효과적일 수 있을 것이다.
시각화된 도서관이 많아서 어떤 것을 써도 어렵지만 제가 최근에 추천한 것은 대시입니다.
이 프로그램 라이브러리는 Flashs, React, Platly를 조합하여 만든 것으로 간단하게 네트워크 응용 프로그램에 사용할 수 있다.또 아래와 같은 움직임이 있는 그래프를 간단하게 만들 수 있는 곳도 좋다.

또 탭에 페이지를 나눌 수 있기 때문에 프레젠테이션처럼 사용할 수도 있다.지금까지 처리 데이터의 발표는 대부분 지루한 일들이었다.많은 데이터를 처리했지만 발표할 때는 거기서 잘라낸 것만 처리할 수 있다는 제약이 크다는 이유에서다.
하지만 이 라이브러리를 사용하면 많은 데이터를 공유할 수 있는 자료가 있습니다.데이터를 통해 많은 사람의 눈을 접하게 되면 더 많은 생각이 생길 수 있다고 생각한다.
그럼 여기서 한 걸음 한 걸음 대시의 사용법을 살펴보자.
버전 정보 사용
Python 3.6.5
dash 0.28.5
dash_core_components 0.34.0
dash_html_components 0.13.2
공식 문서
https://dash.plot.ly/
2. Callback 보기
https://qiita.com/OgawaHideyuki/items/1eea435b3f7c90375848
3. 마우스 호흡기 활용
https://qiita.com/OgawaHideyuki/items/b4e0c4f134c94037fd4f
읽어주셨으면 좋겠습니다.
공저로 플랫리/대시의 책을 펴냈다.웃으면서 보시길 바랍니다.
Pythhon 상호작용 데이터 설정 입문-Plattly/Dash를 통해 데이터 시각화 및 웹 응용 구축

설치 방법

pip로 설치할 수 있습니다.오랜만에 공식을 보니 내가 전혀 갱신하지 않았다는 것을 알았다.
(3월 20일)dash만 설치하면 필요한 도구를 설치할 수 있다고 지적하여 수정하였습니다.메모 감사합니다.

$ pip install dash==0.39.0

이 기사는 이후 업데이트되고 진행될 수 있지만 이 기사는 가장 먼저 실린 구판본으로 추천한다.
4공식 페이지 또한 충실하니 참고하세요.

첫 대시.

그럼 최초의 앱을 만들어 보세요.문서와 같으면 재미가 없으니까 조금 바뀐 걸 해보려고요.
우선 디렉터리를 만들어 그 중에서 응용한다.py라는 파일을 만들어라.

$ mkdir firstdash
$ cd firstdash
$ code app.py  # VSコードの人はこれでいけます

그리고 코드를 쓰세요.

import dash  
import dash_core_components as dcc 
import dash_html_components as html  

＃ appという箱作り①
app = dash.Dash(__name__)　　

# appという箱に中身を詰める②
app.layout = html.Div(
   children =[
    html.H1('Hello Dash',),
    dcc.Graph(
        id = "first-graph",
        figure = {
        'data': [
            {'x': [1,2,3,4],
            'y':[3,2,4,6],
            'type': 'bar',
            'name': '東京'},
            {'x':[1,2,3,4],
            'y':[2,4,3,2],
            'type': 'bar',
            'name': '大阪'}
        ],
        'layout': {
            'title': 'グラフ1　東京　対　大阪'
        }
        }
    )
])

# 実行用③
if __name__=='__main__':
    app.run_server(debug=True)

위의 코드부터 보면 먼저 프로그램 라이브러리를 호출합니다.그리고 앱이라는 상자를 준비해라(①).
다음은 준비된 상자에 표시할 물건을 담는다(②).괄호를 좋아하지 않기 때문에 파이톤을 써야 한다고 생각했는데 불편했어요.
dash_html_components가 ""을 쓰는 요소,dashcore_components는 도표 주위를 만드는 도구입니다.
그럼 실행해 보세요.방금 폴더에 아래 방식으로 입력하면 실행됩니다.

$ python app.py
# うまくいくと以下のような文字が出ます。エラーが有る場合、この下にエラーが出るので直しましょう！
 * Serving Flask app "app" (lazy loading)
 * Environment: production
   WARNING: Do not use the development server in a production environment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:8050/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!

오류가 발생하지 않으면 사용 중인 웹 브라우저에 있는 주소를 선택하십시오
http://127.0.0.1:8050/
를 입력합니다.조금만 하면 도표가 아래에 나타날 거예요.

다른 시각화 도구에서는 마우스hover로 데이터를 표시할 때 코드를 번잡하게 써야 하지만 대시는 아무것도 쓰지 않아도 간단하게 표시할 수 있다.
그리고 흥미로운 것은 도례를 클릭하면 데이터를 열거나 닫을 수 있다는 것이다.

변경을 가하다

배경을 바꿔보세요.
많은 것을 바꾸기 위해''의 요소에 스타일을 넣는다.
그리고 두 개의 데이터가 있으면 외로워서 네 개의 데이터로 늘어난다.

import dash  
import dash_core_components as dcc 
import dash_html_components as html  

# 付け加え　外部スタイルシート
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

# 付け加え　色
colors = {
    'background': 'limegreen',
    'text': '#7FDBFF'
}

# 付け加え　外部スタイルシート
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    style = {'backgroundColor': colors['background']}, # 背景色
    children = [html.H1('Hello Dash', 
    style={
        'textAlign': 'center',　　　　　# テキストセンター寄せ
        'color': colors['text'],　　　# 文字色
    }),
    dcc.Graph(
        id = "first-graph",
        figure = {
        'data': [
            {'x': [1,2,3,4],
            'y':[3,2,4,6],
            'type': 'bar',
            'name': '東京'},
            {'x':[1,2,3,4],
            'y':[2,4,3,2],
            'type': 'bar',
            'name': '大阪'},
            {'x': [1,2,3,4],　　　　# データ２つ足す
            'y':[2,1,4,6],
            'type': 'bar',
            'name': '京都'},
            {'x': [1,2,3,4],
            'y':[1,3,4,7],
            'type': 'bar',
            'name': '福岡'},
        ],
        'layout': {
            'title': 'グラフ1',
            'paper_bgcolor': colors['background'],　　# グラフの外の背景色
            'plot_bgcolor': colors['background']　　# グラフの中の背景色
        }
        }
    )
])

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

이쪽 결과는 아래야.Qiita 색상으로 바뀌었어요.
그나저나 마지막 앱은run_서버(debug=True)로 설정하면 코드를 저장하고 브라우저를 업데이트하면 변경된 내용을 바로 볼 수 있습니다.

제1장 끝

그럼 기본적인 사용법을 살펴보겠습니다.
나는 간단하게 번거로운 일을 할 수 있다는 것을 알았다.2장에서 Dash가 조작하는 간 호출을 보고 싶습니다.
여기 있습니다.
https://qiita.com/OgawaHideyuki/items/1eea435b3f7c90375848