Plotly から Dash へ

Dash と Plotly で作るダッシュボード

Alex Scriven

Data Scientist

最初の Dash アプリ

 

完全な Dash アプリ:

from dash import Dash, dcc
app = Dash()
app.layout = [dcc.Graph(id='example-graph', figure=bar_fig)]
if __name__ == '__main__':
    app.run(debug=True)
  • Python の機能が利用可能
    • 例: 文字列補間 print("f{my_variable}")
Dash と Plotly で作るダッシュボード

主な Dash インポート

 

from dash import Dash, dcc
  • Dash はアプリを初期化
  • dcc はグラフや入力などの UI コンポーネント
    • 本アプリでは 1 コンポーネント
    • 以降の章で増やす予定
Dash と Plotly で作るダッシュボード

アプリのレイアウト

 

app = Dash()

app.layout = [dcc.Graph(
  id='example-graph',
  figure=bar_fig)]

 

  • Dash() でアプリオブジェクトを作成
  • app.layout を設定
    • dcc.Graph() を使用
      • figure = 表示する Plotly 図
      • id = 後でコールバックに必須
Dash と Plotly で作るダッシュボード

アプリの実行

 

if __name__ == '__main__':
    app.run(debug=True)

 

  • スクリプトはコマンドラインから実行
    • 例: コマンドラインで python my_app.py
  • debug はテスト時のフィードバック用
Dash と Plotly で作るダッシュボード

本アプリ

 

  • Google Chrome などのブラウザでアクセス

  • サーバー起動中に .py を更新・保存するとブラウザが即時反映

Dash アプリ実行後のターミナル画面のスクリーンショット。黒地に白文字で、スクリプトで触れた詳細が表示されている。

Dash と Plotly で作るダッシュボード

ブラウザでのアプリ

横棒グラフの GIF。x 軸は総売上、y 軸は国。前のレッスンと同じグラフだが、Chrome ブラウザ内で表示され、URL バーにサーバーアドレスが見える。マウスがグラフ上に移動し、URL バーをクリックしてサーバー稼働を示す。

Dash と Plotly で作るダッシュボード

DataCamp での Dash

 

  • 他の DataCamp 演習との差分:
    • 冒頭にセットアップ行あり
    • 逐次ではなく一括実行
    • より長いコード
  • 完全動作のダッシュボード（ウィンドウを拡大して確認）

Dash コーディング演習の上部を実行後に示すスクリーンショット。HTML 出力を全画面表示するための拡張ボタンを強調。

Dash と Plotly で作るダッシュボード

演習に進みましょう！

Dash と Plotly で作るダッシュボード

Preparing Video For Download...