ダッシュボードの概念
グラフをダッシュボードにまとめます
「ダッシュボードの概念」はCoddyKit上の無料Python Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはPython Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Python Academyコースには全4レッスンが含まれています。
チャートからダッシュボードへ
1つのチャートは1つの疑問に答えます。ダッシュボードは、関連する複数のチャートをまとめて配置し、見る人が状況全体を一目で把握できるようにします。
ダッシュボードを作るには、どのチャートを一緒に置くか、どのように配置するか、そしてそれらがどう関係するかを決める必要があります。
Plotlyのサブプロット
複数のPlotlyチャートを1つのFigureに配置するには、plotly.subplotsのmake_subplots(rows, cols)を使います。その後、fig.add_trace(trace, row=1, col=2)で各トレースを特定のセルに追加します。
これは、Matplotlibのサブプロットグリッドに相当するPlotlyの機能です。
グリッドの計画
コーディングの前に、グリッドをスケッチしてください。行数と列数、そして各セルに何を配置するかを決めます。計算方法は、どのようなグリッドレイアウトでも同じです。
panels = ['Revenue trend', 'Top products', 'Region map', 'Conversion %']
rows, cols = 2, 2
for i, p in enumerate(panels):
r = i // cols + 1
c = i % cols + 1
print('row', r, 'col', c, '->', p)異なる種類のチャート
ダッシュボードでは通常、トレンドを示す線、順位を示す棒、重要な指標を示す数値など、種類の異なるチャートを組み合わせます。make_subplotsはこれらすべてを配置でき、specs引数でセルごとの種類を設定できます（たとえば、円グラフにはtype='domain'が必要です）。
KPIカード
ダッシュボードは、大きな単一の数値、つまりKPIから始めることがよくあります。PlotlyのIndicatorトレースでは、値、目標値との差分（任意）、ゲージを表示できます。
差分は、単純に現在値から前回値を引いたものです。
current = 1280
previous = 1150
delta = current - previous
pct = delta / previous * 100
print('Value:', current)
print('Delta:', '+' + str(delta), '(' + format(pct, '.1f') + '%)')共通タイトルとレイアウト
fig.update_layout(title_text='Sales Dashboard')でダッシュボード全体のタイトルを1つ設定し、make_subplotsのsubplot_titles引数でパネルごとのタイトルを設定します。一貫したレイアウトにすると、各パネルが1つのプロダクトのように感じられます。
Webダッシュボード向けのDash
ドロップダウンやフィルターを備えたインタラクティブなWebダッシュボードには、Plotlyの姉妹フレームワークであるDashが標準的に使われます。PlotlyのFigureとHTMLコントロール、そして入力が変わったときにチャートを更新するコールバックを組み合わせます。
レポートにはサブプロットの静的なFigureで十分ですが、ライブアプリにはDashを使います。
コールバック：基本的な考え方
Dashのコールバックは、入力（ドロップダウンの値など）を出力（チャートなど）に対応付けます。入力が変わると関数が再実行され、新しいFigureを返します。入力を受け取り、Figureを返すというパターンです。
def update_chart(selected_region):
data = {'North': [1, 2, 3], 'South': [3, 2, 1]}
series = data.get(selected_region, [])
return {'region': selected_region, 'values': series}
print(update_chart('North'))
print(update_chart('South'))レイアウトの原則
優れたダッシュボードは、次のような階層構造に従います。
- 最も重要なKPIを、視線が最初に向かう左上に配置する
- 補足情報を示す詳細チャートをその下に配置する
- どこでも同じ系列が同じ意味になるよう、色を統一する
情報を詰め込みすぎないでください。余白は理解を助けます。
パフォーマンスへの配慮
チャートの数が多かったりデータセットが大きかったりすると、ダッシュボードが遅くなることがあります。プロットする前にデータを集約し、ポイント数を制限し、入力が変わったパネルだけを再計算してください。動作が軽快なダッシュボードは使われますが、遅いものは使われなくなります。
フィルターとクロスフィルタリング
高度なダッシュボードでは、1つの選択によって複数のチャートを同時に更新できます。これをクロスフィルタリングと呼びます。地図上の地域をクリックすると、トレンドパネルと順位パネルがその地域のデータに絞り込まれます。
Dashではコールバックを使ってこの動作を組み込みます。選択された値が入力となり、依存するすべてのチャートがその値を読み取ります。
理解度チェック
ダッシュボードに関する概念を確認しましょう。
まとめ
チャートをダッシュボードに発展させる方法を学びました。
- グリッドには
make_subplots(rows, cols)とadd_trace(..., row=, col=)を使う - チャートの種類を組み合わせ、KPIの
Indicatorカードを先頭に配置する - Dashでは、入力からFigureを返すコールバックによってインタラクティブな操作を追加できる
- 視覚的な階層構造に従い、パフォーマンスに注意する
よくある質問
「ダッシュボードの概念」レッスンは無料ですか？
はい。「ダッシュボードの概念」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Python Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Python Academyコースには全4レッスンが含まれています。
「ダッシュボードの概念」で何を学びますか？
グラフをダッシュボードにまとめます ブラウザで直接実行するハンズオンコードでPython Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Python Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのPython Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ダッシュボードの概念」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このPython Academyレッスンでコードを書いて実行できますか？
はい。すべてのPython Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Plotly Expressの基礎
- インタラクティブ機能
- ダッシュボードの概念
- エクスポートと埋め込み