サイトアイコン アマチュア無線局JS2IIU

【Python】Dash入門編

JS2IIU

こんにちは、JS2IIUです。Pythonで構築できるWebアプリケーションフレームワーク、Streamlit、Panelに続いて、Dash(https://dash.plotly.com)を紹介していきます。今回の入門編に続いて応用編も記事にしていく予定です。よろしくお願いします。

Dashとは？

Dashは、PythonでインタラクティブなWebアプリケーションを構築するための強力なフレームワークです。Flask、Plotly、React.jsを組み合わせて構築されており、主にデータ可視化やダッシュボード作成に使われます。Pythonでフルスタックのアプリケーションを作成でき、バックエンドやフロントエンドのコードがPythonのみで記述可能な点が特徴です。

こんなことできます、のギャラリーページは見応えがあります。

Dashの特徴

メリット

デメリット

Dashの使い所

基本機能とサンプルプログラム

Dashの導入方法です。

dashと合わせてPandasも入れておくことをお勧めします。（と、本家ページに書いてありました）

pip install dash pandas

簡単なレイアウト作成

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

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1("Dash基本アプリ"),
    dcc.Input(id='input-box', value='初期値', type='text'),
    html.Div(id='output-box')
])

@app.callback(
    Output('output-box', 'children'),
    [Input('input-box', 'value')]
)

def update_output(value):
    return f'入力された値: {value}'

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

説明: このプログラムは、テキスト入力フィールドに基づいて動的に表示内容を更新するシンプルなWebアプリです。ユーザーが入力した値が、下部にリアルタイムで反映されます。

https://js2iiu.com/wp-content/uploads/2024/09/da_00_01.mov

プログラムの解説

1. Dashのインポート
import dash
from dash import dcc, html
from dash.dependencies import Input, Output

まず、dashライブラリとその関連モジュールをインポートしています。dashはインタラクティブなWebアプリケーションを構築するためのフレームワークです。dccはDash Core Components、htmlはHTMLタグを生成するためのモジュールです。また、dash.dependenciesからInputとOutputをインポートしていますが、これらはコールバック関数で使われる、入力と出力を定義するためのモジュールです。

2. アプリケーションインスタンスの作成
app = dash.Dash(__name__)

ここでdash.Dash(__name__)により、Dashアプリケーションのインスタンスappを作成します。これによって、Dashアプリケーションが起動可能になります。

3. アプリのレイアウト
app.layout = html.Div([
    html.H1("Dash基本アプリ"),
    dcc.Input(id='input-box', value='初期値', type='text'),
    html.Div(id='output-box')
])

app.layoutはアプリケーションのUIを定義します。この例では、html.Divを使って、アプリ全体のコンテナを作り、その中にhtml.H1、dcc.Input、およびhtml.Divの3つの要素が入っています。

4. コールバック関数
@app.callback(
    Output('output-box', 'children'),
    [Input('input-box', 'value')]
)

ここでコールバックが定義されています。Dashでは、UIのインタラクションに応じて動作するコールバック関数を使います。このコールバック関数は、@app.callbackというデコレータを使って定義され、次の2つの要素があります。

5. コールバック関数の定義
def update_output(value):
    return f'入力された値: {value}'

この関数は、input-boxに入力されたテキストを受け取り、output-boxに「入力された値: {value}」という形式で表示します。たとえば、テキストボックスに「こんにちは」と入力すると、「入力された値: こんにちは」というメッセージが表示されます。

6. アプリの起動
if __name__ == '__main__':
    app.run_server(debug=True)

if __name__ == '__main__':という条件分岐で、スクリプトが直接実行されたときにアプリケーションを起動します。app.run_server(debug=True)は、デバッグモードでサーバーを起動するためのコマンドです。デバッグモードを有効にすると、コードの変更が自動的に反映され、エラー情報も詳しく表示されます。

Dashの参考リンク

グラフの可視化

import dash
from dash import dcc, html
import plotly.express as px

app = dash.Dash(__name__)

# サンプルデータ
df = px.data.iris()

fig = px.scatter(df, x='sepal_width', y='sepal_length', color='species')

app.layout = html.Div([
    html.H1("Irisデータセットの散布図"),
    dcc.Graph(id='scatter-plot', figure=fig)
])

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

説明: このアプリケーションでは、Plotlyを使ってIrisデータセットの散布図を表示しています。Dashを使って簡単にデータビジュアライゼーションが実装できることを示しています。

https://js2iiu.com/wp-content/uploads/2024/09/da_00_02.mov

プログラムの解説

1. DashとPlotlyのインポート
import dash
from dash import dcc, html
import plotly.express as px

まず、dashライブラリをインポートし、dcc（Dash Core Components）とhtml（HTMLコンポーネント）モジュールを使ってアプリケーションのUIを構築します。また、plotly.express（略してpx）は、データの可視化に特化したライブラリで、簡単な関数呼び出しでグラフを作成できます。

