サンキーダイアグラム

最終更新 2020-03-11 読了時間 3 分

まとめ

サンキーダイアグラムは、売上 121,008 が営業費用 84,759 と純利益 36,249 に分かれ、営業費用がさらに 5 つの費目に分かれる、といった「量がどこからどこへ流れたか」を帯の太さで見せる図です。plotly.graph_objects.Sankey に、箱（ノード）の名前と色を node、箱同士をつなぐ帯を link の source・target・value の 3 つの同じ長さのリストで渡すと、帯の太さが value に比例して描かれます。損益計算書やユーザーの画面遷移のように、合計が段階的に配分されていくデータに向き、ノードやリンクが 20 を超えると帯が交差して追えなくなります。

直感 #

損益計算書を読むと、売上 121,008 から営業費用 84,759 を引いて純利益 36,249 が残り、営業費用の中身は航海費 36,702、船舶運航費 18,789、傭船料 8,325、一般管理費 5,854、減価償却 13,769 だと分かります。表では 8 つの数字ですが、サンキーダイアグラムはこれを「左の箱から右の箱へ流れる帯」として描き、帯の太さを金額に比例させます。売上の帯が 2 本に分かれ、費用の帯がさらに 5 本に枝分かれする形を見れば、「売上の 7 割が費用に消え、費用の 4 割強が航海費」という配分が数字を読まずに伝わります。

以下は『Genco Shipping & Trading Limited』のある期の損益を可視化したもので、最新のデータではないので注意してください。

ノードに通し番号を付ける (0 売上, 1: 総収益, 2: 営業費用, 3: 純利益, …) link の source/target で「どこから → どこへ」を番号で指定 value に金額を入れる帯の太さ = value として描かれる

Sankey Diagram in Python | plotly

Python で描く #

次のコードは 9 個のノードと 8 本のリンクを定義し、売上から費用と純利益への流れを plotly で描きます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import plotly.graph_objects as go

fig = go.Figure(
    data=[
        go.Sankey(
            node=dict(
                pad=300,
                thickness=20,
                line=dict(color="white", width=0.0),
                label=[
                    "Voyage revenues",
                    "Total revenues",
                    "Total operating expenses",
                    "Net income",
                    "Voyage expenses",
                    "Vessel operating expenses",
                    "Charter hire expenses",
                    "General and administrative expenses",
                    "Depreciation and amortization",
                ],
                color=[
                    "#666666",
                    "#666666",
                    "#CC0001",
                    "#2BA02D",
                    "#CC0001",
                    "#CC0001",
                    "#CC0001",
                    "#CC0001",
                    "#CC0001",
                ],
            ),
            link=dict(
                source=[0, 1, 1, 2, 2, 2, 2, 2],
                target=[1, 2, 3, 4, 5, 6, 7, 8],
                value=[121008, 84759, 36249, 36702, 18789, 8325, 5854, 13769],
                color=[
                    "#B3B3B3",
                    "#E18685",
                    "#9CCC9A",
                    "#E18685",
                    "#E18685",
                    "#E18685",
                    "#E18685",
                    "#E18685",
                ],
            ),
        )
    ]
)

fig.update_layout(
    title_text="Condensed Consolidated Statements of Operations", font_size=18
)
fig.show()

コードの解説番号をクリックすると、コード内の該当行がハイライトされます。

