กราฟดัมเบลDumbbell Chart

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

Dumbbell chart วางค่าของสองช่วงเวลา (หรือสองกลุ่ม) ไว้บนแถวเดียวกันแล้วเชื่อมด้วยเส้น ผลคือคนอ่านได้ข้อมูลสามอย่างในภาพเดียว คือค่าเริ่ม ค่าจบ และความยาวของเส้นซึ่งคือขนาดของการเปลี่ยนแปลง

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

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

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

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

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

Dumbbell แก้ด้วยการวางค่าทั้งสองไว้บนเส้นเดียวกันแล้วเชื่อมด้วยเส้นตรง ทีนี้ "ความยาวของเส้น" กลายเป็นตัวแทนของการเปลี่ยนแปลงโดยตรง ยาวแปลว่าเปลี่ยนมาก สั้นแปลว่าเกือบเท่าเดิม

ทิศทางก็อ่านได้ฟรีเช่นกัน ถ้าจุดสีเข้มอยู่ขวาของจุดสีอ่อนแปลว่าเพิ่มขึ้น ถ้าอยู่ซ้ายแปลว่าลดลง คนอ่านจึงได้ข้อมูลสามอย่างโดยแทบไม่ต้องคิด

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

ข้อจำกัดคือรองรับได้แค่สองจุดเวลา ถ้ามีสามช่วงขึ้นไปเส้นจะเริ่มสับสน ให้เปลี่ยนไปใช้ slope chart หรือ multi-line chart ภาพจำคือ สองจุดใช้ดัมเบล สามจุดขึ้นไปใช้เส้น

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

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

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

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

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

สเกลของแกน — linear และใช้สเกลเดียวกันทั้งสองจุดเสมอ ถ้าค่ากินหลายเท่าให้ใช้ log แต่ต้องรู้ว่าความยาวเส้นจะไม่แปรตามส่วนต่างอีกต่อไป

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

category,before,after
…

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

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

1. ดูความยาวของเส้นเพื่อหาผู้ที่เปลี่ยนมากที่สุด
2. ดูทิศทางว่าจุดหลังอยู่ซ้ายหรือขวาของจุดก่อน
3. หารายการที่เส้นสั้นมากซึ่งแปลว่าแทบไม่เปลี่ยน
4. ตรวจว่ามีรายการที่สลับอันดับกันหรือไม่

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

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

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

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

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

# ติดตั้ง: pip install "matplotlib==3.10.*" "pandas==2.*"
# ดาวน์โหลด dumbbell-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("dumbbell-chart-sample.csv")
df["before"] = pd.to_numeric(df["before"], errors="coerce")
df["after"] = pd.to_numeric(df["after"], errors="coerce")
SORT = "delta"   # ← ค่าจาก Playground

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

df["delta"] = df["after"] - df["before"]
d = df.sort_values("delta")
ax.hlines(d["category"], d["before"], d["after"], color="#9ec5f4", linewidth=3)
ax.plot(d["before"], d["category"], "o", markersize=9, color="#9ec5f4", label="ก่อน")
ax.plot(d["after"], d["category"], "o", markersize=9, color="#1c5cab", label="หลัง")
ax.legend(frameon=False, ncols=2)   # ต้องมี legend เพราะสีเป็นตัวบอกลำดับเวลา
ax.set_xlabel("คะแนน")

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

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

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

ข้อควรระวัง

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

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

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

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