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