こんにちは、JS2IIUです。st.columnsを使って関連性の高いグラフを横に並べる方法について説明していきます。今回もよろしくお願いします。
1. はじめに
データの可視化は、データ分析や報告資料を作成する上でとても重要です。
特に、複数のグラフを並べて比較表示することで、より深い洞察が得られることがあります。
本記事では、Python製のWebアプリフレームワークであるStreamlitを使って、複数種類のグラフを横に並べて表示する方法をわかりやすく解説します。
2. Streamlitとは？（簡単なおさらい）
Streamlit（ストリームリット）は、Pythonで簡単にインタラクティブなWebアプリを作れるオープンソースのフレームワークです。
以下のような特徴があります：
- Pythonだけで開発できる（HTMLやJavaScriptは不要）
- データ可視化や機械学習モデルのデモが簡単に作れる
- コードを保存して実行するだけでWebアプリになる
例えば、以下のようなコードでグラフを表示できます：
import streamlit as st
import pandas as pd
import numpy as np
data = pd.DataFrame(np.random.randn(20, 3), columns=['A', 'B', 'C'])
st.line_chart(data)このように、数行で折れ線グラフが表示できてしまうのがStreamlitの魅力です。
3. st.columnsの基本的な使い方
複数のグラフを横に並べて表示するには、Streamlitのst.columns機能を使います。
📌 基本構文：
col1, col2 = st.columns(2)
col1.write("左のカラム")
col2.write("右のカラム")このように、st.columns(2)で2つのカラムを作成し、それぞれに表示内容を指定できます。
以下は簡単な例です：
import streamlit as st
col1, col2 = st.columns(2)
col1.write("これは左側のカラムです。")
col2.write("これは右側のカラムです。")
4. 実践：複数のグラフを並べて表示する方法
それでは、実際に複数のグラフを並べて表示するアプリを作ってみましょう。
🔹 ステップ1：ライブラリのインポートとデータ作成
まずは、必要なライブラリをインポートして、グラフ表示用のデータを作成します。
import streamlit as st
import pandas as pd
import numpy as np
# サンプルデータ作成
np.random.seed(0)
data = pd.DataFrame(
np.random.randn(20, 3),
columns=['A', 'B', 'C']
)🔹 ステップ2：グラフを並べて表示
次に、st.columnsを使って2種類のグラフを並べて表示してみましょう。
# 2列レイアウトを作成
col1, col2 = st.columns(2)
# 左側に折れ線グラフ
col1.subheader("折れ線グラフ")
col1.line_chart(data)
# 右側に棒グラフ
col2.subheader("棒グラフ")
col2.bar_chart(data)このコードを実行すると、左に折れ線グラフ、右に棒グラフが表示され、データの違いや傾向を横に並べて比較できます。
5. 応用例：3つ以上のグラフを比較表示
st.columnsでは、3列以上にも対応しています。
# 3列に分割
col1, col2, col3 = st.columns(3)
# それぞれ異なるグラフを表示
col1.subheader("折れ線グラフ")
col1.line_chart(data)
col2.subheader("棒グラフ")
col2.bar_chart(data)
col3.subheader("エリアチャート")
col3.area_chart(data)これで3つのグラフが横並びに表示され、より多角的な比較ができます。
6. 注意点と見やすくするコツ
✅ 注意点：
- 横幅の狭い画面ではカラムの表示がつぶれることがあります。必要に応じてカラム数を減らすか、縦並びに変更しましょう。
- グラフのスケールや軸を揃えることで比較がしやすくなります。
💡 見やすくするコツ：
subheader()やcaption()を使ってグラフにタイトルを付ける- カスタムグラフ（例：Altair、Plotlyなど）を使えばより詳細なカスタマイズも可能です
7. まとめ
本記事では、Streamlitのst.columnsを使って複数のグラフを横に並べて表示する方法を紹介しました。
✔️ ポイントまとめ：
st.columnsを使えば複数の要素を横並びにできる- グラフを並べることで視覚的に比較しやすくなる
line_chart,bar_chart,area_chartなどの基本グラフは簡単に実装可能- カスタムグラフや工夫次第で表現の幅が広がる
この方法を活用することで、データ分析レポートやインタラクティブなダッシュボードの完成度がぐっと上がります。ぜひ試してみてください！
8. 参考リンク
最後に書籍のPRです。
24年9月に出版された「ハイパーモダンPython-信頼性の高いワークフローを構築するモダンテクニック」、Claudio Jolowicz著、嶋田、鈴木訳。開発環境の構築、プロジェクトの管理、テストに関して実践的な内容でとても参考になる一冊です。Poetryについても詳しく説明されています。ぜひ手に取ってみてください。
最後まで読んでいただきありがとうございます。
コメント