กราฟเส้นชั้นความหนาแน่น2D Density Contour

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

Contour plot ประมาณความหนาแน่นของข้อมูลบนระนาบสองมิติแล้ววาดเส้นรอบบริเวณที่มีความหนาแน่นเท่ากัน คล้ายเส้นระดับความสูงบนแผนที่ ผลคือเห็นว่ามีกี่กระจุกและแต่ละกระจุกรูปร่างอย่างไร ซึ่งเป็นโครงสร้างที่จุดทับกันซ่อนไว้

ใช้ที่ไหนบ้าง — หากลุ่มย่อยในข้อมูลขนาดใหญ่ แสดงบริเวณที่ค่าปกติอยู่ หรือวางทับ scatter plot เพื่อเสริมโครงสร้าง

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

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

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

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

Contour plot ตอบด้วยการประมาณความหนาแน่นทั่วทั้งระนาบ แล้ววาดเส้นรอบบริเวณที่ความหนาแน่นเท่ากัน วิธีคิดเหมือนเส้นระดับบนแผนที่ทุกประการ

สิ่งที่อ่านได้คือจำนวนยอด ถ้ามีวงปิดสองกลุ่มแยกกัน แปลว่าข้อมูลมีสองกลุ่มย่อยที่ scatter plot อาจแสดงเป็นเมฆก้อนเดียว

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

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

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

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

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

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

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

สเกลของแกน — linear ทั้งสองแกน การใช้ log จะทำให้รูปร่างของชั้นเปลี่ยนไปมากและต้องอธิบาย

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

x,y
23.61,65.65
58.57,67.07
…

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

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

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

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

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

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

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

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

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

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

df = pd.read_csv("contour-plot-sample.csv")
df["x"] = pd.to_numeric(df["x"], errors="coerce")
df["y"] = pd.to_numeric(df["y"], errors="coerce")
LEVELS = 5   # ← ค่าจาก Playground

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

d = df.dropna(subset=["x", "y"])
kde = gaussian_kde(np.vstack([d["x"], d["y"]]))
gx, gy = np.mgrid[d["x"].min():d["x"].max():80j, d["y"].min():d["y"].max():80j]
z = kde(np.vstack([gx.ravel(), gy.ravel()])).reshape(gx.shape)
cf = ax.contourf(gx, gy, z, levels=LEVELS, cmap="Blues", alpha=0.85)
ax.scatter(d["x"], d["y"], s=5, color=INK, alpha=0.2)      # จุดจริงทับไว้ให้ตรวจสอบได้
fig.colorbar(cf, ax=ax, label="ความหนาแน่น", shrink=0.7)

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

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

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

ข้อควรระวัง

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

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

• ข้อมูลน้อยกว่า 200 จุด→ใช้แทน: scatter-plot
• ต้องการทราบจำนวนจุดที่แน่นอน→ใช้แทน: hexbin-plot ที่นับจริง
• ผู้อ่านไม่คุ้นกับเส้นระดับ→ใช้แทน: hexbin-plot ที่อ่านง่ายกว่า

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