Dashでウェブアプリ作成②

はじめに

Dashでウェブアプリ作成①では、テーブルの可視化を行ってみた。今回は図を表示させてみる。

図の表示

前回記事でgenerate_tableを実行していた部分をdcc.Graphに変更するだけで実行できる。以下にコードを示す。表示に使うデータは、Rで基礎分析結果をCSV出力①全体編、Rで基礎分析結果をCSV出力②量的変数編、Rで基礎分析結果をCSV出力③質的変数編で作成したCSVファイルを用いている。

figure.py

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

df1 = pd.read_csv(
    "c:/***/default_of_credit_card_clients.csv", header=1)
df1.columns.values[0] = ''
df2 = pd.read_csv(
    "c:/***/summary.csv", header=0)
df2.columns.values[0] = ''
df3 = pd.read_csv(
    "c:/***/stats.csv", header=0)
df3.columns.values[0] = ''
df4 = pd.read_csv(
    "c:/***/r.csv", header=0)
df4.columns.values[0] = ''
df5 = pd.read_csv(
    "c:/***/SEX.csv", header=0)
df5.columns.values[0] = 'SEX'
df6 = pd.read_csv(
    "c:/***/EDUCATION.csv", header=0)
df6.columns.values[0] = 'EDUCATION'
df7 = pd.read_csv(
    "c:/***/MARRIAGE.csv", header=0)
df7.columns.values[0] = 'MARRIAGE'
df8 = pd.read_csv(
    "c:/***/default payment next month.csv", header=0)
df8.columns.values[0] = 'default payment next month'


def generate_table(dataframe, max_rows=30):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    html.H4(children='default of credit card clients Data Set'),
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='raw data', value='tab-1'),
        dcc.Tab(label='number of missing values', value='tab-2'),
        dcc.Tab(label='stats', value='tab-3'),
        dcc.Tab(label='cor', value='tab-4'),
        dcc.Tab(label='SEX', value='tab-5'),
        dcc.Tab(label='EDUCATION', value='tab-6'),
        dcc.Tab(label='MARRIAGE', value='tab-7'),
        dcc.Tab(label='default payment next month', value='tab-8')
    ]),
    html.Div(id='tabs-example-content'),

])


@app.callback(Output('tabs-example-content', 'children'), Input('tabs-example', 'value'))
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
            generate_table(df1)
        ])
    elif tab == 'tab-2':
        return html.Div([
            generate_table(df2, max_rows=30)
        ])
    elif tab == 'tab-3':
        return html.Div([
            generate_table(df3, max_rows=20)
        ])
    elif tab == 'tab-4':
        return html.Div([
            generate_table(df4, max_rows=20)
        ])
    elif tab == 'tab-5':
        return html.Div([
            generate_table(df5, max_rows=20),
            dcc.Graph(
                figure=px.bar(df5, x='SEX', y="Freq")
            )
        ])
    elif tab == 'tab-6':
        return html.Div([
            generate_table(df6, max_rows=20),
            dcc.Graph(
                figure=px.bar(df6, x='EDUCATION', y="Freq")
            )
        ])
    elif tab == 'tab-7':
        return html.Div([
            generate_table(df7, max_rows=20),
            dcc.Graph(
                figure=px.bar(df7, x='MARRIAGE', y="Freq")
            )
        ])
    elif tab == 'tab-8':
        return html.Div([
            generate_table(df8, max_rows=20),
            dcc.Graph(
                figure=px.bar(df8, x='default payment next month', y="Freq")
            )
        ])


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

実行結果は以下のようになる。