dash-handson

dash hands on / Hannari Python #11 2018 / 11/ 16

Transcript

1. DASH HANDS ON はんなりPYTHON #11 Navigate : Space / Arrow Keys | - Menu | - Fullscreen | - Overview | - Blackout | - Speaker | - Help M F O B S ?  1 / 20
2. 自己紹介 小川 英幸( ) はんなりPythonの会、Blockchain Kyoto主催 合同会社長目（ちょうもく）って会社 株とかやってる 金融からプログラミングに流れ着く(3年？) 最近はJavaScript勉強中！ アプリ作って稼ぎたい！ @mazarimono [ GitPitch @ github/hannari-python/dash-handson ]  2 / 20
3. 今日の予定 1 Dashの使い方の概要（30分くらい） 2 データの前処理/アプリの作成 （30分くらい） 3 各自好きなデータで実際に作ってみる 4 出来たものを見せる！ [ GitPitch @ github/hannari-python/dash-handson ]  3 / 20
4. DASH 可視化ツール Flask, Plotly.js, React.jsで作られている。 ブラウザでみられる 色々工夫ができる Dash User Guide Dash App Gallary [ GitPitch @ github/hannari-python/dash-handson ]  4 / 20
5. 基本的な書き方 [ GitPitch @ github/hannari-python/dash-handson ]  5 / 20
6. CUIで [ $python app1.py ] とすると・・・ # -*- coding: utf-8 -*- import dash import dash_core_components as dcc import dash_html_components as html app = dash.Dash() app.layout = html.Div(children=[ html.H1(children='Hello Dash'), html.Div(children=''' Dash: A web application framework for Python. '''), dcc Graph( [ GitPitch @ github/hannari-python/dash-handson ]  6 / 20
7. [ GitPitch @ github/hannari-python/dash-handson ]  7 / 20
8. app = dash.Dash() / アプリの箱作り app.layout = ~~~ / アプリの中身作り / インタラクティブなイン ターフェースを作る。スライダーとかボタン、グラ フもこれを使う。 / アプリケーションの HTMLの部分に使う。 / 11月2日にリリースされた。データを 見るのに良い塩梅にしてくれる。 dash_core_components dash_html_components dash_table [ GitPitch @ github/hannari-python/dash-handson ]  8 / 20
9. なんか大したことないよね はい。でも以降は結構すごいです。 [ GitPitch @ github/hannari-python/dash-handson ]  9 / 20
10. 色々見てみましょう コードを実行してどんな動きをするか見ましょう コードの中身も見ましょう $ python app4.py [ GitPitch @ github/hannari-python/dash-handson ]  10 / 20
11. [ GitPitch @ github/hannari-python/dash-handson ]  11 / 20
12. sliderから年をインプット ==> その年で関数実行 ==> 関数内のgo.scatterで作図 ==> dcc.Graphに それを渡す(app4.py) import dash import dash_core_components as dcc import dash_html_components as html import pandas as pd import plotly.graph_objs as go df = pd.read_csv( 'fiveyeardata.csv') external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.c app = dash.Dash(__name__, external_stylesheets=external_styleshee app.layout = html.Div([ dcc.Graph(id='graph-with-slider'), dcc Slider( [ GitPitch @ github/hannari-python/dash-handson ]  12 / 20
13. 3つのコールバックにより、複雑な動きを実現して いる。(app5.py) 右の二つのチャートはdef create_time_series()で 作られている。 import dash import dash_core_components as dcc import dash_html_components as html import pandas as pd import plotly.graph_objs as go external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.c app = dash.Dash(__name__, external_stylesheets=external_styleshee df = pd.read_csv('indicators.csv') available_indicators = df['Indicator Name'].unique() app.layout = html.Div([ html Div([ [ GitPitch @ github/hannari-python/dash-handson ]  13 / 20
14. すごいー 解説はなしの方向で・・・(app6.py) import dash from dash.dependencies import Input, Output import dash_html_components as html import dash_core_components as dcc import pandas as pd import flask from flask_cors import CORS import os app = dash.Dash('drug-discovery') server = app.server df = pd.read_csv('small_molecule_drugbank.csv').drop(['Unnamed: 0 if 'DYNO' in os.environ: app scripts append script({ [ GitPitch @ github/hannari-python/dash-handson ]  14 / 20
15. グラフを下にどんどん足している。(app7.py) import dash import dash_core_components as dcc import dash_html_components as html import datetime as dt import flask import os import pandas as pd import time app = dash.Dash( __name__, assets_external_scripts='https://cdn.plot.ly/plotly-finance-1 ) server = app.server [ GitPitch @ github/hannari-python/dash-handson ]  15 / 20
16. データの形 今まではコードは見ましたが、データを見ていませ んでした。 何をやるにもデータの扱いやすい形ってのがありま す。 ライブラリに同封されているものは扱いやすい が・・・。 ML/DLなんかも実際にどうデータを作るかって意 外に難しい。 一先ず、データがどんな形か見てみましょう！ [ GitPitch @ github/hannari-python/dash-handson ]  16 / 20
17. データを整える sklearnのデータを使って、Dashで使いやすいよう にデータを作ってみます。 先ほど見たような形に作ってみましょう。 [ GitPitch @ github/hannari-python/dash-handson ]  17 / 20
18. 整えたデータでちょっと作ってみる ちょっと可視化してみます。 グラフの作り方は のサイトで調べながら 仕上がりはgithubのapp8.pyです herokuにあげる plotly https://dash.plot.ly/deployment [ GitPitch @ github/hannari-python/dash-handson ]  18 / 20
19. 作ってみましょう！ では、何かデータを使ってDashでアプリを作って みましょう！ 目的はデータを見やすくすることであるので、シン プルで見やすくすることを心掛けた方が良いかもし れません。 やってみたいデータがある人はそれを、ない人は sklearnのdatasetsを使ってください。 [ GitPitch @ github/hannari-python/dash-handson ]  19 / 20
20. 披露しましょう！ 作ったものを全員で見せ合いましょう！ [ GitPitch @ github/hannari-python/dash-handson ]  20 / 20