เทคนิคที่ 031 · PYTHON / JAVASCRIPT

กราฟกล่องBox Plot

สรุปการกระจายเป็นห้าตัวเลข เทียบสิบกลุ่มได้ในภาพเดียว

2
ต่อยอดโดยตรงควรรู้ก่อน · รู้จักค่ามัธยฐานและควอไทล์
ลองเล่น

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

Box plot ย่อการกระจายทั้งหมดเหลือห้าตัวเลข คือต่ำสุด ควอไทล์ที่หนึ่ง มัธยฐาน ควอไทล์ที่สาม และสูงสุด การย่อนี้ทำให้วางหลายกลุ่มเรียงกันได้โดยไม่รก แต่ก็ซ่อนรูปร่างไว้ การกระจายสองยอดกับยอดเดียวอาจให้กล่องหน้าตาเหมือนกันได้

เปรียบเทียบให้เห็นภาพ

เหมือนสรุปผลสอบทั้งห้องด้วยประโยคเดียวว่า "คนกลางได้ 65 ครึ่งกลางของห้องได้ระหว่าง 55 ถึง 78 และมีคนหนึ่งได้ 12" ซึ่งกระชับมากแต่ไม่บอกว่าคะแนนเกาะกลุ่มอย่างไร

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

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

  1. ขั้นที่ 1คำนวณควอไทล์ของแต่ละกลุ่ม
  2. ขั้นที่ 2วาดกล่องจาก Q1 ถึง Q3
  3. ขั้นที่ 3ลากหนวดถึงค่าที่ยังอยู่ในระยะ 1.5 เท่าของ IQR
  4. ขั้นที่ 4วาดจุดสำหรับค่าที่เกินหนวด

ตัวอย่างคลาสสิก · John Tukey สร้าง box plot ขึ้นในหนังสือ Exploratory Data Analysis ปี 1977

Tukey ออกแบบสัญลักษณ์นี้ให้วาดด้วยมือได้เร็วและอ่านได้ทันทีในยุคก่อนคอมพิวเตอร์กราฟิก เกณฑ์ 1.5 เท่าของ IQR สำหรับค่าผิดปกติที่เขาเลือกไว้ยังเป็นค่ามาตรฐานในซอฟต์แวร์แทบทุกตัวจนถึงวันนี้

Wikipedia · Box plot

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

เมื่อต้องเทียบการกระจายของสิบกลุ่ม การวาดฮิสโทแกรมสิบอันจะกินพื้นที่มหาศาลและเทียบกันยาก box plot แก้ด้วยการย่อแต่ละกลุ่มให้เหลือสัญลักษณ์เดียวที่แคบ

กล่องคือช่วงที่ครึ่งกลางของข้อมูลอยู่ เส้นในกล่องคือค่ามัธยฐาน หนวดที่ยื่นออกไปคือช่วงของข้อมูลที่ยังถือว่าปกติ และจุดที่อยู่นอกหนวดคือค่าที่ผิดปกติตามเกณฑ์ที่กำหนด

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

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

ทางแก้ที่ใช้กันมากขึ้นเรื่อย ๆ คือวาดจุดข้อมูลจริงทับลงไปบนกล่องเมื่อข้อมูลไม่เยอะเกินไป หรือเปลี่ยนไปใช้ violin plot ที่แสดงรูปร่างด้วย

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

รูปทรงของข้อมูลข้อมูลดิบรายแถว (ยังไม่สรุป)
จำนวนมิติที่เข้ารหัสได้3 มิติ
จำนวนแถวที่เหมาะ3–8 กลุ่ม × 20–500 จุดต่อกลุ่มขั้นต่ำ 20 แถว
เส้นฐานศูนย์เลือกได้อ่านจากตำแหน่งของควอไทล์บนแกนร่วม ไม่ใช่ความยาวจากศูนย์

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

คอลัมน์ทำหน้าที่ชนิดเข้ารหัสด้วยจำนวนค่าที่เหมาะหมายเหตุ
groupกลุ่มที่เทียบหมวดหมู่x2–15 กลุ่มแต่ละกลุ่มต้องมีข้อมูลพอ อย่างน้อย 10 จุด
valueค่าที่วัดได้ตัวเลขต่อเนื่องyต่อเนื่องต้องเป็นข้อมูลดิบรายแถว ห้ามสรุปมาก่อน

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

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

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

สเกลของแกน — linear หรือ log ก็ได้ แต่ควอไทล์บนสเกล log จะไม่สมมาตรเหมือนบน linear

กราฟจะเริ่มพังเมื่อไร

กลุ่มที่มีน้อยกว่า 10 จุด ควอไทล์จะไม่เสถียร — แสดงเป็น strip plot แทนสำหรับกลุ่มนั้น

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

group,value

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

สิ่งที่เห็นได้จากภาพ

  • กลุ่มไหนมีมัธยฐานสูงสุด
  • กลุ่มไหนกระจายมากที่สุด จากความสูงของกล่อง
  • ค่าผิดปกติอยู่ที่กลุ่มไหนบ้าง
  • ความเบ้จากตำแหน่งของเส้นมัธยฐานในกล่อง

สิ่งที่กราฟนี้ตอบไม่ได้

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

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

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

คำถามที่ตอบได้

  • กลุ่มไหนดีกว่าโดยรวม
  • กลุ่มไหนที่ผลไม่สม่ำเสมอ
  • มีค่าผิดปกติที่ต้องตรวจสอบไหม

