กราฟผลลัพธ์สมมติHypothetical Outcome Plot

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

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

ใช้ที่ไหนบ้าง — สื่อสารความเสี่ยงกับสาธารณะ แสดงผลการเลือกตั้งที่ยังไม่แน่นอน หรืออธิบายพยากรณ์ให้ผู้ไม่มีพื้นฐานสถิติ

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

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

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

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

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

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

ข้อดีที่วัดได้จริงคือผู้ชมที่ไม่มีพื้นฐานสถิติประเมินความไม่แน่นอนได้แม่นกว่าเมื่อดูภาพแบบนี้ เทียบกับการดูแถบความเชื่อมั่น

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

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

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

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

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

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

ค่าที่หายไป — ถ้าสุ่มผลลัพธ์ไม่ได้ในบางจุด ต้องเว้นในทุกเฟรมเหมือนกัน

สเกลของแกน — ★ แกนค่าต้องคงที่ทุกเฟรม ไม่อย่างนั้นการเด้งที่เห็นจะมาจากแกนไม่ใช่จากข้อมูล

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

date,value,low,high,kind
2025-01-01,100.9,97.7,104.1,ข้อมูลจริง
2025-01-31,102.3,99.1,105.5,ข้อมูลจริง
…

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

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

1. ดูหลายเฟรมแล้วสังเกตว่าเส้นเด้งไปมาแค่ไหน
2. สังเกตว่าบริเวณไหนเด้งมากและบริเวณไหนนิ่ง
3. หยุดเฟรมเพื่อดูผลลัพธ์แบบหนึ่ง ๆ

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

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

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

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

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

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

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

df = pd.read_csv("hop-plot-sample.csv")
df["value"] = pd.to_numeric(df["value"], errors="coerce")
df["low"] = pd.to_numeric(df["low"], errors="coerce")
df["high"] = pd.to_numeric(df["high"], errors="coerce")
FRAME = 0   # ← ค่าจาก Playground

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

d = df.sort_values("date").reset_index(drop=True)
sd = (d["high"] - d["low"]) / 3.92                   # ประมาณ SD จากช่วง 95%
rng = np.random.default_rng(42)                      # ★ ล็อกเพื่อให้ทุกคนเห็นเหมือนกัน
lo, hi = d["low"].min(), d["high"].max()
(line,) = ax.plot(d.index, d["value"], color=C1, linewidth=2.4)
ax.set_ylim(lo, hi)                                  # ★ แกนคงที่ทุกเฟรม
def frame(_):
    line.set_ydata(d["value"] + rng.normal(0, sd))
    return (line,)
anim = FuncAnimation(fig, frame, frames=40, interval=400, blit=True)
anim.save("hop.gif", writer="pillow")                # แสดงเป็นภาพเคลื่อนไหวเท่านั้น

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

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

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

ข้อควรระวัง

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

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

• ต้องพิมพ์หรือใส่สไลด์แบบนิ่ง→ใช้แทน: fan-chart หรือ confidence-band
• ผู้อ่านต้องการตัวเลขไปคำนวณต่อ→ใช้แทน: error-bars
• ผู้อ่านเป็นนักสถิติอยู่แล้ว→ใช้แทน: confidence-band ที่อ่านค่าได้ตรง

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