กราฟกระแสน้ำStreamgraph

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

Streamgraph คือพื้นที่ซ้อนที่ย้ายเส้นฐานมาไว้กึ่งกลางแล้วให้แถบขยายออกสองทาง ผลคือไม่มีชั้นไหนวางบนเส้นตรงเลย แลกกับภาพรวมที่ลื่นตาและเหมาะกับการเล่าเรื่องมากกว่าการอ่านค่า

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

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

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

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

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

ผลที่ได้คือภาพที่อ่านง่ายในแง่ "ภาพรวม" เราเห็นทันทีว่าช่วงไหนที่กระแสรวมกว้างขึ้น และหมวดไหนที่กำลังเบียดหมวดอื่นออกไป

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

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

สรุปคือใช้เมื่อเป้าหมายคือความรู้สึกและภาพรวม ไม่ใช่การอ่านค่า ถ้าผู้อ่านต้องตอบว่าหมวดนี้มีเท่าไร ต้องเปลี่ยนไปใช้พื้นที่ซ้อนธรรมดาหรือ small multiples

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

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

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

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

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

สเกลของแกน — linear เท่านั้น และมักซ่อนแกนตั้งเพราะเส้นฐานเลื่อน

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

date,series,value
…

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

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

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

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

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

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

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

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

# ติดตั้ง: pip install "matplotlib==3.10.*" "pandas==2.*"
# ดาวน์โหลด streamgraph-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("streamgraph-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)

df["date"] = pd.to_datetime(df["date"])
pivot = df.pivot_table(index="date", columns="series", values="value", aggfunc="sum").fillna(0)
ax.stackplot(pivot.index, *[pivot[c] for c in pivot.columns], labels=list(pivot.columns),
             baseline="sym", colors=[C1, C2, C3][: len(pivot.columns)])   # sym = จัดกึ่งกลาง
ax.set_yticks([])          # แกนตั้งไม่มีความหมายเมื่อเส้นฐานเลื่อน
ax.legend(frameon=False, ncols=3, loc="upper left")
fig.autofmt_xdate()

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

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

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

ข้อควรระวัง

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

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

• ต้องอ่านค่าของแต่ละหมวด→ใช้แทน: stacked-area หรือ small-multiples
• สนใจสัดส่วนมากกว่าปริมาณ→ใช้แทน: percent-stacked-bar
• มีหมวดน้อยกว่า 3 หมวด→ใช้แทน: multi-line-chart

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