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

金子邦彦研究室：　データベース、人工知能（AI)、データサイエンスの融合により不可能を可能にする

前準備

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

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

Python プログラムを動かしたい．※ Python のプログラム作成には、PyCharmなどが便利です。

import pandas as pd
import seaborn as sns

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

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

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

1. pandas データフレームの表示

   # -*- 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)
   

   

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

   

2. iris データセットについて、0列目と 1列目の散布図

   参考Webページ: https://dash.plot.ly/getting-started

   # -*- 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)
   

   

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

   

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

   参考Webページ: https://dash.plot.ly/getting-started

   # -*- 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)
   

   

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

   

   ---

   ---

   ---

   ---

   以下、書きかけ

4. 基本的な情報の表示
   • head: 先頭部分の表示
   • shape: サイズ
   • ndim: 次元数
   • columns: 属性名
   • info(): 各属性のデータ型

   print(iris.head())
   print(iris.info())
   print(iris.shape)
   print(iris.ndim)
   print(iris.columns)
   

   

各属性の要約統計量（総数、平均、標準偏差、最小、四分位点、中央値、最大）

import seaborn as sns

iris = sns.load_dataset('iris')


print(iris.describe())

ヒストグラムの表示

plt.style.use('ggplot')
plt.hist(iris.iloc[:,1])
plt.show()

plt.style.use('ggplot')
plt.hist(iris.iloc[:,2])
plt.show()

２次元ヒストグラム

plt.style.use('ggplot')
plt.hist2d(iris.iloc[:,1], iris.iloc[:,2])
plt.show()