2. Dashアプリケーションのインスタンス作成
app = dash.Dash(__name__)

ここで、dash.Dash(__name__)によってDashアプリケーションのインスタンスを作成しています。このインスタンスが、アプリ全体を管理する中心的な役割を果たします。

3. データの読み込みとグラフの作成
df = px.data.iris()
fig = px.scatter(df, x='sepal_width', y='sepal_length', color='species')
4. アプリケーションのレイアウト設定
app.layout = html.Div([
    html.H1("Irisデータセットの散布図"),
    dcc.Graph(id='scatter-plot', figure=fig)
])
5. アプリの実行
if __name__ == '__main__':
    app.run_server(debug=True)

この部分は、スクリプトが直接実行されたときにDashアプリを起動するためのものです。app.run_server(debug=True)によって、デバッグモードでサーバーが起動されます。デバッグモードでは、コードの変更が自動的に反映され、エラー情報も詳細に表示されます。

DashとPlotly Expressの基本的な流れ

このプログラムでは、Dashを使ってIrisデータセットの散布図をWebアプリとして表示する方法を示しています。DashはアプリケーションのUIを構築し、Plotly Expressがデータの可視化をサポートしています。

参考リンク

コールバックを利用したインタラクティブなグラフ更新

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

app = dash.Dash(__name__)

# サンプルデータ
df = px.data.gapminder()

app.layout = html.Div([
    html.H1("年ごとの人口データ"),
    dcc.Dropdown(
        id='year-dropdown',
        options=[{'label': str(year), 'value': year} for year in df['year'].unique()],
        value=1952
    ),
    dcc.Graph(id='population-graph')
])

@app.callback(
    Output('population-graph', 'figure'),
    [Input('year-dropdown', 'value')]
)
def update_graph(selected_year):
    filtered_df = df[df['year'] == selected_year]
    fig = px.scatter(filtered_df, x='gdpPercap', y='pop', size='pop', color='continent',
                     hover_name='country', log_x=True, size_max=60)
    return fig

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

説明: ユーザーがドロップダウンメニューから特定の年を選択すると、その年のデータに基づいてグラフが更新されるインタラクティブなアプリケーションです。Dashのコールバック機能を活用し、リアルタイムでグラフを更新する方法を示しています。

https://js2iiu.com/wp-content/uploads/2024/09/da_00_03.mov

プログラムの解説

1. DashとPlotlyのインポート
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
2. Dashアプリケーションのインスタンス作成
app = dash.Dash(__name__)

dash.Dash(__name__)でDashアプリケーションのインスタンスを作成しています。このインスタンスがアプリ全体を管理します。

3. データの読み込み
df = px.data.gapminder()

px.data.gapminder()は、Plotly Expressに組み込まれているGapminderデータセットを読み込む関数です。このデータセットには、各国の年ごとの人口やGDP、平均寿命などの情報が含まれています。複数の年（1952年から2007年まで）のデータが含まれており、これを使って視覚化を行います。

4. アプリケーションのレイアウト設定
app.layout = html.Div([
    html.H1("年ごとの人口データ"),
    dcc.Dropdown(
        id='year-dropdown',
        options=[{'label': str(year), 'value': year} for year in df['year'].unique()],
        value=1952
    ),
    dcc.Graph(id='population-graph')
])
5. コールバック関数
@app.callback(
    Output('population-graph', 'figure'),
    [Input('year-dropdown', 'value')]
)
def update_graph(selected_year):
    filtered_df = df[df['year'] == selected_year]
    fig = px.scatter(filtered_df, x='gdpPercap', y='pop', size='pop', color='continent',
                     hover_name='country', log_x=True, size_max=60)
    return fig
6. アプリの実行
if __name__ == '__main__':
    app.run_server(debug=True)

スクリプトが直接実行された場合、app.run_server(debug=True)によりアプリがデバッグモードで起動します。デバッグモードでは、変更が即座に反映され、エラー情報も詳細に表示されます。

まとめ

このプログラムは、Dashを使って年ごとの人口とGDPの関係を視覚化するアプリケーションを構築しています。ユーザーはドロップダウンメニューから特定の年を選択し、その年のデータを視覚化した散布図がリアルタイムで更新されます。Dashのコールバック機能を使って、インタラクティブなUIを実現しています。

参考リンク

まとめ

Dashは、データサイエンティストやエンジニアにとって、手軽にインタラクティブなWebアプリケーションを作成できるツールです。シンプルな構文ながらも強力な機能を持ち、さまざまな分野での活用が期待されます。ただし、大規模アプリケーションやモバイル対応には注意が必要です。

Dash関連記事まとめ

DashはJavaScriptライブラリであるReactの上に構築されたPythonフレームワークであるが、DashはRでも動作し、最近ではJuliaもサポートしている。
Wikipedia – Plotly/Dash から引用、翻訳

モバイルバージョンを終了