STEP 23:サンキーダイアグラム

🌊 STEP 23: サンキーダイアグラム

データの流れを視覚的に表現するサンキーダイアグラムをマスターしよう!

📋 このステップで学ぶこと

  • サンキーダイアグラムの概念と用途
  • ノード(節点)とリンク(流れ)の定義方法
  • 基本的なサンキーダイアグラムの作成
  • 色のカスタマイズ
  • 実務例(顧客遷移、エネルギーフロー)
  • インタラクティブ機能の活用

🌊 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を使うと、インタラクティブなサンキーダイアグラムを簡単に作成できます。基本的な構造を理解しましょう。

📝 サンキーダイアグラム作成の流れ
  1. ノード(節点)のリストを定義
  2. リンク(流れ)を定義(source, target, value)
  3. go.Sankey()でグラフオブジェクトを作成
  4. レイアウトを設定して表示

インデックスの仕組みを理解する

サンキーダイアグラムでは、ノードを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で保存できます。

📝

学習メモ

データ可視化マスター - Step 23

📋 過去のメモ一覧
#artnasekai #学習メモ
LINE