สัญญาณว่ามีอะไรผิด

  • กล่องแบนมากซึ่งมักแปลว่าข้อมูลกระจุกที่ค่าเดียว
  • ไม่บอกจำนวนข้อมูลต่อกลุ่ม
  • ไม่ระบุเกณฑ์ของค่าผิดปกติที่ใช้

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

ผู้ชมที่เหมาะผู้อ่านที่รู้จักควอไทล์และค่ามัธยฐาน
เวลาที่ผู้ชมต้องใช้ต้องเรียนรู้ก่อน
ขนาดเล็กสุดที่ยังอ่านได้360×260 px
รายงานเชิงวิเคราะห์
สำรวจข้อมูลด้วยตัวเอง
สิ่งพิมพ์
สื่อสารกับคนทั่วไปผู้อ่านทั่วไปไม่รู้ว่ากล่องกับหนวดหมายถึงอะไร ต้องอธิบายก่อน
สไลด์ผู้บริหารต้องอธิบายวิธีอ่านก่อน ซึ่งกินเวลาในสไลด์

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

  1. เขียนจำนวนข้อมูลของแต่ละกลุ่มไว้ใต้ชื่อกลุ่ม
  2. วาดจุดข้อมูลจริงทับเมื่อข้อมูลไม่เกิน 200 จุดต่อกลุ่ม
  3. ระบุเกณฑ์ค่าผิดปกติที่ใช้ใน caption

รูปแบบชื่อกราฟที่ควรใช้

<กลุ่ม> มีมัธยฐานสูงสุดที่ <ค่า> แต่ <กลุ่ม> กระจายกว้างกว่าอย่างชัดเจน

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

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

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

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

groups = [g["value"].dropna().to_numpy() for _, g in df.groupby("group")]
labels = [f"{k}\n(n={len(g)})" for k, g in df.groupby("group")]     # เขียน n กำกับเสมอ
bp = ax.boxplot(groups, labels=labels, patch_artist=True, widths=0.5)
for patch in bp["boxes"]:
    patch.set_facecolor("#cde2fb"); patch.set_edgecolor(C1)
ax.set_ylabel("ค่าที่วัดได้"); ax.grid(axis="y", alpha=0.25); ax.set_axisbelow(True)

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

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

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

ข้อมูลตัวอย่าง · 320 แถว · seed 101● คำนวณใหม่ในเบราว์เซอร์ทันทีที่ปรับค่า
เทียบกับหน้า violin plot ที่ใช้ข้อมูลชุดเดียวกัน
สาขา Aสาขา Bสาขา Cสาขา D
50.060.070.080.090.0สาขา Aสาขา Bสาขา Cสาขา Dสาขา A · มัธยฐาน 57.6 · IQR 54.8–59.7 · n=80สาขา B · มัธยฐาน 66.3 · IQR 63.4–70.2 · n=80สาขา C · มัธยฐาน 61.7 · IQR 60.1–63.7 · n=80สาขา D · มัธยฐาน 73.7 · IQR 69.0–77.0 · n=80

box plot ซ่อนรูปร่างไว้ — การกระจายสองยอดกับยอดเดียวอาจให้กล่องหน้าตาเหมือนกัน

กลุ่มที่มัธยฐานสูงสุดสาขา D
กลุ่มที่กระจายมากสุดสาขา D
จำนวนกลุ่ม4
ดูข้อมูลเป็นตาราง (4 แถว)
box plot 4 กลุ่ม
กลุ่มnต่ำสุดQ1มัธยฐานQ3สูงสุด
สาขา A8050.054.857.659.767.1
สาขา B8055.963.466.370.276.6
สาขา C8055.660.161.763.768.1
สาขา D8062.669.073.777.084.9

ลองแล้วจะเห็นอะไร

  • สังเกตอะไร: เปิดหน้า violin-plot คู่กัน จะเห็นว่าข้อมูลชุดเดียวกันมีรูปร่างที่กล่องไม่เคยบอกเลย

ข้อควรระวัง

  1. ★ ลืมว่ากล่องซ่อนรูปร่างไว้ แล้วสรุปว่าการกระจายของสองกลุ่มเหมือนกันเพราะกล่องเหมือนกัน
  2. ใช้กับกลุ่มที่มีข้อมูลน้อยกว่า 10 จุด ซึ่งควอไทล์ไม่เสถียร
  3. ไม่เขียนจำนวนข้อมูลของแต่ละกลุ่ม ทำให้เทียบกลุ่มใหญ่กับกลุ่มเล็กอย่างไม่ระวัง
  4. ไม่ระบุเกณฑ์ของค่าผิดปกติ ซึ่งแต่ละไลบรารีใช้ไม่เหมือนกัน

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

  • ต้องการเห็นรูปร่างการกระจายใช้แทน: violin-plot หรือ raincloud-plot
  • มีข้อมูลน้อยกว่า 10 จุดต่อกลุ่มใช้แทน: strip-plot ที่แสดงทุกจุด
  • มีกลุ่มเดียวใช้แทน: histogram หรือ density-plot
  • ข้อมูลใหญ่มากและสนใจหางใช้แทน: boxen-plot ที่แสดงควอนไทล์ลึกกว่า

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

เทคนิคถัดไป · กราฟไวโอลิน