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

前準備

Python の準備（Windows，Ubuntu 上）

• Windows での Python 3.10，関連パッケージ，Python 開発環境のインストール: 別ページ »で説明している．
• Ubuntu では，システム Pythonを使うことができる．Python3 開発用ファイル，pip, setuptools のインストール: 別ページ »で説明している．

【サイト内の関連ページ】

• Python のまとめ: 別ページ »にまとめ
• Google Colaboratory の使い方など: 別ページ »で説明している．

【関連する外部ページ】

Python の公式ページ: https://www.python.org/

Dash のインストール

• Dash のインストールが終わっていること

Iris データセットを確認してみる

Python プログラムの実行

import pandas as pd
import seaborn as sns

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

Web で pandas データフレームの表示、散布図

Web で pandas データフレームの表示を行う dash プログラム

ここでは、Iris データセットを使う

1. まず、次のようなPython プログラムをhoge.pyのようなファイル名で保存

   # -*- coding: utf-8 -*-
   import dash
   import dash_table
   import dash_core_components as dcc
   import dash_html_components as html
   import pandas as pd
   import seaborn as sns
   
   X = sns.load_dataset('iris')
   
   external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
   
   app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
   
   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("rows")
       )
   ])
   
   if __name__ == '__main__':
       app.run_server(debug=True)
   

2. hoge.py を実行
   • Windows の場合

     python hoge.py
     

   • Ubuntu の場合

     python3 hoge.py
     

3. Web ブラウザで、localhost:8050 を開く。次のような画面が出れば、動作OK
   

Web で pandas データフレームの散布図表示を行う dash プログラム

Iris データセットについて、0列目と 1列目の散布図を表示する．

【関連する外部ページ】 https://dash.plot.ly/getting-started

1. まず、次のようなPython プログラムをhoge.pyのようなファイル名で保存

   # -*- coding: utf-8 -*-
   import dash
   import dash_table
   import dash_core_components as dcc
   import dash_html_components as html
   import pandas as pd
   import seaborn as sns
   import plotly.graph_objs as go
   
   X = sns.load_dataset('iris')
   
   external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
   
   app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
   
   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_server(debug=True)
   

2. hoge.py を実行
   • Windows の場合

     python hoge.py
     

   • Ubuntu の場合

     python3 hoge.py
     

3. Web ブラウザで、localhost:8050 を開く。次のような画面が出れば、動作OK
   

Web で pandas データフレームの色付きの散布図表示を行う dash プログラム

Iris データセットについて、0列目と 1列目の散布図, 4列目を使って色分け,

【関連する外部ページ】 https://dash.plot.ly/getting-started

1. まず、次のようなPython プログラムをhoge.pyのようなファイル名で保存

   # -*- coding: utf-8 -*-
   import dash
   import dash_table
   import dash_core_components as dcc
   import dash_html_components as html
   import pandas as pd
   import seaborn as sns
   import plotly.graph_objs as go
   
   X = sns.load_dataset('iris')
    
   external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
   
   app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
   
   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_server(debug=True)
   

2. hoge.py を実行
   • Windows の場合

     python hoge.py
     

   • Ubuntu の場合

     python3 hoge.py
     

3. Web ブラウザで、localhost:8050 を開く。次のような画面が出れば、動作OK