Python のデータフレームを Web ページに表示（Dash を使用）

1. エグゼクティブサマリー

pandas と Dash を組み合わせることで，データフレームの Web ブラウザでの表示と操作を実現する方法を解説する．Iris データセットを例として，データフレームの表示，散布図の作成，色分けによる視覚化の手法を段階的に説明する．各実装例では，ライブラリのインポート，データの読み込み，Web アプリケーションの構築，実行方法までを示す．

以下の3つの実装例を段階的に解説する．

• Web ブラウザでの pandas データフレーム表示
• pandas データフレームの散布図表示
• pandas データフレームの色付き散布図表示

2. 前準備（必要ソフトウェアの入手）

ここでは、最低限の事前準備について説明する。機械学習や深層学習を行う場合は、NVIDIA CUDA、Visual Studio、Cursorなどを追加でインストールすると便利である。これらについては別ページ https://www.kkaneko.jp/cc/dev/aiassist.htmlで詳しく解説しているので、必要に応じて参照してください。

winget install --scope machine --id Python.Python.3.12 -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --override "/quiet InstallAllUsers=1 PrependPath=1 Include_pip=1 Include_test=0 Include_launcher=1 InstallLauncherAllUsers=1"

python --version

winget install --scope machine --id Codeium.Windsurf -e --silent --disable-interactivity --force --accept-source-agreements --accept-package-agreements --custom "/SP- /SUPPRESSMSGBOXES /NORESTART /CLOSEAPPLICATIONS /DIR=""C:\Program Files\Windsurf"" /MERGETASKS=!runcode,addtopath,associatewithfiles,!desktopicon"
powershell -Command "$env:Path=[System.Environment]::GetEnvironmentVariable('Path','Machine')+';'+[System.Environment]::GetEnvironmentVariable('Path','User'); windsurf --install-extension MS-CEINTL.vscode-language-pack-ja --force; windsurf --install-extension ms-python.python --force; windsurf --install-extension Codeium.windsurfPyright --force"

pip install -U dash pandas seaborn plotly

3. 実行のための準備とその確認手順（Windows 前提）

3.1 プログラムファイルの準備

第5章のソースコードをテキストエディタ（メモ帳，Windsurf 等）に貼り付け，hoge.py として保存する（文字コード：UTF-8）．

3.2 実行コマンド

コマンドプロンプトでファイルの保存先ディレクトリに移動し，以下を実行する．

python hoge.py

3.3 動作確認チェックリスト

4. 概要・使い方・実行上の注意

Iris データセットの確認

本記事では Iris データセットを使用する．以下のプログラムでデータセットの内容を確認できる．

import pandas as pd
import seaborn as sns

X = sns.load_dataset('iris')
print(X)

データフレームの表示

Dash の DataTable コンポーネントにより，pandas データフレームを Web ブラウザ上に表形式で表示する．ソースコードは第5章の「データフレーム表示プログラム」に掲載している．

プログラムを実行し，Web ブラウザで localhost:8050 を開く．次の画面が表示されれば動作確認は完了である．

散布図の表示

Iris データセットの0列目と 1列目の散布図を表示する．dcc.Graph コンポーネントと plotly.graph_objs を使用する．ソースコードは第5章の「散布図表示プログラム」に掲載している．

【関連する外部ページ】 https://dash.plotly.com/

プログラムを実行し，Web ブラウザで localhost:8050 を開く．次の画面が表示されれば動作確認は完了である．

色付き散布図の表示

Iris データセットの0列目と 1列目の散布図を4列目の値で色分けして表示する．ソースコードは第5章の「色付き散布図表示プログラム」に掲載している．

【関連する外部ページ】 https://dash.plotly.com/

プログラムを実行し，Web ブラウザで localhost:8050 を開く．次の画面が表示されれば動作確認は完了である．

5. ソースコード

データフレーム表示プログラム

以下のプログラムをhoge.pyとして保存する．

# -*- coding: utf-8 -*-
from dash import Dash, html, dash_table
import pandas as pd
import seaborn as sns

X = sns.load_dataset('iris')

app = Dash(__name__, external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])

app.layout = html.Div(children=[
    html.H1(children='Iris DataSet'),
    html.Div(children='Iris DataSet Display'),
    dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in X.columns],
        data=X.to_dict("records"),
        page_size=20,
        sort_action="native"
    )
])

if __name__ == '__main__':
    app.run()

散布図表示プログラム

以下のプログラムをhoge.pyとして保存する．

# -*- coding: utf-8 -*-
from dash import Dash, html, dcc
import pandas as pd
import seaborn as sns
import plotly.graph_objs as go

X = sns.load_dataset('iris')

app = Dash(__name__, external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])

app.layout = html.Div(children=[
    html.H1(children='Iris DataSet'),
    html.Div(children='Iris DataSet Display'),
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                go.Scatter(
                    x=X.iloc[:,0],
                    y=X.iloc[:,1],
                    mode='markers',
                    marker={'size': 10, 'line': {'width': 0.5, 'color': 'white'}}
                )
            ],
            'layout': {'title': 'Iris DataSet Graph'}
        }
    )
])

if __name__ == '__main__':
    app.run()

色付き散布図表示プログラム

以下のプログラムをhoge.pyとして保存する．

# -*- coding: utf-8 -*-
from dash import Dash, html, dcc
import pandas as pd
import seaborn as sns
import plotly.graph_objs as go

X = sns.load_dataset('iris')

app = Dash(__name__, external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])

app.layout = html.Div(children=[
    html.H1(children='Iris DataSet'),
    html.Div(children='Iris DataSet Display'),
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                go.Scatter(
                    x=X[X.iloc[:,4]==i].iloc[:,0],
                    y=X[X.iloc[:,4]==i].iloc[:,1],
                    mode='markers',
                    marker={'size': 10, 'line': {'width': 0.5, 'color': 'white'}},
                    opacity=0.5,
                    name=i
                ) for i in X.iloc[:,4].unique()
            ],
            'layout': {'title': 'Iris DataSet Graph'}
        }
    )
])

if __name__ == '__main__':
    app.run()

6. まとめ

pandas と Dash の連携

pandas と Dash を組み合わせることで，データフレームの Web ブラウザでの表示と操作を実現できる．

DataTable によるデータフレーム表示

Dash の DataTable コンポーネントにより，pandas データフレームを Web ブラウザ上に表形式で表示できる．ページングやソート機能も利用可能である．

散布図の作成

dcc.Graph と plotly.graph_objs の Scatter により，データフレームの任意の列を指定した散布図を表示できる．

色分けによる視覚化

特定の列の値ごとに異なる色でプロットすることで，カテゴリごとのデータ分布を視覚的に把握できる．

段階的な実装

データフレームの表示から，散布図の作成，色分けによる視覚化へと段階的に進めることで，Dash による Web アプリケーション構築の手法を体系的に理解できる．