💭

Streamlit入門3

2024/05/01に公開

Python

Streamlit

tech

DataFrameの表示・編集・グラフ化

1. はじめに

この記事では、Streamlitを使用してCSVデータを生成し、DataFrameを表示・編集し、高度なチャートで可視化する方法を段階的に解説するだぬ。想定する読者は以下の通りだぬ。

Python環境を構築済
Pythonの基本文法は理解している
pandasのDataFrameの使用経験がある
著者の先行記事『Streamlit入門1』の内容を理解している

2. 必要なライブラリのインストール

最初に、必要なライブラリをインストールするだぬ。以下のコマンドでStreamlit、pandas、numpy、plotlyをインストールするだぬ。

pip install streamlit pandas numpy plotly

3. サンプルコードの解説

3.1. サンプルコード①

最初に、ユーザーが入力する行数に基づいてCSVデータを生成し、それをDataFrameとして表示する方法について説明するだぬ。

import streamlit as st
import pandas as pd
import numpy as np

st.write('### 1. CSVデータを生成して、テーブル表示する')
filename = 'sample.csv'
num_data = st.number_input('生成するデータの行数', min_value=1, value=3)
if st.button(f'{filename}を生成'):
    df = pd.DataFrame({
        '日付': pd.date_range(start='2021-01-01', periods=num_data, freq='D'),
        '温度': np.random.rand(num_data) * 30,
        '湿度': np.random.randint(40, 100, size=num_data)
    })
    df.to_csv(filename, index=False)
    st.write(f'{filename}を生成しただぬ')

data = pd.read_csv(filename)
st.write(data)

実行結果：

3.2. サンプルコード②

次に、編集可能なデータフレームを表示し、その編集結果を簡易チャートで可視化する方法について説明するだぬ。

import plotly.express as px

st.write("### 2. 編集可能なテーブルを表示し、編集結果をグラフ化する")
edited_data = st.data_editor(data, num_rows=10)

fig = px.line(edited_data, x='日付', y='温度', title='温度の時系列データ', markers=True)
st.plotly_chart(fig)

実行結果：

3.3. サンプルコード③

最後に、編集したデータをより高度なチャートで視覚化し、温度と湿度の時系列データを同時に表示する方法について説明するだぬ。

import plotly.graph_objects as go

st.write("### 3. 編集結果をインタラクティブなグラフで可視化する")
fig = go.Figure()
fig.add_trace(go.Scatter(x=edited_data['日付'], y=edited_data['温度'], mode='lines+markers', name='温度', line=dict(color='red')))
fig.add_trace(go.Scatter(x=edited_data['日付'], y=edited_data['湿度'], mode='lines+markers', name='湿度', line=dict(color='blue'), yaxis='y2'))

fig.update_layout(
    title='温度と湿度の時系列データ',
    xaxis=dict(showgrid=False, showline=True, ticks='inside', tickcolor='black'),
    yaxis=dict(title='温度 [℃]', showgrid=False, showline=True, ticks='inside', tickcolor='black'),
    yaxis2=dict(title='湿度 [%]', overlaying='y', side='right', showgrid

=False, showline=True, ticks='inside', tickcolor='black')
)
st.plotly_chart(fig)

実行結果：

Plotlyのグラフなので拡大/縮小、ホバーで情報表示、凡例クリックで表示/非表示の切り替えなど、インタラクティブな操作が可能だぬ。

4. ソースコード最終版

import streamlit as st
import pandas as pd
import numpy as np


'''サンプルコード１'''
### データフレームを表示するだけのシンプルなコードです.
# データ生成部
st.write('### 1. CSVデータを生成して、テーブル表示する')
filename = 'sample.csv'
num_data = st.number_input('生成するデータの行数', min_value=1, value=3)# データ数(行数)
if st.button(f'{filename}を生成'):
    # データ生成
    df = pd.DataFrame({
    '日付': pd.date_range(start='2021-01-01', periods=num_data, freq='D'),
    '温度': np.random.rand(num_data) * 30,  # 温度 (0から30の間でランダム)
    '湿度': np.random.randint(40, 100, size=num_data)  # 湿度 (40%から100%の間でランダム)
    })
    # CSVに保存
    df.to_csv(filename, index=False)
    # メッセージ表示
    st.write(f'{filename}を生成しただぬ')

# CSVデータの読み込み
data = pd.read_csv(filename)

# DataFrameを画面に表示
st.write(data)


'''サンプルコード２'''
### 編集可能なデータフレームを表示して、編集結果を表示するコードです。
st.write("### 2. 編集可能なテーブルを表示し、結果をグラフ化する")
edited_data = st.data_editor(data, num_rows=10) #ここで編集結果を取得している

# 編集結果を表示
import plotly.express as px
fig = px.line(edited_data, x='日付', y='温度', title='温度の時系列データ', markers=True)
st.plotly_chart(fig)


'''サンプルコード３'''
st.write("### 3. 編集結果をインタラクティブなグラフで可視化する")
import plotly.graph_objects as go

fig = go.Figure()
fig.add_trace(go.Scatter(x=edited_data['日付'], 
                         y=edited_data['温度'], 
                         mode='lines+markers', 
                         name='温度', 
                         line=dict(color='red')
                         ))
fig.add_trace(go.Scatter(x=edited_data['日付'], 
                         y=edited_data['湿度'], 
                         mode='lines+markers', 
                         name='湿度', 
                         line=dict(color='blue'), 
                         yaxis='y2' # 第二軸を指定
                         )) 

# X軸, Y軸の設定
fig.update_layout(
    # グラフのタイトル
    title='温度と湿度の時系列データ',
    # X軸
    xaxis=dict(
        showgrid=False, # x軸のグリッドを非表示
        showline=True, # x軸のラインを表示
        ticks='inside', # x軸の目盛りを内側に表示
        tickcolor='black', # x軸の目盛りの色
    ),
    # Y軸
    yaxis=dict(
        title='温度 [℃]', # y軸のタイトル
        showgrid=False, # y軸のグリッドを非表示
        showline=True, # y軸のラインを表示
        ticks='inside', # y軸の目盛りを内側に表示
        tickcolor='black', # y軸の目盛りの色
    ),
    # 第二軸
    yaxis2=dict(
        title='湿度 [%]', # 第二軸のタイトル
        overlaying='y', # y軸と重ねる
        side='right', # 右側に表示
        showgrid=False, # y軸のグリッドを非表示
        showline=True, # y軸のラインを表示
        ticks='inside', # y軸の目盛りを内側に表示
        tickcolor='black', # y軸の目盛りの色
    )
)

st.plotly_chart(fig) # チャート描画