概要

データサイエンスと可視化の分野において、インタラクティブなデータダッシュボードは、ユーザーがデータを直感的に理解し、深く分析するための強力なツールです。Plotly Dash は、Python で簡単にインタラクティブなデータダッシュボードを構築できる人気のフレームワークです。

Plotly Dash のインストール

まず、Plotly Dash をインストールします。以下のコマンドを使用してください。

pip install dash

シンプルなダッシュボードの作成

簡単な例から始めましょう。以下は、基本的なデータを表示するダッシュボードのコードです。

import dash
from dash import dcc, html, Input, Output
import plotly.graph_objects as go

# アプリケーションの初期化
app = dash.Dash(__name__)

# レイアウトの定義
app.layout = html.Div([
    html.H1("インタラクティブなデータダッシュボード"),
    dcc.Graph(id="graph-output"),
    html.Label("色を選択してください:"),
    dcc.Dropdown(
        id="color-picker",
        options=[
            {"label": "赤", "value": "red"},
            {"label": "緑", "value": "green"},
            {"label": "青", "value": "blue"}
        ],
        value="red"
    )
])

# コールバック関数の定義
@app.callback(
    Output("graph-output", "figure"),
    [Input("color-picker", "value")]
)
def update_graph(selected_color):
    x_values = [1, 2, 3, 4, 5]
    y_values = [10, 11, 12, 13, 14]

    trace = go.Scatter(
        x=x_values,
        y=y_values,
        mode="markers",
        marker={"color": selected_color, "size": 10}
    )

    layout = go.Layout(
        title="散布図",
        xaxis={"title": "X軸"},
        yaxis={"title": "Y軸"}
    )

    return {"data": [trace], "layout": layout}

if __name__ == "__main__":
    app.run_server(debug=True)

実行方法

1. 上記のコードを `app.py` というファイルに保存します。
2. ターミナルで `python app.py` を実行します。
3. ブラウザを開き、URL `http://127.0.0.1:8050/` にアクセスすると、シンプルなインタラクティブなダッシュボードが表示されます。

機能の拡張

次に、より多くのインタラクティブな要素を追加しましょう。

# 追加のUI要素
html.Label("点のサイズを選択してください:"),
dcc.Slider(
    id="size-slider",
    min=5,
    max=20,
    step=1,
    value=10,
    marks={i: str(i) for i in range(5, 21)}
)

以下は、サイズ選択に対応した更新後のコールバック関数です。

@app.callback(
    Output("graph-output", "figure"),
    [Input("color-picker", "value"), Input("size-slider", "value")]
)
def update_graph(selected_color, selected_size):
    x_values = [1, 2, 3, 4, 5]
    y_values = [10, 11, 12, 13, 14]

    trace = go.Scatter(
        x=x_values,
        y=y_values,
        mode="markers",
        marker={"color": selected_color, "size": selected_size}
    )

    layout = go.Layout(
        title="散布図",
        xaxis={"title": "X軸"},
        yaxis={"title": "Y軸"}
    )

    return {"data": [trace], "layout": layout}

他のグラフタイプの追加

さらに、異なる種類のグラフも追加できます。

# グラフタイプ選択用UI
html.Label("グラフタイプを選択してください:"),
dcc.RadioItems(
    id="chart-type",
    options=[
        {"label": "散布図", "value": "scatter"},
        {"label": "折れ線グラフ", "value": "line"},
        {"label": "棒グラフ", "value": "bar"}
    ],
    value="scatter"
)

以下は、選択されたグラフタイプに基づいて動作する更新後のコールバック関数です。

@app.callback(
    Output("graph-output", "figure"),
    [Input("color-picker", "value"), Input("size-slider", "value"), Input("chart-type", "value")]
)
def update_graph(selected_color, selected_size, chart_type):
    x_values = [1, 2, 3, 4, 5]
    y_values = [10, 11, 12, 13, 14]

    if chart_type == "scatter":
        trace = go.Scatter(
            x=x_values,
            y=y_values,
            mode="markers",
            marker={"color": selected_color, "size": selected_size}
        )
    elif chart_type == "line":
        trace = go.Scatter(
            x=x_values,
            y=y_values,
            mode="lines",
            line={"color": selected_color}
        )
    elif chart_type == "bar":
        trace = go.Bar(
            x=x_values,
            y=y_values,
            marker={"color": selected_color}
        )

    layout = go.Layout(
        title=f"{chart_type.capitalize()}グラフ",
        xaxis={"title": "X軸"},
        yaxis={"title": "Y軸"}
    )

    return {"data": [trace], "layout": layout}

複数のデータセットの追加

最後に、複数のデータセットを追加してみましょう。

# データセット選択用UI
html.Label("データセットを選択してください:"),
dcc.Dropdown(
    id="dataset-selector",
    options=[
        {"label": "データセットA", "value": "dataset_a"},
        {"label": "データセットB", "value": "dataset_b"},
        {"label": "データセットC", "value": "dataset_c"}
    ],
    value="dataset_a"
)

以下は、選択されたデータセットに基づいて動作する更新後のコールバック関数です。

@app.callback(
    Output("graph-output", "figure"),
    [
        Input("color-picker", "value"),
        Input("size-slider", "value"),
        Input("chart-type", "value"),
        Input("dataset-selector", "value")
    ]
)
def update_graph(selected_color, selected_size, chart_type, dataset):
    if dataset == "dataset_a":
        x_values = [1, 2, 3, 4, 5]
        y_values = [10, 11, 12, 13, 14]
    elif dataset == "dataset_b":
        x_values = [1, 2, 3, 4, 5]
        y_values = [5, 4, 3, 2, 1]
    elif dataset == "dataset_c":
        x_values = [1, 2, 3, 4, 5]
        y_values = [8, 6, 7, 9, 10]

    if chart_type == "scatter":
        trace = go.Scatter(
            x=x_values,
            y=y_values,
            mode="markers",
            marker={"color": selected_color, "size": selected_size}
        )
    elif chart_type == "line":
        trace = go.Scatter(
            x=x_values,
            y=y_values,
            mode="lines",
            line={"color": selected_color}
        )
    elif chart_type == "bar":
        trace = go.Bar(
            x=x_values,
            y=y_values,
            marker={"color": selected_color}
        )

    layout = go.Layout(
        title=f"{chart_type.capitalize()}グラフ",
        xaxis={"title": "X軸"},
        yaxis={"title": "Y軸"}
    )

    return {"data": [trace], "layout": layout}