Upgrade to Pro — share decks privately, control downloads, hide ads and more …

dash-handson

F3eb7cf23caf810b30aa798e335039d0?s=47 Hide Ogawa
November 18, 2018

 dash-handson

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

F3eb7cf23caf810b30aa798e335039d0?s=128

Hide Ogawa

November 18, 2018
Tweet

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