Dashでダッシュボード作成を始めよう！ | 発展編

これまでの基礎編と応用編では、Dashの基本的な使い方や動的なデータ更新の実装方法について学びました。この発展編では、さらに一歩進んで、外部データとの連携や複数ページのダッシュボードを構築する方法について解説します。

具体的には以下の内容をカバーします：

外部CSVデータの読み込みと表示
リアルタイムデータ更新の実装
複数ページ構成のダッシュボード

これをマスターすれば、より実践的で複雑なダッシュボードを作成できるようになります。

1. 外部CSVデータの読み込みと表示
2. リアルタイムデータ更新の実装
3. 複数ページ構成のダッシュボード
おわりに

1. 外部CSVデータの読み込みと表示

Dashを使えば、外部データを簡単に取り込んで表示することができます。以下は、CSVファイルを読み込み、テーブルとグラフに表示する例です。

コード例

import dash
from dash import dcc, html, dash_table
from dash.dependencies import Input, Output
import pandas as pd
import plotly.express as px

# CSVデータの読み込み
data_path = 'sample_data.csv'  # CSVファイルへのパス
df = pd.read_csv(data_path)

# Dashアプリの作成
app = dash.Dash(__name__)

# アプリのレイアウト
app.layout = html.Div([
    html.H1("CSVデータの表示"),
    dash_table.DataTable(
        id='data-table',
        columns=[{"name": col, "id": col} for col in df.columns],
        data=df.to_dict('records'),
        page_size=10
    ),
    dcc.Graph(id='data-graph'),
    dcc.Dropdown(
        id='graph-column',
        options=[{"label": col, "value": col} for col in df.columns if df[col].dtype in ['int64', 'float64']],
        value=df.columns[0]
    )
])

# コールバックでグラフを更新
@app.callback(
    Output('data-graph', 'figure'),
    [Input('graph-column', 'value')]
)
def update_graph(column_name):
    fig = px.histogram(df, x=column_name, title=f"{column_name}の分布")
    return fig

# アプリの実行
if __name__ == "__main__":
    app.run_server(debug=True)

詳細な解説

pd.read_csv():
- CSVファイルを読み込み、Pandasのデータフレームとして保存します。
dash_table.DataTable:
- データフレームを表形式で表示するためのコンポーネント。
- columns: 表示する列名を指定。
- data: データフレームを辞書形式に変換して渡します。
- page_size: 表示する行数を制限。
dcc.Graph:
- グラフを表示するためのコンポーネント。ここでは初期状態では空。
dcc.Dropdown:
- ドロップダウンメニューで列を選択できます。
- options: データフレームの列名をリストとして指定。
- value: 初期値として選択される列名。
@app.callback:
- ドロップダウンで選択された列名に基づいてグラフを動的に更新します。
- px.histogram:
  - 選択された列を基にヒストグラムを描画。

動作フロー

CSVファイルの読み込み: アプリ起動時にCSVファイルをPandasデータフレームとして読み込みます。
データテーブルの表示: データを表形式で表示。
ドロップダウン操作: ユーザーが列を選択すると、選択された列に基づいたヒストグラムが表示されます。
動的なグラフ更新: 列を切り替えるたびにグラフが再描画されます。

2. リアルタイムデータ更新の実装

センサーやAPIなどから取得するリアルタイムデータを表示するには、Dashのdcc.Intervalコンポーネントを使用します。

コード例

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import random

# Dashアプリの作成
app = dash.Dash(__name__)

# 初期データ
data = []

# アプリのレイアウト
app.layout = html.Div([
    html.H1("リアルタイムデータ"),
    dcc.Graph(id='live-graph'),
    dcc.Interval(
        id='interval-component',
        interval=2000,  # 2秒ごとに更新
        n_intervals=0
    )
])

# コールバックでデータを更新
@app.callback(
    Output('live-graph', 'figure'),
    [Input('interval-component', 'n_intervals')]
)
def update_live_data(n):
    global data
    data.append(random.randint(0, 100))
    if len(data) > 20:
        data = data[-20:]
    fig = {
        "data": [{"x": list(range(len(data))), "y": data, "type": "line"}],
        "layout": {"title": "リアルタイムデータの表示"}
    }
    return fig

# アプリの実行
if __name__ == "__main__":
    app.run_server(debug=True)

詳細な解説

dcc.Interval:
- Dashのコールバックを定期的にトリガーするためのコンポーネント。
- interval: 更新間隔をミリ秒単位で指定（ここでは2秒）。
- n_intervals: 更新回数をカウント。
random.randint():
- 0から100の間でランダムな整数値を生成し、データリストに追加します。
リアルタイムデータの保持:
- データリストが20件を超えた場合、最新の20件だけを保持します。
グラフの更新:
- x: データのインデックス（値の順番）。
- y: ランダムに生成された数値。
- グラフは折れ線グラフ形式（type="line"）で表示されます。

実行後のグラフの説明

このコードを実行すると、リアルタイムでランダムなデータが生成され、それが2秒ごとにグラフに反映されます。グラフの動作は以下の通りです：

X軸:
- データのインデックスを表します（0から始まり、新しい値が追加されるごとに増加）。
Y軸:
- ランダムに生成された値を表示します（範囲: 0〜100）。
リアルタイム更新:
- 最新の20件のデータが折れ線グラフとして描画され、古いデータは削除されます。

動作フロー

データの生成:
- 2秒ごとにランダムな整数値が生成され、データリストに追加されます。
データの更新:
- リストの長さが20を超えると、最新の20件のみを保持します。
グラフの再描画:
- 更新されたデータリストに基づいてグラフが動的に再描画されます。

この機能は、センサーのデータモニタリングや株価のリアルタイム表示など、時間とともに変化するデータを可視化する用途に非常に適しています。

3. 複数ページ構成のダッシュボード

Dashでは、複数ページを持つアプリケーションを簡単に構築できます。以下は、2ページ構成のダッシュボードの例です。

コード例

pythonコードをコピーするimport dash
from dash import dcc, html
from dash.dependencies import Input, Output

# Dashアプリの作成
app = dash.Dash(__name__)
app.title = "複数ページダッシュボード"

# レイアウトの定義
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    html.Div(id='page-content')
])

# 各ページのコンテンツ
index_page = html.Div([
    html.H1("ホームページ"),
    dcc.Link("ページ1", href='/page-1'),
    html.Br(),
    dcc.Link("ページ2", href='/page-2')
])

page_1_layout = html.Div([
    html.H1("ページ1"),
    dcc.Link("ホームページに戻る", href='/')
])

page_2_layout = html.Div([
    html.H1("ページ2"),
    dcc.Link("ホームページに戻る", href='/')
])

# コールバックでページを切り替え
@app.callback(
    Output('page-content', 'children'),
    [Input('url', 'pathname')]
)
def display_page(pathname):
    if pathname == '/page-1':
        return page_1_layout
    elif pathname == '/page-2':
        return page_2_layout
    return index_page

# アプリの実行
if __name__ == "__main__":
    app.run_server(debug=True)