กราฟความชันSlope Chart

01ภาพรวมของกราฟนี้

Slope chart วางแกนตั้งสองแกนสำหรับสองจุดเวลา แล้วลากเส้นเชื่อมค่าของแต่ละรายการ ความชันของเส้นคือขนาดและทิศทางของการเปลี่ยนแปลง ทำให้ตอบคำถาม "ใครดีขึ้นใครแย่ลง" ได้ในพริบตาแม้มีหลายสิบรายการ

ใช้ที่ไหนบ้าง — เทียบคะแนนก่อนและหลังนโยบาย เทียบส่วนแบ่งตลาดสองปี หรือเทียบอันดับระหว่างสองรอบการสำรวจ

สร้างอย่างไร

1. ขั้นที่ 1เลือกสองจุดเวลาที่มีความหมาย
2. ขั้นที่ 2วาดแกนตั้งสองแกน
3. ขั้นที่ 3ลากเส้นเชื่อมค่าของแต่ละรายการ
4. ขั้นที่ 4เน้นเส้นที่เป็นประเด็นและทำเส้นอื่นเป็นสีเทา

02อธิบายภาษาคนเข้าใจง่าย ๆ

เมื่อมีข้อมูลแค่สองจุดเวลาแต่มีหลายสิบรายการ กราฟเส้นเต็มรูปแบบจะกลายเป็นก้อนเส้นพันกัน และกราฟแท่งกลุ่มก็จะมีแท่งเป็นร้อย

Slope chart ตัดทุกอย่างที่ไม่จำเป็นออก เหลือแค่แกนตั้งสองแกนและเส้นตรงเชื่อมระหว่างกัน ความชันของเส้นบอกทุกอย่างที่ต้องการรู้

ข้อดีที่ทรงพลังคือทิศทางอ่านได้ก่อนตัวเลข เส้นที่เอียงขึ้นคือดีขึ้น เส้นที่เอียงลงคือแย่ลง สมองประมวลผลทิศทางได้เร็วกว่าการเทียบความยาวมาก

อีกอย่างที่เห็นฟรีคือการสลับอันดับ ถ้าเส้นสองเส้นตัดกัน แปลว่ารายการหนึ่งแซงอีกรายการ ซึ่งเป็นข้อมูลที่กราฟแท่งบอกไม่ได้เลย

ข้อจำกัดคือรองรับได้แค่สองจุดเวลา และถ้ามีรายการมากเกิน 20-25 รายการ ป้ายชื่อจะชนกันจนอ่านไม่ออก ทางแก้คือเน้นเฉพาะเส้นที่เป็นประเด็นและทำเส้นที่เหลือเป็นฉากหลังสีเทา

03ข้อมูลที่ต้องใช้

คอลัมน์ที่ต้องเตรียม

ต้องเตรียมข้อมูลอย่างไรก่อนวาด

1. จัดข้อมูลเป็นแบบกว้าง
2. ตรวจว่าทั้งสองค่าเป็นหน่วยเดียวกัน
3. ตัดสินใจว่าเส้นไหนเป็นประเด็นที่จะเน้น

ค่าที่หายไป — รายการที่ขาดค่าใดค่าหนึ่งลากเส้นไม่ได้ ต้องแยกออกและระบุจำนวนที่ตัดไป

สเกลของแกน — ใช้สเกลเดียวกันทั้งสองแกนเสมอ ถ้าใช้คนละสเกล ความชันจะไม่มีความหมาย

หน้าตาไฟล์ที่ต้องเตรียม

category,before,after
…

04อ่านแล้วเห็นอะไร

อ่านตามลำดับนี้

1. ดูภาพรวมว่าเส้นส่วนใหญ่เอียงทางไหน
2. หาเส้นที่ชันที่สุดทั้งขึ้นและลง
3. หาจุดที่เส้นตัดกันซึ่งคือการสลับอันดับ

05เหมาะกับการนำเสนอแบบไหน

ทำอย่างไรให้คนอ่านได้ข้อสรุปโดยไม่ต้องบรรยาย

