แผนที่ชุดเปรียบเทียบSmall Multiple Maps

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

Small multiple maps วางแผนที่หลายภาพเรียงกันโดยใช้สเกลสีเดียวกันทุกภาพ ทำให้เห็นการเปลี่ยนแปลงเชิงพื้นที่ตามเวลาได้โดยไม่ต้องอาศัยแอนิเมชันหรือความจำ กฎเหล็กคือทุกภาพต้องใช้สเกลเดียวกัน ไม่อย่างนั้นการเทียบกันก็ไร้ความหมาย

ใช้ที่ไหนบ้าง — การแพร่ระบาดของโรคตามเวลา การขยายตัวของเมือง การเปลี่ยนแปลงผลการเลือกตั้งข้ามรอบ หรือการเทียบตัวชี้วัดหลายตัวในพื้นที่เดียวกัน

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

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

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

เมื่ออยากรู้ว่ารูปแบบเชิงพื้นที่เปลี่ยนไปอย่างไร ทางเลือกคือทำแอนิเมชัน หรือวางภาพเรียงกัน

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

Small multiple maps แก้ด้วยการวางทุกช่วงเวลาไว้ให้เห็นพร้อมกัน ผู้อ่านจึงเทียบด้วยการกวาดสายตา ซึ่งแม่นกว่าการจำหลายเท่า และยังย้อนกลับไปดูซ้ำได้ตามใจ

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

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

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

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

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

1. ★ คำนวณช่วงค่าจากข้อมูลทุกภาพรวมกันก่อนกำหนดสเกลสี
2. ตรวจว่าทุกภาพมีเขตครบชุดเดียวกัน
3. เรียงภาพตามลำดับเวลา

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

สเกลของแกน — ★ สเกลสีเดียวกันทุกภาพโดยไม่มีข้อยกเว้น และมุมมองกับขนาดต้องเท่ากันหมด

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

province,region,rate
กรุงเทพฯ,เหนือ,26.6
เชียงใหม่,อีสาน,34.7
…

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

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

1. ดูภาพแรกและภาพสุดท้ายก่อนเพื่อรู้ทิศทางรวม
2. กวาดสายตาตามลำดับเพื่อดูว่าเปลี่ยนตอนไหน
3. เลือกเขตหนึ่งแล้วตามเขตนั้นข้ามทุกภาพ

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

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

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

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

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

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

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

df = pd.read_csv("small-multiple-maps-sample.csv")
df["rate"] = pd.to_numeric(df["rate"], errors="coerce")
NOTE = "scale"   # ← ค่าจาก Playground

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

periods = sorted(df["period"].unique())
vmin, vmax = df["rate"].min(), df["rate"].max()          # ★ สเกลร่วมจากข้อมูลทุกช่วง
fig, axes = plt.subplots(2, 3, figsize=(11, 7), constrained_layout=True)
base = gpd.read_file("provinces.geojson")
for ax_, p in zip(axes.ravel(), periods):
    g = base.merge(df[df["period"] == p], on="province")
    g.plot(column="rate", cmap="Blues", vmin=vmin, vmax=vmax,   # vmin/vmax เหมือนกันหมด
           ax=ax_, edgecolor="#fcfcfb", linewidth=0.4)
    ax_.set_title(str(p), fontsize=10, loc="left"); ax_.set_axis_off()
fig.colorbar(plt.cm.ScalarMappable(cmap="Blues",
             norm=plt.Normalize(vmin, vmax)), ax=axes, shrink=0.6, label="ต่อประชากรหมื่นคน")

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

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

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

ข้อควรระวัง

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

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

• มีช่วงเวลาเดียว→ใช้แทน: choropleth-map
• สนใจแนวโน้มของตัวเลขมากกว่าตำแหน่ง→ใช้แทน: line-chart หรือ slope-graph
• มีมากกว่า 12 ช่วงเวลา→ใช้แทน: heatmap-matrix ที่แกนหนึ่งเป็นเวลา

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