กราฟไอคอนPictogram Chart

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

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

ใช้ที่ไหนบ้าง — อินโฟกราฟิกสาธารณะ รายงานที่ผู้อ่านไม่คุ้นกับกราฟ หรือการสื่อสารตัวเลขที่ใหญ่จนนึกภาพไม่ออก

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

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

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

ตัวเลขใหญ่ ๆ อย่าง 2,400,000 คน เป็นสิ่งที่คนส่วนใหญ่นึกภาพไม่ออก การเปลี่ยนเป็นไอคอนคน 24 ตัวที่แต่ละตัวแทน 100,000 คน ทำให้สมองจับต้องได้ทันที

เหตุผลที่ได้ผลคือมนุษย์นับของเป็นชิ้น ๆ ได้เก่งกว่าการประเมินความยาวของแท่ง โดยเฉพาะเมื่อไม่คุ้นกับการอ่านกราฟมาก่อน

ราคาที่จ่ายคือความแม่น เพราะต้องปัดเป็นไอคอนเต็มตัว ค่า 2,450,000 กับ 2,350,000 อาจได้ไอคอนเท่ากันทั้งคู่ ดังนั้นต้องเขียนตัวเลขจริงกำกับเสมอ

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

จำนวนไอคอนควรอยู่ในช่วงที่นับไหว ถ้าต้องวาด 200 ไอคอนก็ไม่มีใครนับ ให้เพิ่มค่าต่อไอคอนแทน ภาพจำคือ ถ้านับด้วยตาไม่ไหว ก็เสียจุดแข็งของกราฟนี้ไปแล้ว

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

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

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

1. เลือกค่าต่อไอคอนให้จำนวนไอคอนอยู่ใน 5–30 ตัว
2. บันทึกค่าจริงไว้เขียนกำกับ
3. คำนวณว่าการปัดทำให้คลาดไปเท่าไร

ค่าที่หายไป — หมวดที่ไม่มีข้อมูลให้แสดงแถวว่างพร้อมข้อความ ไม่ใช่ไม่มีไอคอนเลย เพราะจะดูเหมือนค่าเป็นศูนย์

สเกลของแกน — เป็นการนับ ไม่มีสเกลต่อเนื่อง ค่าต่อไอคอนคือสิ่งเดียวที่ต้องเลือก

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

category,value
…

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

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

1. อ่านคำกำกับว่าหนึ่งไอคอนเท่ากับเท่าไรก่อน
2. นับไอคอนของแต่ละแถว
3. เทียบจำนวนไอคอนระหว่างแถว

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

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

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

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

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

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

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

d = df.sort_values("value", ascending=False).head(5).reset_index(drop=True)
for i, r in d.iterrows():
    n = round(r["value"] / PER)
    ax.scatter(range(n), [len(d) - i] * n, s=170, color=C1, marker="o")   # ไอคอนขนาดเท่ากันทุกตัว
    ax.text(-0.8, len(d) - i, r["category"], ha="right", va="center", fontsize=10)
    ax.text(n + 0.4, len(d) - i, f"{r['value']:,.0f}", va="center", fontsize=9, color=INK)
ax.set_xlim(-6, 26); ax.set_ylim(0, len(d) + 1); ax.axis("off")
ax.set_title(f"หนึ่งวงกลม = {PER:,} หน่วย", loc="left")

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

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

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

ข้อควรระวัง

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

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

• ต้องการค่าที่แม่นยำ→ใช้แทน: bar-chart หรือ data-table-viz
• มีหมวดมากกว่า 6 หมวด→ใช้แทน: horizontal-bar
• ค่าเป็นอัตราส่วนหรือดัชนีที่นับเป็นชิ้นไม่ได้→ใช้แทน: bar-chart

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