📋 このステップで学ぶこと
- サンキーダイアグラムの概念と用途
- ノード(節点)とリンク(流れ)の定義方法
- 基本的なサンキーダイアグラムの作成
- 色のカスタマイズ
- 実務例(顧客遷移、エネルギーフロー)
- インタラクティブ機能の活用
🌊 1. サンキーダイアグラムとは
サンキーダイアグラムの基本概念
サンキーダイアグラム(Sankey Diagram)は、フロー(流れ)を視覚化するための特殊なグラフです。19世紀のアイルランド人技術者マシュー・サンキーが考案しました。
最大の特徴は、矢印(帯)の太さで量を表現することです。太い帯ほど多くの量が流れていることを示します。これにより、どこからどこへ、どれだけの量が流れているかが一目でわかります。
🌊 サンキーダイアグラムの主な用途
| 用途 |
具体例 |
何がわかるか |
| 顧客遷移分析 |
ウェブサイトのページ遷移、購買プロセス |
離脱ポイント、コンバージョン率 |
| エネルギーフロー |
発電→送電→消費の流れ |
エネルギー変換効率、ロス |
| 資金フロー |
予算配分、収支の流れ |
お金の行き先、配分割合 |
| 物流 |
生産→流通→販売の流れ |
物流経路、在庫の流れ |
| ユーザー行動 |
アプリ内の画面遷移 |
ユーザーの行動パターン |
サンキーダイアグラムの構成要素
サンキーダイアグラムは、ノード(Node)とリンク(Link)という2つの要素で構成されます。
【サンキーダイアグラムの構成要素】
┌────────────────────────────────────────────────────────┐
│ │
│ ノード リンク ノード │
│ ┌─────┐ ════════════════ ┌─────┐ │
│ │ │ ════════════════▶ │ │ │
│ │ A │ ════════════════ │ C │ │
│ │ │ ↑ │ │ │
│ └─────┘ 太さ = 量 └─────┘ │
│ │ ▲ │
│ │ ══════════════════ │ │
│ └───▶ ══════════════════▶ ────┘ │
│ ══════════════════ │
│ │
└────────────────────────────────────────────────────────┘
【構成要素の説明】
┌─────────────┬──────────────────────────────────────────┐
│ ノード(Node)│ 状態や地点を表す「箱」 │
│ │ 例: トップページ、商品ページ、購入完了 │
├─────────────┼──────────────────────────────────────────┤
│ リンク(Link)│ ノード間の流れを表す「帯」 │
│ │ 太さで量(人数、金額など)を表現 │
├─────────────┼──────────────────────────────────────────┤
│ source │ リンクの開始ノード(どこから) │
├─────────────┼──────────────────────────────────────────┤
│ target │ リンクの終了ノード(どこへ) │
├─────────────┼──────────────────────────────────────────┤
│ value │ リンクの値(どれだけ流れるか) │
└─────────────┴──────────────────────────────────────────┘
💡 身近な例:ウェブサイトの遷移
ECサイトで150人がトップページに訪問した場合を考えてみましょう。
【ウェブサイト遷移の例】
トップページ(150人)
│
├──▶ 商品一覧(100人) ───▶ 商品詳細(60人) ───▶ カート(30人) ───▶ 購入完了(20人)
│ │ │ │
│ │ │ └───▶ 離脱(10人)
│ │ │
│ │ └───▶ 離脱(30人)
│ │
│ └───▶ 離脱(40人)
│
└──▶ 離脱(50人)
【読み取れること】
・150人中20人が購入 → コンバージョン率 13.3%
・最大の離脱ポイントは「トップページ→商品一覧」(50人離脱)
・商品詳細まで来た人の50%がカートに追加
・カートまで来た人の67%が購入完了
💡 サンキーダイアグラムの読み方のコツ
| 見るポイント |
意味 |
ビジネスへの示唆 |
| 帯の太さ |
流れる量(大きいほど太い) |
主要な流れがどこかわかる |
| 分岐 |
1つのノードから複数の行き先 |
選択肢の分布がわかる |
| 合流 |
複数のノードから1つに集まる |
最終目標への経路がわかる |
| 色 |
カテゴリや状態の区別 |
成功/失敗、種類の違いがわかる |
📊 2. 基本的なサンキーダイアグラムの作成
Plotlyでのサンキーダイアグラム
Plotlyを使うと、インタラクティブなサンキーダイアグラムを簡単に作成できます。基本的な構造を理解しましょう。
📝 サンキーダイアグラム作成の流れ
- ノード(節点)のリストを定義
- リンク(流れ)を定義(source, target, value)
- go.Sankey()でグラフオブジェクトを作成
- レイアウトを設定して表示
インデックスの仕組みを理解する
サンキーダイアグラムでは、ノードを0から始まるインデックス(番号)で指定します。これが最も重要なポイントです。
【インデックスの仕組み】
ノードのリスト: [‘A’, ‘B’, ‘C’, ‘D’]
↓ ↓ ↓ ↓
インデックス: 0 1 2 3
リンクの指定:
┌────────┬────────┬───────┬─────────────────────────┐
│ source │ target │ value │ 意味 │
├────────┼────────┼───────┼─────────────────────────┤
│ 0 │ 2 │ 8 │ A(0)からC(2)へ8が流れる │
│ 0 │ 3 │ 4 │ A(0)からD(3)へ4が流れる │
│ 1 │ 3 │ 2 │ B(1)からD(3)へ2が流れる │
│ 2 │ 3 │ 5 │ C(2)からD(3)へ5が流れる │
└────────┴────────┴───────┴─────────────────────────┘
【図解】
A(0) ═══8═══▶ C(2)
╲ ╲
╲4 5╲
╲ ╲
▼ ▼
B(1) ═══2═══▶ D(3)
最小限のサンキーダイアグラム
まず、最もシンプルな例から始めましょう。4つのノードと4つのリンクを持つ基本的なサンキーダイアグラムです。
# ステップ1: ライブラリをインポート
import plotly.graph_objects as go
# ステップ2: ノード(節点)を定義
# リストの順番がそのままインデックスになる(A=0, B=1, C=2, D=3)
nodes = [‘A’, ‘B’, ‘C’, ‘D’]
# ステップ3: リンク(流れ)を定義
links = dict(
source=[0, 0, 1, 2], # 開始ノードのインデックス
target=[2, 3, 3, 3], # 終了ノードのインデックス
value=[8, 4, 2, 5] # 流れる量
)
# ステップ4: サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(
label=nodes, # ノードのラベル
pad=15, # ノード間の縦方向の余白
thickness=20 # ノードの厚さ(横幅)
),
link=links # リンクの定義
)])
# ステップ5: レイアウトを設定
fig.update_layout(
title=’基本的なサンキーダイアグラム’,
font_size=14,
height=400
)
# ステップ6: グラフを表示
fig.show()
💡 コードの各部分の解説
| コード |
何をしているか |
なぜ必要か |
go.Sankey() |
サンキーダイアグラムのオブジェクトを作成 |
Plotlyのサンキー専用クラス |
node=dict(...) |
ノード(箱)の設定を辞書形式で指定 |
ラベル、サイズ、色などを設定 |
label=nodes |
各ノードに表示する文字を設定 |
ノードが何を表すかわかるようにする |
pad=15 |
ノード間の縦方向の余白を設定 |
ノードが詰まりすぎないようにする |
thickness=20 |
ノードの横幅を設定 |
ノードの見やすさを調整 |
source=[...] |
各リンクの開始ノードを指定 |
どこから流れるかを定義 |
target=[...] |
各リンクの終了ノードを指定 |
どこへ流れるかを定義 |
value=[...] |
各リンクの流れる量を指定 |
帯の太さを決める |
実践的な例:ウェブサイト遷移フロー
より実践的な例として、ECサイトの顧客遷移を可視化してみましょう。どこで離脱が多いかが一目でわかります。
# ライブラリをインポート
import plotly.graph_objects as go
# ノード(各ページ)を定義
# インデックス: 0=トップ, 1=商品一覧, 2=商品詳細, 3=カート, 4=購入完了, 5=離脱
nodes = [
‘トップページ’, # 0
‘商品一覧’, # 1
‘商品詳細’, # 2
‘カート’, # 3
‘購入完了’, # 4
‘離脱’ # 5
]
# リンク(ページ間の遷移)を定義
links = dict(
source=[0, 0, 1, 1, 2, 2, 3, 3], # 開始ページ
target=[1, 5, 2, 5, 3, 5, 4, 5], # 終了ページ
value=[100, 50, 60, 40, 30, 30, 20, 10] # 遷移人数
)
# 解説:
# source=0, target=1, value=100 → トップ→商品一覧: 100人
# source=0, target=5, value=50 → トップ→離脱: 50人
# source=1, target=2, value=60 → 商品一覧→商品詳細: 60人
# …以下同様
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(
label=nodes,
pad=15,
thickness=20,
line=dict(color=’black’, width=0.5) # ノードの枠線
),
link=links
)])
# レイアウトを設定
fig.update_layout(
title=’ウェブサイトの顧客遷移フロー’,
font_size=12,
height=500
)
fig.show()
📊 このグラフから読み取れること
- 総訪問者数:150人(100+50)がトップページに来訪
- 最大離脱ポイント:トップページで50人(33%)が離脱
- カート追加率:商品詳細を見た人の50%(30/60人)がカートに追加
- 購入完了:20人がゴール到達
- コンバージョン率:20/150 = 13.3%
🎨 3. 色のカスタマイズ
なぜ色が重要か
サンキーダイアグラムでは、色を使って情報を追加できます。例えば、成功経路を緑、離脱を赤で表現すると、問題点がすぐにわかります。
ノードの色を指定する
ノードごとに異なる色を指定して、カテゴリや状態を区別できます。
# ライブラリをインポート
import plotly.graph_objects as go
# ノードを定義
nodes = [‘A’, ‘B’, ‘C’, ‘D’, ‘E’]
# リンクを定義
links = dict(
source=[0, 0, 1, 2, 3],
target=[2, 3, 3, 4, 4],
value=[10, 5, 8, 6, 4]
)
# ノードの色をリストで指定(ノードの数と同じ数の色が必要)
node_colors = [
‘#FF6B6B’, # A: サーモンピンク
‘#4ECDC4’, # B: ターコイズ
‘#45B7D1’, # C: スカイブルー
‘#FFA07A’, # D: ライトサーモン
‘#98D8C8′ # E: ミントグリーン
]
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(
label=nodes,
pad=15,
thickness=20,
color=node_colors # ノードの色を指定
),
link=links
)])
fig.update_layout(
title=’カスタムカラーのサンキーダイアグラム’,
height=400
)
fig.show()
リンクの色を指定する
リンク(帯)の色も個別に指定できます。rgba形式を使うと透明度も設定でき、重なりが見やすくなります。
# ライブラリをインポート
import plotly.graph_objects as go
# ノードを定義
nodes = [‘開始’, ‘経路A’, ‘経路B’, ‘終了’]
# リンクを定義(色付き)
links = dict(
source=[0, 0, 1, 2],
target=[1, 2, 3, 3],
value=[30, 20, 30, 20],
# リンクの色をrgba形式で指定(最後の数字が透明度:0.4 = 40%)
color=[
‘rgba(255, 0, 0, 0.4)’, # 赤(半透明):開始→経路A
‘rgba(0, 0, 255, 0.4)’, # 青(半透明):開始→経路B
‘rgba(255, 0, 0, 0.4)’, # 赤(半透明):経路A→終了
‘rgba(0, 0, 255, 0.4)’ # 青(半透明):経路B→終了
]
)
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(
label=nodes,
pad=15,
thickness=20
),
link=links
)])
fig.update_layout(
title=’リンクに色を付けたサンキーダイアグラム’,
height=400
)
fig.show()
💡 色指定の形式
| 形式 |
例 |
特徴 |
| HEXカラー |
‘#FF6B6B’ |
透明度なし、シンプル |
| 色名 |
‘red’, ‘blue’, ‘green’ |
簡単だが選択肢が限られる |
| rgba形式 |
‘rgba(255, 0, 0, 0.4)’ |
透明度を設定可能(0〜1) |
推奨:リンクにはrgba形式で透明度0.3〜0.5を使うと、重なりが見やすくなります。
💼 4. 実務例: ECサイト購買ファネル分析
本格的な顧客遷移フローの可視化
実務で使えるレベルのサンキーダイアグラムを作成しましょう。成功経路と離脱を色分けし、どこに問題があるか一目でわかるようにします。
# ライブラリをインポート
import plotly.graph_objects as go
# ノード(各ステップ)を定義
nodes = [
‘訪問者’, # 0: 入口
‘商品閲覧’, # 1: ステップ1
‘カート追加’, # 2: ステップ2
‘会員登録’, # 3: ステップ3
‘決済開始’, # 4: ステップ4
‘購入完了’, # 5: ゴール(成功)
‘離脱(商品閲覧前)’, # 6: 離脱1
‘離脱(カート追加前)’,# 7: 離脱2
‘離脱(会員登録)’, # 8: 離脱3
‘離脱(決済)’ # 9: 離脱4
]
# リンク(遷移)を定義
links = dict(
source=[0, 0, 1, 1, 2, 2, 3, 3, 4, 4],
target=[1, 6, 2, 7, 3, 8, 4, 8, 5, 9],
value=[1000, 200, 600, 200, 400, 200, 300, 100, 250, 50]
)
# 解説:
# 訪問者1200人 → 1000人が商品閲覧、200人が離脱
# 商品閲覧1000人 → 600人がカート追加、200人が離脱(残り200は上で計算済み)
# カート追加600人 → 400人が会員登録、200人が離脱
# 会員登録400人 → 300人が決済開始、100人が離脱
# 決済開始300人 → 250人が購入完了、50人が離脱
# 色設定(成功経路=緑系、離脱=赤系)
node_colors = [
‘#4ECDC4’, # 訪問者(シアン)
‘#4ECDC4’, # 商品閲覧(シアン)
‘#4ECDC4’, # カート追加(シアン)
‘#4ECDC4’, # 会員登録(シアン)
‘#4ECDC4’, # 決済開始(シアン)
‘#2ECC71’, # 購入完了(緑:成功!)
‘#E74C3C’, # 離脱(赤)
‘#E74C3C’, # 離脱(赤)
‘#E74C3C’, # 離脱(赤)
‘#E74C3C’ # 離脱(赤)
]
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(
label=nodes,
pad=20, # ノード間の余白を広めに
thickness=25, # ノードを少し太く
color=node_colors,
line=dict(color=’black’, width=1) # ノードに枠線
),
link=links
)])
# レイアウトを設定
fig.update_layout(
title=’📊 ECサイト購買ファネル分析’,
font_size=13,
height=600
)
fig.show()
# 分析結果を出力
print(“📈 分析結果:”)
print(f”訪問者数: 1,200人”)
print(f”購入完了: 250人”)
print(f”コンバージョン率: {250/1200*100:.1f}%”)
print(f”最大離脱ポイント: 商品閲覧→カート追加({200/(600+200)*100:.1f}%が離脱)”)
📈 分析結果:
訪問者数: 1,200人
購入完了: 250人
コンバージョン率: 20.8%
最大離脱ポイント: 商品閲覧→カート追加(25.0%が離脱)
📊 ビジネスへの示唆
- 最初の離脱(200人):商品閲覧前に離脱 → サイトの第一印象改善が必要
- カート追加前の離脱(200人):商品に魅力がない? → 商品説明や写真の改善
- 会員登録での離脱(300人):登録が面倒? → ゲスト購入の導入検討
- 決済での離脱(50人):決済方法が少ない? → 支払い方法の追加
⚡ 5. 実務例: エネルギーフロー分析
エネルギー変換の流れを可視化
発電から消費までのエネルギーの流れを可視化します。ダークモードのデザインでかっこよく仕上げましょう。
# ライブラリをインポート
import plotly.graph_objects as go
# ノード(エネルギーの状態)を定義
nodes = [
‘発電(石炭)’, # 0
‘発電(天然ガス)’, # 1
‘発電(原子力)’, # 2
‘発電(再生可能)’, # 3
‘送電’, # 4
‘産業用’, # 5
‘家庭用’, # 6
‘商業用’, # 7
‘送電ロス’ # 8
]
# リンク(エネルギーの流れ)を定義
links = dict(
source=[0, 1, 2, 3, 4, 4, 4, 4],
target=[4, 4, 4, 4, 5, 6, 7, 8],
value=[350, 250, 200, 100, 400, 300, 250, 50]
)
# 解説:
# 発電所から送電へ: 石炭350 + ガス250 + 原子力200 + 再生可能100 = 900TWh
# 送電から消費へ: 産業400 + 家庭300 + 商業250 + ロス50 = 1000TWh
# エネルギー源ごとに色を設定
node_colors = [
‘#8B4513’, # 石炭(茶色)
‘#FF6B6B’, # 天然ガス(赤)
‘#9B59B6’, # 原子力(紫)
‘#2ECC71’, # 再生可能(緑)
‘#3498DB’, # 送電(青)
‘#F39C12’, # 産業(オレンジ)
‘#E74C3C’, # 家庭(赤)
‘#1ABC9C’, # 商業(青緑)
‘#95A5A6′ # ロス(グレー)
]
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(
label=nodes,
pad=20,
thickness=25,
color=node_colors,
line=dict(color=’white’, width=2) # 白い枠線
),
link=links
)])
# ダークモードのレイアウト
fig.update_layout(
title=’⚡ エネルギーフロー分析(単位: TWh)’,
font_size=12,
height=600,
plot_bgcolor=’#2C3E50′, # グラフ背景(ダークブルー)
paper_bgcolor=’#2C3E50′, # 外側背景(ダークブルー)
font_color=’white’ # 文字色(白)
)
fig.show()
📊 このグラフから読み取れること
- 発電構成:石炭39% > ガス28% > 原子力22% > 再生可能11%
- 消費構成:産業40% > 家庭30% > 商業25%
- 送電ロス:全体の5%がロスとして失われている
- 再生可能エネルギー:まだ全体の11%と少ない
📱 6. インタラクティブ機能の活用
ホバー情報のカスタマイズ
マウスを乗せたときに表示される情報(ホバー情報)をカスタマイズすると、より多くの情報を伝えられます。
# ライブラリをインポート
import plotly.graph_objects as go
# ノードを定義
nodes = [‘製品A’, ‘製品B’, ‘工場C’, ‘工場D’]
# リンクを定義(カスタム情報付き)
links = dict(
source=[0, 0, 1, 2],
target=[2, 3, 3, 3],
value=[100, 50, 80, 60],
# カスタムデータ(ホバー時に表示)
customdata=[
[‘製品A→工場C’, ‘100個’, ‘納期: 3日’],
[‘製品A→工場D’, ’50個’, ‘納期: 5日’],
[‘製品B→工場D’, ’80個’, ‘納期: 4日’],
[‘工場C→工場D’, ’60個’, ‘納期: 2日’]
],
# ホバー時の表示形式
hovertemplate=’%{customdata[0]}
数量: %{customdata[1]}
%{customdata[2]}‘
)
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(
label=nodes,
pad=15,
thickness=20,
# ノードのホバー情報もカスタマイズ
customdata=[‘製品A: 総出荷150個’, ‘製品B: 総出荷80個’,
‘工場C: 総受入100個’, ‘工場D: 総受入190個’],
hovertemplate=’%{customdata}‘
),
link=links
)])
fig.update_layout(
title=’カスタムホバー情報付きサンキーダイアグラム’,
height=400
)
fig.show()
💡 ホバーテンプレートの書き方
| 記法 |
意味 |
例 |
%{value} |
リンクの値(流れる量) |
100 |
%{label} |
ノードのラベル |
製品A |
%{customdata[0]} |
カスタムデータの1番目 |
製品A→工場C |
<br> |
改行 |
− |
<extra></extra> |
余分な情報を非表示にする |
− |
多段階のフロー(製造プロセス)
より複雑な多段階のフローも表現できます。原材料→加工→製品という3段階のプロセスを可視化してみましょう。
# ライブラリをインポート
import plotly.graph_objects as go
# 3段階のフロー
nodes = [
# レベル1(原材料)
‘原材料A’, # 0
‘原材料B’, # 1
‘原材料C’, # 2
# レベル2(加工工場)
‘工場X’, # 3
‘工場Y’, # 4
# レベル3(最終製品)
‘製品1’, # 5
‘製品2’, # 6
‘製品3’ # 7
]
# リンク(材料の流れ)を定義
links = dict(
source=[0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 4],
target=[3, 4, 3, 4, 3, 4, 5, 6, 5, 6, 7],
value=[100, 50, 80, 70, 60, 90, 120, 80, 80, 100, 30]
)
# 段階ごとに色を設定
colors_level1 = [‘#E74C3C’, ‘#E67E22’, ‘#F39C12’] # 原材料(赤〜オレンジ系)
colors_level2 = [‘#3498DB’, ‘#2ECC71’] # 工場(青・緑)
colors_level3 = [‘#9B59B6’, ‘#1ABC9C’, ‘#34495E’] # 製品(紫・青緑・グレー)
node_colors = colors_level1 + colors_level2 + colors_level3
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
arrangement=’snap’, # ノードを整列させる
node=dict(
label=nodes,
pad=30, # 余白を広めに
thickness=20,
color=node_colors,
line=dict(color=’white’, width=2)
),
link=links
)])
fig.update_layout(
title=’📦 製造プロセスフロー(3段階)’,
font_size=13,
height=600
)
fig.show()
📝 STEP 23 のまとめ
✅ このステップで学んだこと
| トピック |
重要ポイント |
| サンキーダイアグラムとは |
フロー(流れ)を帯の太さで視覚化するグラフ |
| 構成要素 |
ノード(箱)とリンク(帯)で構成 |
| リンクの定義 |
source(開始), target(終了), value(量) |
| インデックス |
ノードは0から始まる番号で指定 |
| 色のカスタマイズ |
ノード・リンクごとに色を設定可能 |
| 実務活用 |
顧客遷移、エネルギーフロー、資金フローなど |
| インタラクティブ |
ホバー情報をカスタマイズして情報追加 |
💡 最重要ポイント
サンキーダイアグラムは「流れ」を一目で理解できる強力なツールです。顧客の行動分析、エネルギー配分、予算管理など、様々な場面で活用できます。
色分けとホバー情報を工夫することで、より情報豊かな可視化が可能になります。次のステップでは、階層構造を表現するツリーマップとサンバーストチャートを学びます!
📝 実践演習
演習 1
基礎
3つのノード(A, B, C)を持つシンプルなサンキーダイアグラムを作成してください。AからBへ10、AからCへ5が流れるようにしてください。
【解答コード】
import plotly.graph_objects as go
# ノードを定義(A=0, B=1, C=2)
nodes = [‘A’, ‘B’, ‘C’]
# リンクを定義
links = dict(
source=[0, 0], # 両方ともAから出発
target=[1, 2], # BとCへ到着
value=[10, 5] # 流れる量
)
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(label=nodes, pad=15, thickness=20),
link=links
)])
fig.update_layout(title=’シンプルなサンキー’, height=400)
fig.show()
ポイント:ノードのインデックス(A=0, B=1, C=2)を正しく指定することが重要です。
演習 2
応用
ウェブサイトの遷移(トップ→商品→カート→購入)を表すサンキーダイアグラムを作成してください。各ステップで離脱も表現してください。
【解答コード】
import plotly.graph_objects as go
# ノードを定義
nodes = [‘トップ’, ‘商品’, ‘カート’, ‘購入’, ‘離脱’]
# リンクを定義
# トップ→商品:100, トップ→離脱:30
# 商品→カート:50, 商品→離脱:20
# カート→購入:30, カート→離脱:20
# 購入→離脱:5(購入後の離脱は少なめに)
links = dict(
source=[0, 0, 1, 1, 2, 2, 3],
target=[1, 4, 2, 4, 3, 4, 4],
value=[100, 30, 50, 20, 30, 20, 5]
)
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(label=nodes, pad=15, thickness=20),
link=links
)])
fig.update_layout(title=’ウェブサイト遷移フロー’, height=500)
fig.show()
ポイント:「離脱」ノードを1つ作り、各ステップからそこへ流れるリンクを設定します。
演習 3
発展
エネルギーフロー(発電→送電→消費)を表すサンキーダイアグラムを作成してください。発電源ごとに色分けし、送電ロスも表現してください。
【解答コード】
import plotly.graph_objects as go
# ノードを定義
nodes = [
‘火力発電’, # 0
‘水力発電’, # 1
‘送電網’, # 2
‘産業’, # 3
‘家庭’, # 4
‘送電ロス’ # 5
]
# リンクを定義
links = dict(
source=[0, 1, 2, 2, 2],
target=[2, 2, 3, 4, 5],
value=[600, 300, 400, 350, 150]
)
# エネルギー源ごとに色を設定
node_colors = [
‘#E74C3C’, # 火力(赤)
‘#3498DB’, # 水力(青)
‘#F39C12’, # 送電網(オレンジ)
‘#2ECC71’, # 産業(緑)
‘#9B59B6’, # 家庭(紫)
‘#95A5A6′ # ロス(グレー)
]
# サンキーダイアグラムを作成
fig = go.Figure(data=[go.Sankey(
node=dict(
label=nodes,
pad=20,
thickness=25,
color=node_colors
),
link=links
)])
fig.update_layout(title=’エネルギーフロー’, height=500)
fig.show()
ポイント:送電ロスを別のノードとして表現し、グレーで目立たせることで、ロスの量を視覚化しています。
❓ よくある質問
Q1: ノードの順序(配置)を制御できますか?
arrangement=’snap’パラメータを使いましょう。これにより、ノードが自動的に整列されます。また、go.Sankey()のnode辞書内でx(横位置)とy(縦位置)を0〜1の範囲で手動指定することも可能ですが、複雑になるので基本は自動配置がおすすめです。
Q2: リンクが交差して見づらいです。どうすればいいですか?
ノードの順序を工夫しましょう。nodesリストの順番を変えることで、交差を減らせます。また、sourceとtargetの指定方法を見直すことも有効です。複雑すぎる場合は、複数のサンキーダイアグラムに分割することも検討してください。
Q3: サンキーダイアグラムとフローチャートの違いは何ですか?
サンキーは「量」を表現します。フローチャートは手順や分岐を示すのに対し、サンキーダイアグラムは流れる量(人数、エネルギー、資金など)を帯の太さで視覚化します。「どこへ、どれだけ流れるか」を伝えたいときはサンキーが最適です。
Q4: リンクの値が正しく反映されていないようです。なぜですか?
source、target、valueの配列の長さを確認してください。3つの配列は同じ長さである必要があります。また、インデックスがノードの数を超えていないかも確認しましょう。例えば、ノードが5つなら、source/targetは0〜4の範囲でなければなりません。
Q5: サンキーダイアグラムを画像として保存できますか?
はい、fig.write_image()で保存できます。例:fig.write_image(‘sankey.png’, scale=2) で高解像度のPNG画像として保存できます。ただし、kaleido というライブラリが必要です(pip install kaleido)。また、ブラウザ上で右上のカメラアイコンをクリックしてもPNGで保存できます。
artnasekai
#artnasekai #学習メモ