Squadbase

データ可視化の実践

Streamlitを使った効果的なデータ可視化手法とダッシュボード設計の実践方法を習得する

「作成したダッシュボードが利用者に響かない」「データはあるのに意思決定に活用されない」—こうした課題は、多くのデータ組織が直面する現実です。

データ分析の価値は、結果を効果的に可視化し、適切な相手に適切な形で情報を届けることで初めて実現されます。この章では、Streamlitを使った効果的なデータ可視化手法を習得します。

データ可視化の基本原則

BI/ダッシュボードにおける効果的な可視化の原則

効果的なデータ可視化を実現するために、以下の点を意識することが重要です。

  1. 明確な目的 ... 何を伝えたいのかを明確にする
  2. 適切なチャートタイプ ... データの性質に応じた可視化手法の選択
  3. シンプルさ ... 不要な装飾や情報の除去
  4. 一貫性 ... 色彩やフォント、レイアウトの統一
  5. インタラクティブ性 ... ユーザーが探索できる仕組み

また、Streamlitであれば、データ可視化とマークダウン形式でのドキュメントを組み合わせることができます。チャート表示の近くに、ユーザーのための説明を記載することで、より理解しやすいダッシュボードを作成できます。

Streamlitでのチャート表示

可視化ライブラリの選び方

Streamlitでは複数の可視化ライブラリからプロジェクトに最適なものを選ぶことができます。以下の表は、代表的なライブラリとその特徴をまとめたものです。

AIの支援を受ければ、それぞれのライブラリを使った実装が障壁になることはほとんどないと思うので、目的に応じて選択していきましょう。

1. Streamlit Native Charts

Streamlitは標準でいくつかのチャートをサポートしています。これらは簡単に使えるため、プロトタイプや初期分析に最適です。

Streamlitの標準チャート機能を使えば、データ分析の初期段階で迅速にデータの概要を把握できます。

import streamlit as st
import pandas as pd

# サンプルデータ
sales_data = pd.DataFrame({
    'month': ['1月', '2月', '3月', '4月', '5月', '6月'],
    'sales': [100, 120, 140, 110, 160, 180]
})

# 1行でグラフ作成
st.line_chart(sales_data.set_index('month'))

2. Plotly

Plotlyは、ユーザー操作を受け付けるインタラクティブなグラフを作成することが得意です。また、データ可視化の種類もとても多いため、複雑なデータ可視化が必要な場合には非常に有用です。

import plotly.express as px

# インタラクティブグラフ作成
fig = px.bar(sales_data, x='month', y='sales', 
             title='月別売上実績')
st.plotly_chart(fig, use_container_width=True)

3. Altair

Altairもインタラクティブなグラフを簡単に作成できるライブラリです。また、Altairでは Vega-Lite という宣言型のグラフ記述言語を使用するため、 Vega-Lite に則った描画に対応した環境に成果物を持っていけるのも大きな特徴です。

import altair as alt

# Altairでのグラフ作成
chart = alt.Chart(sales_data).mark_bar().encode(
    x='month',
    y='sales',
    tooltip=['month', 'sales']
).properties(
    title='月別売上実績'
)
st.altair_chart(chart, use_container_width=True)

4. Matplotlib

Matplotlibは、Pythonのデータ可視化ライブラリの中でも最も広く使われており、細かいカスタマイズが可能です。出力は静的な画像ですが、品質の高いグラフを作成できます。

import matplotlib.pyplot as plt

# Matplotlibでのグラフ作成
fig, ax = plt.subplots(figsize=(8, 6))
ax.hist(data['sales'], bins=50, alpha=0.7, color='skyblue', edgecolor='black')
ax.set_xlabel('売上(円)')
ax.set_ylabel('頻度')
ax.set_title('売上分布ヒストグラム')
ax.grid(True, alpha=0.3)
st.pyplot(fig)

5. Bokeh

Bokehは、特に大規模なデータセットを扱う際に強力なライブラリです。リアルタイムのデータ更新やインタラクティブなダッシュボード作成に適しています。

from bokeh.plotting import figure

p = figure(title='月別売上実績', x_axis_label='月', y_axis_label='売上(万円)')
p.vbar(x='month', top='sales', source=sales_data, width=0.9)
st.bokeh_chart(p, use_container_width=True)

レイアウトとUI設計

可視化したデータを効果的に表示するためには、適切なレイアウト設計が欠かせません。Streamlitでは、直感的なレイアウト関数を使って、プロフェッショナルなダッシュボードを構築できます。ここでは、実用的なレイアウト設計パターンとUI設計の原則を学んでいきます。

st.columnsを使ったグリッドレイアウト

重要な数値を並べて表示したい時は、st.columns()が便利です:

# KPI表示
col1, col2, col3 = st.columns(3)
with col1:
    st.metric("売上", "1,234万円", "12%")

サイドバーでの操作メニュー

フィルターや設定項目は、サイドバーにまとめるとすっきりします:

# サイドバーでフィルター設定
with st.sidebar:
    department = st.selectbox("部門", ["営業", "マーケティング"])

コンテナとエキスパンダーによる情報整理

# コンテナを使った情報のグループ化
with st.container():
    st.subheader("売上分析")
    
    # メトリクス表示
    metric_cols = st.columns(4)
    with metric_cols[0]:
        st.metric("今月売上", "1,234万円")
    with metric_cols[1]:
        st.metric("前月比", "12%", delta="12%")
    with metric_cols[2]:
        st.metric("前年同月比", "8%", delta="8%")
    with metric_cols[3]:
        st.metric("目標達成率", "105%", delta="5%")

