はじめに
Pythonで簡単にインタラクティブなWebアプリやダッシュボードを作成できるフレームワークとして注目されているのが「Dash」です。
Dashは、データサイエンスや可視化の分野で広く利用されており、特に手軽さと柔軟性が魅力です。
本記事では、Dashの特徴を紹介しながら、簡単なサンプルコードを使って実際にインタラクティブなダッシュボードを作成する方法を解説します。
DashはPythonを用いてWebアプリを作ることができる手法となります。データ分析の際はダッシュボードとして多くの方に結果を見せる機会があるかと思いますが、可視化手法など理解が難しい場合は、経験豊富な方とマンツーマンで学習していくのもオススメです。
Dashとは
Dashは、Plotly社が開発したオープンソースのフレームワークで、以下のような特徴を持っています。
- Pythonだけで完結
Pythonコードのみでアプリを構築可能なため、Pythonに慣れているデータサイエンティストやデータアナリストでも構築可能です。 - 動的なデータ可視化
Plotlyライブラリを活用した高品質なグラフ作成が可能。見たいデータを拡大するなどしながら、ダッシュボード上で分析できます。 - コールバックを用いたインタラクティブな機能
ユーザーの操作に応じてデータやグラフをリアルタイムで更新できる。条件を選んだうえでデータをフィルターし、可視化画面を変更できます。
Dashの基本構成
Dashアプリは大きく2つの要素で構成されます。これらに従って、どのような構成になっているか見ていきます。
- レイアウト: アプリの見た目を定義する部分。HTML要素やグラフを配置します。
- コールバック: ユーザー操作に応じたデータ更新や動作を定義する部分。
Dashを動かしてみる
Dashで可視化してみる
今回はカルフォルニア住宅データセットを使い、散布図を作ってみます。
今回はdashに加えて、scikit-learn, pandas, plotlyのライブラリを使うので、必要な場合はinstallしてください。
今回使っているバージョンは
- dash : 2.18.2
- pandas : 2.2.3
- plotly : 5.24.1
- scikit-learn : 1.5.2
です。
それではコードを書いてます。まずdashをインストールします。
pip install dashdashはレイアウトとコールバックを書くのが全体的な流れになります。
まずは全体的なコードと最終画面は下記のような形になります。
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
from sklearn.datasets import fetch_california_housing
# カルフォルニア住宅データセットをロード
data = fetch_california_housing(as_frame=True)
df = data.frame
# Dashアプリの初期化
app = dash.Dash(__name__)
# *****************************↓レイアウト部分↓*****************************
# アプリのレイアウトを定義
app.layout = html.Div([
html.H1("カルフォルニア住宅データダッシュボード", style={"textAlign": "center"}),
html.Div([
html.Label("x軸を選択してください:"),
dcc.Dropdown(
id="x-axis-dropdown",
options=[{"label": col, "value": col} for col in df.columns],
value="AveRooms", # 初期値
style={"margin-bottom": "20px"}
),
html.Label("y軸を選択してください:"),
dcc.Dropdown(
id="y-axis-dropdown",
options=[{"label": col, "value": col} for col in df.columns],
value="AveBedrms", # 初期値
),
], style={"width": "50%", "margin": "auto"}),
dcc.Graph(id="scatter-plot")
])
# *****************************↑レイアウト部分↑*****************************
# ****************************↓コールバック部分↓****************************
# コールバックでインタラクティブな動作を定義
@app.callback(
Output("scatter-plot", "figure"),
[Input("x-axis-dropdown", "value"),
Input("y-axis-dropdown", "value")]
)
def update_graph(x_axis, y_axis):
fig = px.scatter(
df,
x=x_axis,
y=y_axis,
title=f"{x_axis} と {y_axis} の散布図",
labels={x_axis: x_axis, y_axis: y_axis},
trendline="ols", # 回帰線を追加
)
return fig
# ****************************↑コールバック部分↑****************************
# アプリを実行
if __name__ == "__main__":
app.run_server(debug=True)
このように、可視化画面が表示されます。
Plotlyで表示されているため、画面上をポチポチすることで拡大したりすることができます。
id
何か所かidというコードがありますが、これはドロップダウンで何を選んだかにしたがってグラフを更新するためにInputだったり、Outputを返します。
- Input
- x-axis-dropdown : 選ばれたx軸を基にグラフを描画するための要素です。このidはコールバックのInputとして使われます。ユーザーがドロップダウンで選択するたびに値が更新され、コールバックが実行されます。
- y-axis-dropdown : 選ばれたy軸を基にグラフを描画するための要素です。これもコールバックのInputとして使われます。
- Output
- scatter-plot : 作成されたグラフが入っています。コールバックの結果としてOutputのグラフが返されます。
レイアウト部分
レイアウトという名前の通り、どのようなものを画面で表示するかを上から書いていきます。
- タイトル(html.H1): ページ上部に中央揃えで「カルフォルニア住宅データダッシュボード」というタイトル。
- ドロップダウンタイトル(html.Label) : 「x軸を選択してください」というx軸選択用のラベル。
- ドロップダウンメニュー(dcc.Dropdown):x軸選択用のドロップダウン。
- ドロップダウンタイトル(html.Label) : 「y軸を選択してください」というy軸選択用のラベル。
- ドロップダウンメニュー(dcc.Dropdown):y軸選択用のドロップダウン。
- グラフ(dcc.Graph): ページ下部に散布図が表示。
# アプリのレイアウトを定義
app.layout = html.Div([
html.H1("カルフォルニア住宅データダッシュボード", style={"textAlign": "center"}),
html.Div([
html.Label("x軸を選択してください:"),
dcc.Dropdown(
id="x-axis-dropdown",
options=[{"label": col, "value": col} for col in df.columns],
value="AveRooms", # 初期値
style={"margin-bottom": "20px"}
),
html.Label("y軸を選択してください:"),
dcc.Dropdown(
id="y-axis-dropdown",
options=[{"label": col, "value": col} for col in df.columns],
value="AveBedrms", # 初期値
),
], style={"width": "50%", "margin": "auto"}),
dcc.Graph(id="scatter-plot")
])コードの上から表示する内容を記載していく形になります。H1とあるように、H2、H3なども設定可能です。
dccの中には動的なドロップダウンやグラフを表示するものになるので、ラジオボタンやチェックリストなど動的なものはdcc.~~という書き方をします。
細かい部分については公式のページを確認してください。
コールバック部分
コールバック部分はこのような書き方をします。
@app.callbackというところでドロップダウンした値をInputとしてid(x-axis-dropdown, y-axis-dropdown)で渡し、x軸とy軸を変えた散布図をOutputをid(scatter-plot)で返します。
# コールバックでインタラクティブな動作を定義
@app.callback(
Output("scatter-plot", "figure"),
[Input("x-axis-dropdown", "value"),
Input("y-axis-dropdown", "value")]
)
def update_graph(x_axis, y_axis):
fig = px.scatter(
df,
x=x_axis,
y=y_axis,
title=f"{x_axis} と {y_axis} の散布図",
labels={x_axis: x_axis, y_axis: y_axis},
trendline="ols", # 回帰線を追加
)
return figレイアウト上で選んだアイテムをコールバックに渡し、何かしらの処理を加えたものを返し、表示を変換するというのがDashの全体像です。
Dashの起動
.pyファイルとして起動するとダッシュボードのurlが出ますので、そこに入ってみると散布図が見れるようになります。
Dashはコンポーネントも多く、カスタム性が高いので自分が目指すダッシュボードにアップデートするのがいいと思います。
まとめ
今回はDashを用いてダッシュボードを作ってみました。レイアウトとコールバックの概念さえわかるようになれば基本的な動作を理解することができるかと思います。
HTML的な知識も若干必要ですが、Pythonで全部作れて非常に便利だと思いました。
Dashを学ぶのにオススメの方法
書籍：Python インタラクティブ・データビジュアライゼーション入門
Dashを体系的に学びたい方には以下の書籍がオススメです。Plotlyを用いたインタラクティブな可視化についても記載されています。
スクール：現役データサイエンティストに教えてもらう
可視化作業はデータ分析時に必要になることが多いです。ただ、どのようにやるのが正しいのかを判断するには適切なメンターなどがいた方が安心です。スクールなどに入り、アドバイスしてもらいながら進めるのも良いでしょう。
コメント