แผนที่การไหลFlow Map

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

Flow map ลากเส้นจากต้นทางไปปลายทางโดยความหนาแปรตามปริมาณ เหมาะกับการย้ายถิ่น การค้า หรือการเดินทาง จุดอ่อนคือเส้นตัดกันเยอะจนอ่านไม่ได้เมื่อมีเส้นทางมากกว่าสามสิบเส้น

ใช้ที่ไหนบ้าง — การย้ายถิ่นระหว่างจังหวัด เส้นทางการค้าระหว่างประเทศ การเดินทางไปทำงานข้ามเขต หรือการไหลของสินค้าในโซ่อุปทาน

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

1. ขั้นที่ 1เตรียมข้อมูลคู่ต้นทางปลายทางพร้อมปริมาณ
2. ขั้นที่ 2ลากเส้นโค้งเพื่อลดการทับซ้อน
3. ขั้นที่ 3ให้ความหนาแปรตามปริมาณและใส่หัวลูกศรบอกทิศ
4. ขั้นที่ 4แสดงเฉพาะเส้นทางที่ใหญ่ที่สุดเมื่อเส้นเยอะ

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

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

Flow map รวมทั้งสามส่วนไว้ในภาพเดียว โดยปลายเส้นบอกต้นทางปลายทาง หัวลูกศรบอกทิศ และความหนาบอกปริมาณ

ผลคือรูปแบบใหญ่ ๆ เช่น ทุกเส้นทางใหญ่มุ่งเข้าเมืองหลวง หรือการค้ากระจุกอยู่ในภูมิภาคเดียวกัน ปรากฏขึ้นทันที

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

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

ทางแก้ที่ใช้ได้จริงคือตัดให้เหลือเฉพาะเส้นทางที่ใหญ่ที่สุดสิบถึงยี่สิบเส้น แล้วระบุไว้ตรง ๆ ว่าตัดไปเท่าไรและเหลือสัดส่วนเท่าไรของทั้งหมด

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

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

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

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

ค่าที่หายไป — เส้นทางที่ไม่มีพิกัดครบต้องตัดออกและรายงานจำนวน

สเกลของแกน — ความหนาแปรตรงกับปริมาณ และเส้นหนาที่สุดไม่ควรเกินราวยี่สิบพิกเซล

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

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

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

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

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

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

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

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

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

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

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

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

df = pd.read_csv("flow-map-sample.csv")
df["rate"] = pd.to_numeric(df["rate"], errors="coerce")
NOTE = "short"   # ← ค่าจาก Playground

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

base = gpd.read_file("provinces.geojson")
base.plot(ax=ax, facecolor="#f2f1ed", edgecolor="#e2e0da", linewidth=0.5)
top = df.nlargest(15, "rate")                            # ตัดให้เหลือเส้นทางใหญ่
for _, r in top.sort_values("rate").iterrows():          # วาดเส้นเล็กก่อน
    x0, y0 = COORD[r["source"]]; x1, y1 = COORD[r["target"]]
    ax.annotate("", xy=(x1, y1), xytext=(x0, y0),
                arrowprops=dict(arrowstyle="-|>", color=C1, alpha=0.7,
                                lw=0.8 + r["rate"] / top["rate"].max() * 5,
                                connectionstyle="arc3,rad=0.18"))
ax.set_axis_off()
ax.set_title(f"แสดง {len(top)} จาก {len(df)} เส้นทาง", loc="left")

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

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

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

ข้อควรระวัง

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

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

• ตำแหน่งทางภูมิศาสตร์ไม่สำคัญ→ใช้แทน: sankey-diagram หรือ chord-diagram
• มีเส้นทางมากกว่า 40 เส้น→ใช้แทน: adjacency-matrix
• สนใจแค่ปริมาณรวมของแต่ละที่→ใช้แทน: graduated-symbol-map

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