# エキスパンダーを使った詳細情報の格納
with st.expander("詳細データを表示"):
    st.dataframe(sales_data)
    
with st.expander("分析手法について"):
    st.write("""
    この分析では以下の手法を使用しています:
    - 前年同月比による季節性の考慮
    - 移動平均による トレンド分析
    - 外れ値の検出と除外
    """)

インタラクティブ要素の追加

静的なグラフを超えて、ユーザーが能動的にデータを探索できるダッシュボードを作成しましょう。

フィルター機能の実装

# フィルター設定
with st.sidebar:
    category = st.selectbox("商品カテゴリ", ["電子機器", "衣料品"])
    sales_range = st.slider("売上範囲", 0, 1000, (100, 500))

# フィルター適用したデータを表示
filtered_data = data[data['category'] == category]
st.bar_chart(filtered_data)

リアルタイム更新機能

# 自動更新設定
auto_refresh = st.sidebar.checkbox("自動更新")
if auto_refresh:
    st.rerun()  # ページを再読み込み

ドリルダウン機能の実装

# 階層的データ探索
selected_country = st.selectbox("国を選択", ["Japan", "USA"])
if st.button("詳細表示"):
    # 選択した国の地域データを表示
    region_data = get_region_data(selected_country)
    st.bar_chart(region_data)

AIを活用したチャート生成

生成AI(ChatGPT、Claude)でコード作成時間を大幅短縮。今まで数時間かかっていた複雑なチャート作成が、自然言語の指示で数分で完成します。

ChatGPT/Claudeを使ったPlotlyコード生成

AIツールを活用することで、複雑なチャートも簡単に生成できます。

効果的なプロンプトの例

あなたは優秀なデータアナリストです。以下の要件に基づいてPlotlyを使ったPythonコードを生成してください:

データ: 月別売上データ(month, sales, profit, region)
要件:
1. 地域別の売上を棒グラフで表示
2. 各バーの上に売上値を表示
3. 地域ごとに異なる色を使用
4. タイトルとラベルを日本語で設定
5. Streamlitで表示可能な形式で出力

出力形式: 完全なPythonコード(import文を含む)

生成されたコードの例

import plotly.express as px
import plotly.graph_objects as go
import streamlit as st
import pandas as pd

# ECサイトの実際のビジネスデータ例
# Pandasについて詳しくは: https://pandas.pydata.org/docs/
data = pd.DataFrame({
    'month': ['1月', '2月', '3月', '4月', '5月', '6月'],
    'sales': [2500, 2800, 3200, 2900, 3500, 4100],  # 万円
    'orders': [1200, 1350, 1480, 1300, 1600, 1850],  # 注文数
    'conversion_rate': [2.8, 3.1, 3.4, 2.9, 3.6, 4.2],  # %
    'region': ['関東', '関西', '中部', '九州', '北海道', '東北']
})

# Plotlyチャートの作成
fig = px.bar(data, 
             x='region', 
             y='sales',
             title='地域別売上実績',
             labels={'sales': '売上(万円)', 'region': '地域'},
             color='region')

# 値をバーの上に表示
fig.update_traces(texttemplate='%{y}万円', textposition='outside')

# レイアウトの調整
fig.update_layout(
    showlegend=False,
    title_font_size=16,
    xaxis_title_font_size=14,
    yaxis_title_font_size=14
)

# Streamlitで表示
st.plotly_chart(fig, use_container_width=True)

プロンプトエンジニアリング技法

1. 具体的な指示

悪い例: "売上グラフを作って"
良い例: "2023年1月〜12月の月別売上データを折れ線グラフで表示し、前年同月比を色で区別して表示してください"

2. サンプルデータの提供

以下のデータ構造を使用:
```python
data = {
    'date': ['2023-01-01', '2023-02-01', ...],
    'sales': [1000, 1200, ...],
    'category': ['A', 'B', ...]
}

3. 出力形式の指定

出力要件:
- import文を含む完全なPythonコード
- Streamlitで実行可能
- エラーハンドリングを含む
- 日本語でのコメント付き

まとめと次のステップ

この章で学んだデータ可視化のスキルを、実際のプロジェクトで活用してみましょう。

今すぐ試せる実践アクション

  1. 簡単なグラフ作成: 自分のデータでst.line_chart()を試す
  2. AIコード生成: ChatGPTにPlotlyグラフ作成を依頼する
  3. レイアウト設計: st.columns()でKPIダッシュボードを作る
  4. インタラクティブ機能: サイドバーフィルターを追加する

中級者向けチャレンジ

  • 複数チャートの組み合わせ: 売上+利益率のダブル軸グラフ
  • モバイル対応: レスポンシブデザインの実装
  • リアルタイムダッシュボード: 自動更新機能の組み込み

成功のためのポイント

次章では、これらの技術をベースに、Text-to-SQL(自然言語からSQL生成)やText-to-Python(自然言語からPythonコード生成)を活用したオンデマンドなデータ分析ダッシュボードの構築方法を学んでいきます。

参考リンク・リソース

公式ドキュメント

チュートリアル・ガイド

AI活用事例・ツール

データ可視化理論・ベストプラクティス