K_DM Book
用語集
対象者 標準
対象者別の入口 →

対象者の設定はこのブラウザの中にだけ保存されます。

言語 JA

スロープグラフで順位変化を一目に

中級

06.7.7

スロープグラフで順位変化を一目に

最終更新 2020-04-22 読了時間 2 分
まとめ
スロープグラフは、左に「前」の時点、右に「後」の時点を置き、項目ごとに 2 点を 1 本の線で結んで、変化の大きさを線の傾き、順位の入れ替わりを線の交差として見せる図です。棒グラフを 2 本ずつ並べる方法より、「どれが最も伸びたか」「順位が逆転したか」が線の角度と交差から直接読めます。matplotlib では項目ごとに ax.plot([0, 1], [score_2023, score_2024]) を呼び、凡例の代わりに ax.text で左端にサービス名と値、右端に値を書き、軸や枠線をほとんど消します。読み終えると、サービス C が 48 → 64 と最も急な傾きで B(55 → 58)を追い越し、線が交差している様子を読み取り、自分の前年比データを同じ形で描けるようになります。

直感 #

5 つのサービスの NPS を 2023 年と 2024 年で比べたいとします。表で 2 列の数字を見ても「C が B を追い抜いた」という順位の変化は見落としがちです。スロープグラフは、左の縦線上に 2023 年の値、右の縦線上に 2024 年の値を置き、同じサービスの 2 点を線で結びます。線が急に右上がりなら大きく伸び、右下がりなら悪化、2 本の線が交差していれば順位が入れ替わったことになります。凡例を使わず線の両端にサービス名と数値を直接書くので、読者は線をたどるだけで値と順位の両方を読めます。

Python で描く #

次のコードは 5 サービスの 2 年分の NPS を用意し、サービスごとに線・点・両端のラベルを描きます。目盛りと枠線を消して、線とラベルだけの簡潔な図にします。

 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
import matplotlib.pyplot as plt
import numpy as np

brands = ["サービスA", "サービスB", "サービスC", "サービスD", "サービスE"]
score_2023 = np.array([62, 55, 48, 44, 38])
score_2024 = np.array([75, 58, 64, 40, 42])
colors = plt.cm.Blues(np.linspace(0.4, 0.8, len(brands)))

fig, ax = plt.subplots(figsize=(6, 4))
for idx, name in enumerate(brands):
    ax.plot(
        [0, 1],
        [score_2023[idx], score_2024[idx]],
        color=colors[idx],
        linewidth=2.5,
    )
    ax.scatter([0, 1], [score_2023[idx], score_2024[idx]], color=colors[idx], s=60)
    ax.text(
        -0.05,
        score_2023[idx],
        f"{name} {score_2023[idx]:.0f}",
        ha="right",
        va="center",
    )
    ax.text(
        1.05,
        score_2024[idx],
        f"{score_2024[idx]:.0f}",
        ha="left",
        va="center",
    )

ax.set_xticks([0, 1], labels=["2023年", "2024年"])
ax.set_title("主要サービスのNPS変化(ポイント)")
ax.set_ylim(30, 80)
ax.spines[["top", "right", "bottom"]].set_visible(False)
ax.tick_params(left=False, bottom=False)
ax.set_yticks([])
ax.grid(axis="y", alpha=0.15)

fig.tight_layout()

plt.show()

順位と変化幅を同時に伝えられますの図

実行結果の読み方 #

左の数字が 2023 年、右の数字が 2024 年の NPS で、線の傾きが変化の大きさです。サービス C は 48 → 64 と最も急な右上がりで、55 → 58 と緩やかな B の線と交差しており、順位が 3 位から 2 位に上がったと読めます。サービス D は 44 → 40 と唯一の右下がりで、順位も 4 位から 5 位に落ち、E(38 → 42)の線と交差しています。線が交差した箇所が順位の入れ替わりなので、交差の数を数えればランキングがどれだけ動いたかも分かります。

使いどころと落とし穴 #

スロープグラフは、前年比や施策前後のように「ちょうど 2 時点」で 3〜15 項目の変化と順位の入れ替わりを示すときの図です。3 時点以上に拡張すると線が折れて簡潔さが失われるので、推移を見せたいなら折れ線グラフかバンプチャートに切り替えます。値が近い項目が多いと両端のラベルが重なって読めなくなるため、ax.text の Y 座標を手動で 1〜2 ポイントずらすか、注目する 1〜2 項目だけ色を付けて他をグレーにしてください。変化量そのものを強調したいなら、2 点の距離を水平に見せるダンベルチャートの方が差の大きさを比べやすくなります。