トップページ -> コンピュータ実習 -> Web サービスのプログラミング -> データフレームを Web ページに表示(Dash を使用)
サイトマップへ]

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

サイト構成 連絡先,業績など コンピュータ実習 データの扱い コンピュータ設定 教材(公開) サポートページ

ユースケース:Web で pandas データフレームを簡単に表示したい。そして、ユーザ側で操作ができるようにしたい。

サイト内の関連Webページ

参考Webページ


前準備


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. 基本的な情報の表示
    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()

2次元ヒストグラム

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


本サイトのサイトマップは,サイトマップのページをご覧下さい. 本サイト内の検索は,サイト内検索のページをご利用下さい.
問い合わせ先: 金子邦彦(かねこ くにひこ)