DashHandsOn03
はんなりPythonハンズオン コールバック編
#dashhandson
ハンズオン3回目
1回目はDashの全体像、2回目はレイアウトの作成に触れた
資料
DashHandsOn 01
DashHandsOn 02
github
今回はアプリケーションにインタラクティブさを提供するコールバックに触れる
資料 Github , html
自己紹介
小川 英幸 @ogawahideyuki hideyan.icon
はんなりPythonの会 オーガナイザ
PyConJP / PyCon China Beijing 2019 スピーカ
最近作っているもの
COVID-19可視化 https://chomoku.herokuapp.com/covid-19
京都のCOVID-19アプリ https://chomoku.herokuapp.com/kyoto-covid 
Qiita 記事: COVID-19のデータでネットワーク図を作成した
Github: https://github.com/mazarimono/chomoku
今日やること
前回までの復習
コンポーネントの作成
グラフの作成
コンポーネントを組み合わせてレイアウトを作成
コールバックの作成方法
基本的なコールバックの動作の解説
コンポーネントと組み合わせたコールバックの事例
各自作成してみる
環境作り
Python.jpを参照
仮想環境を作成し、dash、plotly、pandasをpip install
CSS
前回までの復習
Dashはウェブアプリケーションを作成するフレームワーク
https://dash.plotly.com/
特徴
短時間で作成できる
グラフを使える(Plotly)
インタラクティブに動作する
Dashのアプリケーションはコンポーネントを組み合わせて作成する
コンポーネント 提供されているものを用いる。自作も可能
HTML要素を作成するdash_html_componentsと、ドロップダウンやグラフ作成に使うdash_core_componentsのみを用いて今回までのハンズオンを行っている。
そのほかのコンポーネント作成ライブラリには、テーブルを作成するDash_DataTable、画像処理を行えるDash_Canvas、ネットワーク図を作るDash CytoScape、バイオインフォマティクスに用いるDash Bio、データ計測に用いるDash DAQがある。
コンポーネントはライブラリのクラス(一部関数)の引数に値を与えて作成する
H1クラス
ドロップダウン
コンポーネントにはたくさんの属性がある!!!
グラフはPlotlyを用いて作成する
Dashのドキュメントは辞書で書いているが、ラッパであるplotly.expressを用いた
https://plotly.com/python/plotly-express/
Graphコンポーネントのfigure属性にplotly.expressで作成したfigureを渡し、アプリケーションでグラフを表示する
レイアウト
レイアウトはコンポーネントを組み合わせて作成する
コンポーネントを組み合わせるのにはDivコンポーネントを用いる
コールバック
コールバックはコンポーネントの何らかの属性の変化を用いて、コンポーネントの属性を変化させる
それによりアプリケーションがインタラクティブに動作する
app1.py と app2.py でまずは基本的なつくり方、動作を解説
app1.pyはテキストエリアへの入力をそのまま画面に反映する
app2.pyはテキストエリアへの入力をボタンを押すと画面に反映する
コールバックはInputで指定した属性が変化すると呼び出され、関数で処理したデータが出力先に渡される
Output クラスに出力先のコンポーネントのID名、属性名を指定
Inputクラスにコールバックを呼び出すコンポーネントのID名、属性名を指定
Stateクラスにコールバックに状態を用いるコンポーネントのID名、属性名を指定
Gapminderデータの日本のデータを用いて、各要素のヒストリカルデータを線グラフで観察するアプリケーションを作成する
ドロップダウンはデータのコラムを用いて作成
コールバックはドロップダウンのvalue属性をトリガーにして呼び出される。グラフを返す。
app3.py
次に表示する国もドロップダウンで選択できるアプリケーションを作成します。app4.py
ドロップダウンをcountry列を使って作成し、その値を用いてデータフレームを作成
それ以外は先ほどと同じ
課題: 複数の国を選択できるようにしてみましょう。10分
ヒント1 Dropdown の引数 multiに True を渡すと複数の国が選択できる / dropdown
ヒント2 pandas の isin関数を用いると複数の要素のフィルタリングができる / isin
グラフコンポーネント上のマウスの動きを活用するコールバック
次の3つを扱う app5.py
hoverData 属性 マウスホバーしたポイントのデータが活用出来る
clickData属性 クリックで選択したポイントのデータが活用出来る
selectedData属性 複数のポイントを選択できる
template = {"layout": {"clickmode" : "select + event "}} を渡すとシフトプラスクリックで複数ポイントを選択
template = {"layout": {"dragmode" : "select"}} を渡すとドラッグで複数ポイントを選択
データはjsonで吐かれる。それをスライスして活用する app6.py
課題: clickData属性、selectedData属性を使ったアプリケーションを作成してみましょう。