スパークラインパネルで複数指標をミニ表示

最終更新 2020-01-03 読了時間 2 分

まとめ

スパークラインパネルは、軸や目盛りをほぼ省いた小さな折れ線（スパークライン）を格子状に並べ、複数の指標の「上がっているか下がっているか」をダッシュボードの一画面で一覧する図です。1 枚ずつは値を正確に読めませんが、6〜12 枚を並べて形だけを見比べることで、異常な動きをしている指標を数秒で見つけられます。matplotlib では plt.subplots(2, 3) で格子を作り、各セルに ax.plot と薄い ax.fill_between を描き、Y 軸目盛りと 3 辺の枠線を消して最新値だけを ax.text で添えます。読み終えると、UU から NPS までの 6 指標が 12 か月で緩やかに上昇する形を一覧し、sharex=True と最新値ラベルの役割を理解したうえで自分の KPI パネルを作れるようになります。

直感 #

ダッシュボードのトップ画面で、UU・PV・CVR・注文数・解約率・NPS の 6 指標について「先月から上向きか下向きか」だけを知りたいとします。6 枚の本格的な折れ線グラフを並べると画面に収まらず、目盛りや凡例に視線が奪われます。スパークラインは Edward Tufte が「文章の中に埋め込める、単語サイズのグラフ」として提案した形で、軸も目盛りもなく線の形だけを残します。それを 2 × 3 の格子に並べれば、各指標の傾きと最新値を 1 画面で確認でき、詳しい分析は気になった指標のページで行う、という役割分担ができます。

Python で描く #

次のコードは、基準値の異なる 6 指標の 12 か月分を「緩やかな上昇 + 基準値の 5% のノイズ」で作り、2 × 3 の格子に 1 指標ずつミニ折れ線を描きます。目盛りと枠線を消し、最新値をラベルで添えます。

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

rng = np.random.default_rng(9)
metrics = ["UU", "PV", "CVR", "注文数", "解約率", "NPS"]
series = []
for base in [40, 120, 3.2, 60, 1.8, 25]:
    trend = base + np.linspace(-3, 5, 12)
    noise = rng.normal(0, base * 0.05, size=12)
    series.append(trend + noise)

fig, axes = plt.subplots(2, 3, figsize=(6.4, 4.2), sharex=True)
for ax, metric, values in zip(axes.flat, metrics, series):
    ax.plot(values, color="#0ea5e9", linewidth=1.8)
    ax.fill_between(range(len(values)), values, alpha=0.15, color="#bae6fd")
    ax.set_title(metric, fontsize=11, pad=6)
    ax.set_xticks([0, 5, 11], labels=["1月", "6月", "12月"], fontsize=8)
    ax.set_yticks([])
    ax.spines[["top", "right", "left"]].set_visible(False)
    latest = values[-1]
    ax.text(len(values) - 0.4, latest, f"{latest:.1f}", ha="right", va="bottom", fontsize=9)

for ax in axes[-1]:
    ax.set_xlabel("月")

fig.suptitle("主要指標のスパークラインパネル", fontsize=14, y=0.98)
fig.tight_layout()

plt.show()

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

7-10 行目指標ごとに基準値が違うデータを作る
for base in [40, 120, 3.2, 60, 1.8, 25] で指標ごとの基準値を変え、np.linspace(-3, 5, 12) の緩やかな上昇と rng.normal(0, base * 0.05) の基準値比 5% のノイズを足しています。UU が 40、PV が 120、CVR が 3.2% と単位もスケールも違う指標を同じ図に載せる前提なので、スパークラインが「各指標の自分自身に対する変化」しか示せないことを、このデータの作り方が示しています。
12 行目subplots で格子を作り、X 軸だけ共有する
plt.subplots(2, 3, figsize=(6.4, 4.2), sharex=True) で 2 行 3 列、1 枚あたり約 2.1 × 2.1 インチの小さなパネルを作ります。sharex=True は 12 か月の X 軸を全パネルで揃える指定で、横方向の位置が同じ月を指すようにしています。Y 軸は共有していない（既定の sharey=False）ので、各指標が自分の範囲いっぱいに描かれ、CVR の 3.2 と PV の 120 が同じ高さの線になります。
14-15 行目線と薄い塗りで形を強調する
ax.plot(values, linewidth=1.8) の線に ax.fill_between(range(12), values, alpha=0.15) の薄い塗りを重ねています。小さいパネルでは線だけだと細くて形が追いづらく、下側を塗ることで山と谷の面積として傾向が読めます。alpha=0.15 より濃くすると 6 枚の塗りが目立ちすぎて線が埋もれます。
17-19 行目目盛りと枠線を消してスパークラインにする
set_xticks([0, 5, 11], labels=["1月", "6月", "12月"]) で X 軸は 3 点だけ、set_yticks([]) で Y 軸は目盛りなし、spines[["top", "right", "left"]].set_visible(False) で下辺以外の枠を消しています。この 3 行を省くと普通の小さな折れ線グラフ 6 枚になり、目盛りの数字に視線が散って「形を見比べる」速さが失われます。
20-21 行目最新値だけ数字で添える
latest = values[-1] で 12 月の値を取り、ax.text(len(values) - 0.4, latest, f"{latest:.1f}", ha="right", va="bottom") で線の右端の少し上に書いています。目盛りを消した代わりに「今いくらか」だけは数値で示すことで、形と現在値の両方が読めます。最小値と最大値にも点と数値を付ける拡張をすれば、Tufte のスパークラインの標準形になります。

数値ラベルを添えて、細部はコンパクトにまとめますの図

実行結果の読み方 #

6 枚のパネルはどれも左から右へ緩やかに上がる形で、右端の数字が 12 月の最新値です。パネルごとに Y 軸の範囲が違うので、線の高さや傾きの角度を別の指標と比べてはいけません。「UU と PV の形が似ているか」「解約率だけ別の動きをしていないか」のように形のパターンを見比べるのがこの図の読み方です。ノイズを基準値の 5% にしているため、どのパネルも同程度のギザつきになっており、実データで 1 枚だけギザつきが大きければ、その指標の不安定さが形として目に入ります。

使いどころと落とし穴 #

スパークラインパネルは、ダッシュボードのトップ画面や表の中に 6〜20 個の指標の傾向を省スペースで埋め込むときに使います。軸がないので系列間の絶対値の比較には使えず、「PV は UU の 3 倍」といった読み取りが必要なら、同じスケールのファセットグリッド（sharey=True）に切り替えてください。パネルごとに Y 軸が自動調整されることを読者に伝えないと、CVR の 0.5 ポイントの上昇が PV の 10 の上昇と同じ傾きに見えて誤読を招くので、最新値のラベルに加えて前月比や前年比の数値を隣に表示します。トレンド以外の情報（最小・最大・現在値）を数字で併記しないと、スパークラインだけでは定量的な判断ができません。

スパークライン — 軸を省いたミニ折れ線で推移表示
複数ラインの推移比較 — 複数系列を同一軸で比較
ホライゾンチャート — 色帯に折りたたみ省スペースで変動表現