7-9 行目ノードの間隔と太さを決める
pad=300 はノード（箱）同士の縦の隙間、thickness=20 は箱の横幅です。pad を大きくすると帯が縦に広がって枝分かれが見やすくなり、小さくすると箱が密集します。費目が 5 つに分かれる右側で帯が重ならないよう、ここでは大きめの 300 にしています。line=dict(width=0.0) は箱の枠線を消す指定で、枠を残すと細い帯の端が枠に隠れます。
10-20 行目ラベルの並び順がノードの番号になる
label の 9 個の名前は、先頭から 0, 1, 2, … と番号が付き、後の source と target でこの番号を使います。0 が Voyage revenues（売上）、1 が Total revenues、2 が Total operating expenses、3 が Net income、4〜8 が 5 つの費目です。ラベルの順序を入れ替えると番号もずれるので、link 側も同時に書き換えなければ帯が別の箱につながります。
21-31 行目箱の色で収益・費用・利益を区別する
color は label と同じ順で箱の色を指定します。売上と総収益はグレー #666666、費用側の 6 個は赤 #CC0001、純利益だけ緑 #2BA02D にしています。「赤 = 出ていくお金、緑 = 残るお金」という対応を箱と帯の両方で一貫させることで、読者は色だけで流れの意味を追えます。費目ごとに色を変えると 9 色になり、意味の区別が失われます。
34-36 行目source / target / value の 3 リストで帯を定義する
i 番目の帯は「source[i] 番の箱から target[i] 番の箱へ、太さ value[i]」です。1 本目は 0 → 1 に 121,008（売上 → 総収益）、2 本目と 3 本目は 1 → 2 に 84,759 と 1 → 3 に 36,249（総収益 → 費用と純利益）、4〜8 本目は 2 → 4〜8 で費用の内訳です。3 つのリストの長さは 8 で揃っていなければならず、ずれると帯が消えるかエラーになります。84,759 + 36,249 = 121,008 のように、箱に入る量と出る量が一致していると帯の幅が左右で揃います。
37-46 行目帯の色は箱より薄い同系色にする
帯の色はノードと同じ意味の割り当てで、売上の帯はグレー #B3B3B3、費用の帯は薄い赤 #E18685、純利益の帯は薄い緑 #9CCC9A です。箱より薄くするのは、帯が重なる部分でも下の帯が透けて見えるようにするためです。箱と同じ濃さにすると、太い帯が隣の箱を塗りつぶして境界が消えます。
52-55 行目タイトルと文字サイズを調整して表示する
update_layout でタイトルと font_size=18 を指定しています。ノードのラベルは plotly の既定だと 10pt 前後で、9 個の英語ラベルが長いので読みやすい大きさに上げています。fig.show() はブラウザまたはノートブック上に対話的な図を開き、帯にマウスを乗せると value の金額がポップアップで表示されます。

サンキーダイアグラムの図

実行結果の読み方 #

左端の売上 121,008 の帯が中央で 2 本に分かれ、太い赤の帯（費用 84,759）と細い緑の帯（純利益 36,249）になります。帯の太さの比がそのまま 7 : 3 なので、「売上の約 3 割が利益」と目で読めます。右端では費用が 5 本に枝分かれし、最も太い航海費 36,702 が費用の 4 割強、最も細い一般管理費 5,854 が 7% 弱だと、帯の太さの比較から分かります。

使いどころと落とし穴 #

損益計算書のような資金の配分、ユーザーがトップページから購入完了までたどる画面遷移、エネルギーの供給源から用途への流れなど、「合計が段階的に分配される」データが典型的な用途です。帯の太さで量を、箱の並びで段階を表せるので、積み上げ棒グラフでは見えない「どの経路を通ったか」が読めます。トップページ → 商品一覧 → 購入のように段階ごとの離脱率だけを見たいなら、帯を 1 本にまとめたファネルチャートのほうが簡潔です。

失敗しやすいのはノードとリンクの数です。箱が 20、帯が 30 を超えると帯が交差して追跡できなくなるので、主要な経路に絞り、細い帯は「その他」にまとめます。色の使い方も要注意で、9 個の箱と 8 本の帯の色を場当たり的に決めると流れの意味が追えません。この例のように「赤 = 費用、緑 = 利益」という対応を箱と帯の両方で一貫させてください。source と target の番号を 1 つ間違えると帯が別の箱につながるので、描いた後は各箱の入る量と出る量（84,759 + 36,249 = 121,008）が一致しているかを確認します。

ファネルチャート — ステップごとの離脱を帯幅で表示
ツリーマップ — 面積で階層的な数値を比較
積み上げ棒グラフ — 全体量と内訳を同時に表示