DashHandsOn 01
はんなりPython 26
自己紹介
小川英幸 hideyan.icon
はんなりPython オーガナイザの1人
元金融(トレード・分析・雑用)
現在 自分の会社 ぼんやりしている・・・仕事しよう!
今年やりたいこと / データ分析からアプリ作りへ
本日やること
解説
Dashとは
レイアウト
コンポーネント
スタイル設定
グラフ作成(Plotly.py) ここでJupyterを使おうと思っています。
レイアウトの組み立て
コールバック
コールバック
作成
各自好きなものを作ってみてください
できればデータを何か使ったものが良いかなぁ?
最後で全員に披露しましょう!
でかいデータはpickleを使ってみよう。
Dashとは
Dashとは
特徴
インタラクティブなWebアプリケーションが短い時間で作れる
Plotlyのグラフが使えるので、データの可視化が簡単に作れる
Pythonのみで作れる
知っといた方が良い
HTML / CSS / Pandas
ハンズオン準備
環境設定
Windows
code:powershell
$ py -m venv <好きなPath>
$ 好きなPath/Scripts/activate.ps1
$ pip install --upgrade pip
$ pip install dash dash_bio dash_canvas dash_cytoscape dash_daq pandas plotly
本日は基本エディタを使います。グラフの作成はグーグルコラボ
Docker (WSL/Mac/Linux)
code:console
$ cd dash_hands_on
-- Dockerのbuild
$ docker build -t dash-handson .
-- Docker に入る
$ docker run --rm -it -v $(pwd):/work -P -p 8050:8050 dash-handson bash
-- はいった
root@a0a8554e2eb6:/work# python first.py
-- 好きにファイルを実行してください。
-- Dashを実行したままソースコードの編集ができます。
root@a0a8554e2eb6:/work# python h1_component.py
Getting Started
まずはアプリケーションを動かしてみよう(first.py)
code:commmand
$ python first.py
見た目を作るレイアウトのみ
インタラクティブ版(first_callback.py)。ドロップダウンを使って表示する国を選択できる。
アプリケーションは2つの部分からなる
レイアウト / 見た目
コールバック / インタラクティブさ
レイアウト作成
見た目つくり
コンポーネントを組み合わせて作成する
コンポーネントを提供するパッケージが使える(自作もできる)
コンポーネントは属性値に値を与え作成します。
コンポーネントはたくさんの属性を持ちます
help(クラス名)で参照できます。
style 属性 : 名前の通り、スタイルを設定するための属性。辞書でスタイルを設定する。
辞書のキーはCSSのプロパティ名、辞書の値はCSSのプロパティ値
文字色を変えたり
コンポーネントを横に並べるのもCSSで行います。
グラフ作成(グーグルコラボをってみましょう)
グラフ作成はPlotly.pyを用います。ドキュメントは辞書で作っていますが・・・
plotly.express / plotlyのラッパ。グラフ作成が簡単。
plotly.graph_objects / 詳細の設定を頑張りたいときは使うと良い。 / 今日は解説しません。
plotly.data.* / データセット
レイアウト作成
コンポーネントを組み合わせて、何か作ってみましょう。データは自分好みがあればそれを。なければplotly.dataなど(15分)
コールバック
コールバックのサンプルコードを作って、もう一度流れを見直す。
コールバックがDashの魅力
ツールを組み合わせ、データの深堀が可能に!!
コールバックはapp.callbackでデコレートしたコールバック関数
first_callback.pyに戻って確認します。
コールバックとは
あるコンポーネントの属性値の変化をきっかけに、何らかのコンポーネントの属性値を変更し、動きを作る
いろいろなコンポーネントや属性を用いて動きが作れます。
コンポーネントだとdccに使えるものが多い。
クリック回数を数えるn_clicks属性とか。
複数ページの切り替えなんかもコールバックで行います。
今日はfirst_callback.pyとcallback_graph.py 1-3を使ってちょっと解説します。