まとめ動画

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

Alex Scriven

Data Scientist

第1章

 

  • Plotly の復習
  • 最初の Dash アプリを作成
  • HTML の概要

月別売上の折れ線グラフのGIF。点にマウスを乗せると、月と売上がポップアップ表示される

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

第2章

 

  • HTML/CSS で構造とスタイル
  • 要素の配置・サイズ・スタイル
    • style 辞書

タイトル「Top Sales Categories」。その下の赤い点線枠内に横棒グラフ（Y軸に購入カテゴリ、X軸に注文数）。枠外下に上位2カテゴリのリスト。枠は四方に広がり、押し出し矢印で余白が増え、枠内のグラフやタイトル、下のテキストが離れていることを示す図

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

第3章

 

  • コールバックでのインタラクション
  • ドロップダウン、日付ピッカー、自由入力

一般的な日付ピッカーのGIF。現在は 2025年7月1日。クリックでカレンダー表示、2025年7月2日を選択し、カレンダーが閉じて選択日が更新される

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

第4章

 

  • ホバー/クリックによるインタラクション
  • AG Grid テーブルの構築

異なるセルをクリックすると、下にそのセル内容の辞書が表示されるテーブルのGIF

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

次のステップは？

 

  • 自作ダッシュボードを作る
    • 着想用の 例
  • コールバックの連鎖を試す
  • AG Grid テーブルをさらに学ぶ

Screenshot at May 15 08-06-55.png

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

Plotly Studio

  • 数分でデータから Dash アプリを生成 ⚡
  • 生成AIの土台をカスタマイズ 🔧
  • ワンクリックで Plotly Cloud に公開 🚀

plotlystudio.png

1 plotly.com/studio
Dash と Plotly で作るダッシュボード

ありがとうございました！

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

Preparing Video For Download...