กราฟน้ำแข็งย้อยIcicle Chart

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

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

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

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

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

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

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

Icicle แก้ทั้งสองข้อด้วยการคลี่วงออกเป็นเส้นตรง แต่ละชั้นกลายเป็นแถวแนวนอน และแต่ละโหนดเป็นแท่งที่ความกว้างแปรตามสัดส่วน

ทันทีที่เปลี่ยนจากมุมเป็นความกว้าง ความแม่นก็ดีขึ้นมาก เพราะการเทียบความยาวบนเส้นฐานเดียวกันเป็นสิ่งที่สายตาทำได้ดีที่สุด

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

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

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

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

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

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

ค่าที่หายไป — โหนดที่ไม่มีค่าจะหายพร้อมลูก ต้องตรวจผลรวมก่อนวาด

สเกลของแกน — ความกว้างแปรตรงกับค่า และทุกแถวใช้ความกว้างรวมเท่ากันเสมอ

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

id,parent,value
บริษัท,,0
สินค้าอุปโภค,บริษัท,0
…

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

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

1. อ่านจากแถวบนลงล่างคือเดินลงลำดับชั้น
2. เทียบความกว้างของแท่งในแถวเดียวกัน
3. ดูจำนวนแถวเพื่อรู้ความลึก

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

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

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

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

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

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

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

leaves = df[df["value"] > 0]
groups = leaves.groupby("parent")["value"].sum().sort_values(ascending=False)
total = groups.sum()
ax.barh([2], [total], height=0.7, color="#256abf", edgecolor=SURFACE, linewidth=2)
ax.text(total / 2, 2, f"ทั้งหมด {total:,.0f}", ha="center", va="center", color="white", fontsize=10)
left = 0
for i, (g, v) in enumerate(groups.items()):
    ax.barh([1], [v], left=left, height=0.7, color=[C1, C2, C3, "#eda100"][i % 4],
            edgecolor=SURFACE, linewidth=2)
    if v / total > 0.12: ax.text(left + v / 2, 1, g, ha="center", va="center", color="white", fontsize=9)
    sub_left = left
    for _, r in leaves[leaves["parent"] == g].iterrows():
        ax.barh([0], [r["value"]], left=sub_left, height=0.7, alpha=0.6,
                color=[C1, C2, C3, "#eda100"][i % 4], edgecolor=SURFACE, linewidth=2)
        sub_left += r["value"]
    left += v
ax.set_yticks([0, 1, 2]); ax.set_yticklabels(["รายการย่อย", "กลุ่ม", "ทั้งหมด"]); ax.set_xticks([])

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

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

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

ข้อควรระวัง

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

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

• ต้องการสื่อความเป็น "ทั้งหมด" อย่างชัดเจน→ใช้แทน: sunburst-chart หรือ pie-chart
• มีระดับเดียว→ใช้แทน: horizontal-bar
• สนใจโครงสร้างการเชื่อมต่อมากกว่าขนาด→ใช้แทน: node-link-tree

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