1. เน้นเส้นเดียวที่เป็นประเด็นด้วยสีเข้ม ที่เหลือเป็นสีเทา
2. เขียนป้ายชื่อและค่าไว้ทั้งสองปลายเส้น
3. เขียนชื่อจุดเวลาไว้เหนือแกนทั้งสอง

06เอาไปใช้ต่อ

โค้ดทุกชิ้นอ่านไฟล์ slope-chart-sample.csv ชุดเดียวกับที่ Playground ใช้ และตัวเลขในโค้ดเปลี่ยนตามค่าที่คุณปรับด้านล่าง

# ติดตั้ง: pip install "matplotlib==3.10.*" "pandas==2.*"
# ดาวน์โหลด slope-chart-sample.csv จากหน้านี้ แล้ววางไว้ข้างสคริปต์
import matplotlib
matplotlib.use("Agg")   # รันแบบไม่มีหน้าจอ ถ้ารันในเครื่องตัวเองลบบรรทัดนี้ได้
import matplotlib.pyplot as plt
import pandas as pd

C1, C2, C3 = "#2a78d6", "#eb6834", "#1baf7a"   # palette ของคลัง เปลี่ยนเป็นสีองค์กรได้
INK, SURFACE = "#0b0b0b", "#fcfcfb"

df = pd.read_csv("slope-chart-sample.csv")
df["before"] = pd.to_numeric(df["before"], errors="coerce")
df["after"] = pd.to_numeric(df["after"], errors="coerce")
NOTE = "cross"   # ← ค่าจาก Playground

fig, ax = plt.subplots(figsize=(7.6, 4.2), facecolor=SURFACE)
ax.set_facecolor(SURFACE)

focus = (df["after"] - df["before"]).abs().idxmax()      # เส้นที่เปลี่ยนมากสุดเป็นประเด็น
for i, r in df.iterrows():
    color = C2 if i == focus else "#b5b2aa"                # เส้นอื่นเป็นสีเทาเป็นฉากหลัง
    ax.plot([0, 1], [r["before"], r["after"]], color=color, linewidth=2.4 if i == focus else 1.4)
    ax.text(-0.04, r["before"], f"{r['category']}", ha="right", va="center", fontsize=8)
    ax.text(1.04, r["after"], f"{r['after']:,.0f}", ha="left", va="center", fontsize=8)
ax.set_xticks([0, 1]); ax.set_xticklabels(["ก่อน", "หลัง"]); ax.set_xlim(-0.35, 1.35)
ax.spines[["top", "right", "bottom"]].set_visible(False)

ax.spines[["top", "right"]].set_visible(False)   # ลดเส้นที่ไม่ได้ให้ข้อมูล
fig.tight_layout()
fig.savefig("slope-chart.png", dpi=160)
print("เขียน slope-chart.png แล้ว ·", len(df), "แถว")

ติดตั้ง: pip install "matplotlib==3.10.*" "pandas==2.*" · ทดสอบกับเวอร์ชัน 3.10

07ลองเล่นเพื่อเข้าใจ

ข้อควรระวัง

1. ใช้สเกลต่างกันระหว่างสองแกน ทำให้ความชันไม่มีความหมาย
2. ใส่รายการมากเกินไปจนเส้นพันกันและป้ายชนกัน
3. ให้ทุกเส้นเด่นเท่ากันทั้งที่มีเส้นเดียวที่เป็นประเด็น
4. ใช้กับสองจุดเวลาที่ห่างกันมากโดยไม่บอกว่าระหว่างนั้นเกิดอะไรขึ้น

เมื่อไหร่ไม่ควรใช้กราฟนี้

• มีมากกว่าสองจุดเวลา→ใช้แทน: multi-line-chart หรือ bump-chart
• ต้องการเห็นขนาดของการเปลี่ยนแปลงเป็นความยาว→ใช้แทน: dumbbell-chart
• มีรายการมากกว่า 30 รายการ→ใช้แทน: scatter-plot ที่มีแกนก่อนและแกนหลัง

กราฟที่เกี่ยวข้อง