Streamlitメモ②

# Streamlitによるデータ可視化

## 1. はじめに
データを視覚的に表現することは、情報を理解しやすくするだぬ。この記事では、PythonのStreamlitを使用して、ユーザーの操作に応じて動的にデータを生成し、可視化する方法を紹介するだぬ。

## 2. 必要なライブラリのインストール
まずは、必要なライブラリをインストールするだぬ。以下のコマンドでStreamlit、pandas、numpyをインストールしようだぬ。
```bash
pip install streamlit pandas numpy
```

## 3. コード例１ 
ラインチャートの作成を通じて、基本的なデータ可視化を学ぶだぬ。

#### 1.1 CSVデータを生成するだぬ
ユーザーがボタンを押すことで、以下のコードがCSVファイルを生成するだぬ。データはランダムに生成され、`sample_data.csv`として保存されるだぬ。
```python
if st.button('sample.csvを生成'):
    df = pd.DataFrame({
        'date': pd.date_range(start='2021-01-01', periods=100, freq='D'),
        'value': np.random.rand(100)
    })
    df.to_csv('sample_data.csv', index=False)
    st.write('sample.csvを生成しただぬ')
```

#### 1.2 CSVデータを可視化するだぬ
生成されたCSVファイルを読み込んで、ラインチャートでデータを可視化するだぬ。ボタンを押すことで、以下のコードが実行されるだぬ。
```python
if st.button('sample.csvを可視化'):
    df = pd.read_csv('sample_data.csv')
    st.line_chart(df.set_index('date'))
```

ターミナルで以下を実行するとブラウザが起動するだぬ。
```bash
streamlit run app.py
```

実行結果は以下の通りだぬ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951968/dc9f9c2c-05e5-5d6f-2f46-52b068a7929d.png)



## 4. コード例２
複数のデータシリーズを用いたラインチャートを作成し、データの比較が可能になるだぬ。

#### 2.1 CSVデータを生成するだぬ
ボタン操作により、複数のデータシリーズを含むCSVファイルを生成するだぬ。
```python
if st.button('multi_series_data.csvを生成'):
    df = pd.DataFrame({
        'date': pd.date_range(start='2021-01-01', periods=100, freq='D'),
        'value1': np.random.rand(100),
        'value2': np.random.rand(100),
        'value3': np.random.rand(100)
    })
    df.to_csv('multi_series_data.csv', index=False)
    st.write('multi_series_data.csvを生成しただぬ')
```

#### 2.2 CSVデータを可視化するだぬ
生成されたCSVデータからユーザーが選択したカラムのデータをラインチャートで可視化するだぬ。
```python
df = pd.read_csv('multi_series_data.csv')
available_columns = df.columns[1:]
selected_columns = st.multiselect("描画するカラムを選択だぬ", available_columns)
st.line_chart(df.set_index('date')[selected_columns])
```

先ほどと同様に、ターミナルで以下を実行するとブラウザが起動するだぬ。
```bash
streamlit run app.py
```

実行結果は以下の通りだぬ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2951968/17760235-65ca-6761-8573-959e961c6a4c.png)



## 5. ソースコード最終版
これまでに登場したコード断片を1つに統合した全体像は以下の通りだぬ。
```python
# モジュール
import streamlit as st
import pandas as pd
import pandas as pd
import numpy as np

### 1. ラインチャート
st.write('## 1. ラインチャート')

# 1.1 データ生成部
st.write('#### 1.1. CSVデータを生成するだぬ')
if st.button('sample.csvを生成'):
    # データ生成
    df = pd.DataFrame({
        'date': pd.date_range(start='2021-01-01', periods=100, freq='D'),
        'value': np.random.rand(100)
    })
    # CSVに保存
    df.to_csv('sample_data.csv', index=False)
    # メッセージ表示
    st.write('sample.csvを生成しただぬ')

# 1.2 ラインチャート描画部
st.write('#### 1.2. CSVデータを可視化するだぬ') # テキスト表示
if st.button('sample.csvを可視化'):
    df = pd.read_csv('sample_data.csv') # CSV読み込み
    st.line_chart(df.set_index('date')) # チャート描画


### 2. マルチシリーズラインチャート
st.write('## 2. マルチシリーズラインチャート')

# 2.1 データ生成部
st.write('#### 2.1. CSVデータを生成するだぬ')
if st.button('multi_series_data.csvを生成'):
    df = pd.DataFrame({
        'date': pd.date_range(start='2021-01-01', periods=100, freq='D'),
        'value1': np.random.rand(100),
        'value2': np.random.rand(100),
        'value3': np.random.rand(100),
    })
    # CSVに保存
    df.to_csv('multi_series_data.csv', index=False)
    # メッセージ表示
    st.write('multi_series_data.csvを生成しただぬ')

# 2.2 マルチシリーズラインチャート描画部
st.write('#### 2.2. CSVデータを可視化するだぬ') # テキスト表示
# ユーザに選択されたカラムのラインチャートを描画する
df = pd.read_csv('multi_series_data.csv') # CSV読み込み
available_columns = df.columns[1:] # 描画可能なカラムを取得（dateを除外する）
selected_columns = st.multiselect("描画するカラムを選択だぬ", available_columns) # 描画対象カラムを選択
st.line_chart(df.set_index('date')[selected_columns]) # チャート描画 

```


## 6. まとめ
Streamlitを使えば、ボタン操作一つでデータを生成し、それを可視化するアプリケーションを手軽に開発できるだぬ。これにより、インタラクティブなデータ分析が可能になり、より深い洞察を得ることができるだぬ。興味があるだぬのなら、さまざまなデータセットでこれらのコードを試してみるだぬ。

---
【筆者情報】カワウソ好き。文末の"だぬ"は『可愛い嘘のカワウソ』の真似。温かい目で見てくれると嬉しいです。