Irisデータを使ったシンプルなWebアプリ

dash_iris.py

from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
from sklearn.datasets import load_iris

app = Dash(__name__)

# データの読み込み
iris_data = load_iris()
iris = pd.DataFrame(data=iris_data.data, columns=iris_data.feature_names)
iris['species'] = [iris_data.target_names[i] for i in iris_data.target]

# 全体のレイアウト
app.layout = html.Div([
    html.H4('Irisデータの散布図'),
    dcc.Graph(id="iris-scatter-plot"),
    html.P("変数を選んでください:"),
    # html.Divを入れ子にする
    html.Div([html.Content("X軸を選んで下さい: "),
              dcc.Dropdown(iris.columns[:-1], iris.columns[0], id='x-col')]),
    html.Div([html.Content("Y軸を選んで下さい: "),
              dcc.Dropdown(iris.columns[:-1], iris.columns[0], id='y-col')]),
])

@app.callback(
    Output("iris-scatter-plot", "figure"), 
    Input("x-col", "value"),
    Input("y-col", "value"))
def update_scatter_plot(x_col, y_col):
    '''
    Inputの並び順に適当な引き数名を並べる（ここがちょっと分かりにくい）
    '''
    fig = px.scatter(iris,
                     x=x_col,
                     y=y_col,
                     title="萼片の長さと幅の関係",
                     color="species")
    # Outputとして返されて、HTMLの要素になる。
    return fig

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

streamlit_iris.py

import streamlit as st
import plotly.express as px
import pandas as pd
from sklearn.datasets import load_iris

# データの読み込み
iris_data = load_iris()
iris = pd.DataFrame(data=iris_data.data, columns=iris_data.feature_names)
iris['species'] = [iris_data.target_names[i] for i in iris_data.target]

st.title("Irisデータの散布図")

# 左に配置されるサイドバーの内容を指定
st.sidebar.header('変数を選んでください')
x_col = st.sidebar.selectbox('X軸の列', iris.columns[:-1])
y_col = st.sidebar.selectbox('Y軸の列', iris.columns[:-1])

# グラフを作る
fig = px.scatter(iris,
                 x=x_col,
                 y=y_col,
                 title="萼片の長さと幅の関係",
                 color="species")

# スクリプト本体の実行はWebアプリのメイン部分
st.write(fig)