ส่อง data visualization ใน #อภิปรายงบประมาณ65 ใช้กราฟแบบนี้ ‘อย่าหาทำ’

จบกันไปเมื่อวานสดๆ ร้อนๆ อย่างไม่เกินความคาดหมายกับการประชุมสภาอภิปรายงบประมาณปี 65 ครับ ตลอดการอภิปรายในปีนี้ สส. ทั้งฝ่ายรัฐบาลและฝ่ายค้านก็ใช้เวลาอภิปรายรวมกันกว่า 40 ชั่วโมง

ในฐานะ UX Designer ที่ทำงาน Data Visualization มาบ้างพอสมควร ผมสังเกตว่าการอภิปรายในครั้งนี้มีการใช้ “กราฟ” กันอย่างล้นหลาม

กราฟทั้งหมดเท่าที่เจอในคลิปการอภิปราย รวม 45 ชั่วโมง มีสไลด์ที่เป็นกราฟประมาณ 110 สไลด์ คิดเป็น 1 หน้าทุกๆ 24 นาที

แต่… “กราฟที่ดี” ไม่ใช่แค่ “กราฟที่มี”!

จากที่ได้รวบรวมกราฟต่างๆ ในการอภิปรายครั้งนี้ การใช้กราฟของเหล่า สส. แน่นอนว่ามีทั้งคนที่ใช้กราฟเหมาะสม ถูกต้อง และคนที่ใช้กราฟไม่เหมาะ จนอยากจะบอกว่า “ใช้กราฟแบบนี้ อย่าหาทำ!”

ในบทความนี้เราจะมาดูกันว่า “อย่าหาทำ” ที่ว่า คืออะไรบ้าง

แต่ก่อนอื่น อ่านมาถึงตรงนี้ หลายคนอาจจะสงสัยว่า “แล้วกราฟที่ดีคืออะไร” ผมขอยกเป็นหลักการคร่าวๆ ไว้ประมาณนี้

  1. สิ่งที่ตาเห็น (โดยเฉพาะแว้บแรก) ตรงกับ สิ่งที่สะท้อนออกมาจากข้อมูล
  2. สื่อสารสิ่งที่ต้องการได้ตรงประเด็น

วางหลักการประเมินเสร็จแล้ว ก็มาเริ่มกัน

อย่าหาทำ #1: Pie Chart สามมิติ 😡

Pie chart สามมิติ หรือ pie chart ที่โดนบี้จนเบี้ยว (แบบรูปซ้ายล่าง) ถือเป็นหนึ่งใน “บาปหนัก” อันดับต้นๆ ในวงการ Data Visualization สาเหตุที่ไม่ควรใช้ ก็เพราะความเป็นสามมิติของ Pie Chart นี่แหละ ทำให้ภาพที่ออกมาบิดเบี้ยว เรามาลองดูตัวอย่างนี้ แล้วตอบสามคำถามนี้ในใจกันดู

  • ดูแว้บแรก เห็นส่วนสีแดงใน pit chart อันไหนใหญ่ที่สุด
  • หลังจากดูไปซักพัก สีแดงในกราฟไหนแสดงสัดส่วนใหญ่ที่สุด
  • สัดส่วนที่ว่าคือกี่ %

ดูภาพนี้แล้วบางคนอาจจะมีคำตอบในใจแล้วว่าอันไหนใหญ่ที่สุด งั้นมาดูเฉลยกัน

กราฟทั้งหมดในรุปข้างบนนี้สัดส่วนเท่ากัน คิดเป็น 20% ครับ จะเห็นได้ว่า แค่เราเอาเอฟเฟกต์สามมิติออก ภาพนี้ก็ดูง่ายขึ้น เข้าใจได้เร็วขึ้นมากๆ และไม่เสี่ยงต่อข้อมูลที่ดูบิดเบี้ยว

อย่าหาทำ #2: กราฟแท่งสามมิติ 😡

ไปกันต่อกับตระกูลชาร์ตสามมิติที่ “บาป” ไม่แพ้กัน เหตุผลที่ไม่ควรใช้ Bar Chart สามมิติก็จะเป็นแนวเดียวกับเมื่อกี๊ แต่ไม่เหมือนกันเสียทีเดียว ลองมาดูตัวอย่างกันครับ ลองดูสองภาพนี้เร็วๆ แล้วตอบคำถามนี้

  • ค่าของแท่งสีแดงและแท่งสีน้ำเงินคือเท่าไหร่
  • ค่าของทั้งสองแท่งนี้ต่างกันเท่าไหร่

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

จากสองตัวอย่างนี้ เราสรุปออกมาเป็นหลักใหญ่ๆ ได้ว่า

“อย่าใช้กราฟสามมิติ ถ้าข้อมูลไม่จำเป็นต้องเป็นสามมิติ”

อย่าหาทำ #3: กราฟแท่งที่แกน Y ไม่ได้เริ่มที่ 0 😡

บาปนักอีกอย่างในการใช้ visualization คือกราฟแท่งที่แกน Y ไม่ได้เริ่มที่ 0 ซึ่งส่วนตัวผมมองว่าข้อนี้ “อันตราย” กว่า สองข้อที่ผ่านมา เพราะมันทำให้ผลที่เห็นด้วยตา ดูใหญ่กว่าความเป็นจริงหากเราเผลอไม่ได้อ่านแกน ความเข้าใจของเราจะเพี้ยนจากความเป็นจริงไปมากๆ ลองดูตัวอย่างนี้แล้วตอบคำถามว่า

  • ค่าของสีน้ำเงินและสีแดง ต่างกันกี่เท่า?

ทีนี้มาดูเฉลยกันครับ

.

.

.

สีแดงเป็น 880 สีน้ำเงิน 620 สีแดงเยอะกว่าสีน้ำเงินประมาณ 40% ครับ 😁

เอ๊ะ เดี๋ยวนะ ผมหยิบเฉลยผิดอัน

คำตอบคือสีแดงเป็น 103.8 สีน้ำเงิน 101.2 สีแดงเยอะกว่าสีน้ำเงินประมาณ 2.5% ครับ 😁😁😁 (สเกลจริงอยู่ทางขวา)

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

ซึ่งปัญหานี้ สส. ในสภาบางคนก็ทราบดี จนยกประเด็นนี้ขึ้นมาวิจารณ์กราฟของนายกเช่นกัน

(ใช่ครับ กราฟต้นทางทำบาปสองข้อเลย คือนอกจากจะไม่เริ่มที่ 0 แล้วยังจะเป็นสามมิติอีก 😭😭😭)

ทีนี้ บางคนอาจจะแย้งว่า “ก็ถ้าเริ่มจาก 0 แล้วมันเห็นความต่างไม่เยอะ เลยต้องปรับแกนไง?” ผมอยากจะเสนอทางแก้ว่า ถ้าเกิดกรณีแบบนี้

  • ถามตัวเองว่า “ทำไมคุณถึงคิดว่าความต่างนี้สำคัญ หรือเยอะ”
  • ถ้าความต่างนี้สำคัญจริงๆ ควรอธิบายด้วยวิธีอื่นนอกจากกราฟ เช่น เทียบสเกลกับของที่เห็นภาพ และอธิบายสาเหตุว่าความต่างเล็กน้อยในเชิงสัดส่วนนี้ ทำไมถึงสำคัญ

[update กรณีนี้ในภาพหัวเรื่อง]
ล่าสุด สส. วิโรจน์ พรรคก้าวไกล รับทราบปัญหาในกราฟและได้แก้ไขแกนในเวอร์ชั่นที่แชร์ในเพจแล้วครับ 😊

นอกจาก “กราฟบาปหนัก” สามแบบที่ยกขึ้นมา มีตัวอย่างอีกหลายอันที่น่าสนใจ และอาจถกเถียงกันต่อได้ เช่น

น่าคิด #1: Pie Chart 🤔

ในวงการที่ทำงานเรื่อง data visualization มีข้อถกเถียงอย่างหนึ่ง คือบางคนจะบอกว่า “เราไม่ควรใช้ Pie Chart ไม่ว่ากรณีใดๆ” ซึ่ง pie chart นั้นก็มีปัญหาหลายๆ อย่าง ตัวอย่างเช่น ถ้าดูรูปด้านล่างนี้ เราจะบอกจาก pie chart ได้ยากมากๆ ว่าชิ้นไหนใหญ่กว่ากัน แต่ถ้าปรับเป็น bar chart ก็จะเทียบได้ง่ายขึ้นมากครับ

ที่มาของภาพ https://commons.wikimedia.org/wiki/File:Piecharts.svg

สาเหตุที่ดูยาก ก็เพราะเวลาคนเราดู pie chart จะเทียบ “ขนาด” กับ “มุม” ซึ่งสายตาของคนเราเทียบสองอย่างนี้ได้ไม่เก่งเท่ากับการเทียบ “ความยาว” นั่นเอง

แต่ข้อดีของ pie chart ก็พอมี นั่นก็คือการแสดงให้เห็นว่า ทั้งหมดนี้ “ประกอบกันเป็น” 100% ของอะไรสักอย่าง ซึ่งสิ่งนี้ กราฟแท่งที่เอามาเรียงแบบในรูปข้างบนนี้ ไม่ได้สื่อ ด้วยสาเหตุนี้ บางคนก็เลยเลือกที่จะใช้ donut chart หรือ “แถบ” เพื่อแสดงสัดส่วนแทน ซึ่งก็จะช่วยได้พอสมควร

ซึ่งในการประชุมงบประมาณปี 65 ที่ผ่านมา ก็มีคนใช้เทคนิคนี้อยู่พอสมควรเช่นกัน

น่าคิด #2: กราฟเส้นต้องเริ่มแกนที่ 0 หรือไม่? 🤔

หลังจากที่เราคุยกันไปเรื่อง “กราฟแท่งต้องเริ่มแกนที่ 0” บางคนอาจจะถามถึงกราฟเส้น ซึ่งประเด็นนี้ก็เป็นที่ถกเถียงพอสมควรครับ

สำหรับผม คำตอบคือ “ไม่จำเป็น” เพราะว่า กราฟเส้นมีไว้แสดง “ความเปลี่ยนแปลงขึ้น/ลง” ไม่ใช่ “ค่าตัวเลข” (แต่ถ้ามีข้อมูลแค่สองจุด อย่าใช้กราฟเส้นเลยจะดีกว่า) เราลองมาดูตัวอย่างนี้กัน

ในภาพนี้ เป็นกราฟเส้นที่เริ่มแกนที่ 0 ซึ่งเราจะเห็นได้ว่า ความเปลี่ยนแปลงมันเห็นไม่ชัด ถ้าเราลอง “ยืด” แกนขึ้นมา ก็จะเห็นความเปลี่ยนแปลงชัดเจนขึ้นมาก และในเมื่อเราไม่ได้ใช้ “แท่ง” ที่คนจะมองเปรียบเทียบจากความยาว ทำให้ปัญหาเรื่องสเกลผิดเพี้ยนน้อยลง

และก็จะมีกรณีน่าสนใจอื่นๆ ของกราฟเส้นอีก เช่น “แกนนอนถี่แค่ไหน” เพราะจะส่งผลกับความชันของเส้นโดยตรง ยิ่งถี่ยิ่งดูเปลี่ยนเร็ว เปลี่ยนเยอะดังตัวอย่างนี้

แต่บางคนก็ดูแล้วอาจจะยังไม่สบายใจที่จะไม่เริ่มแกนที่ 0 กรณีนั้น ถ้าเปลี่ยนไปใช้กราฟแท่งเลยอาจจะตอบโจทย์กว่า ทั้งนี้ขึ้นอยู่กับว่าคุณอยากจะสื่อถึง “ค่าตัวเลข” หรือ “ความเปลี่ยนแปลง” จากกราฟนั้นมากกว่ากัน

ตัวอย่างน่าสนใจอื่นๆ

นอกจากตัวอย่าง “อย่าหาทำ” และตัวอย่าง “น่าคิด” ที่ผมยกไปแล้ว ในการประชุมอภิปรายงบครั้งนี้ก็มีตัวอย่างการใช้ data visualization ที่น่าสนใจอีกมาก เช่นในรูปนี้ ที่ใช้ bar chart แบบที่มีตัวเลขติดลบ (ชี้ไปทางซ้าย/ชี้ลงล่าง) และก็มีชาร์ทแบบอื่นๆ เช่นภาพซ้ายล่าง ที่เรียกว่า “waterfall chart” แสดงส่วนประกอบ บวก/ลบ ใช้สื่อสารคล้ายๆ กับ pie chart ได้เช่นกันครับ

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

และตัวอย่างที่ผมชอบมากๆ คือกราฟนี้ ที่สื่อถึงเรื่อง “ฐานปิระมิด” ได้ชัดเจน แต่น่าเสียดายที่สเกลของพื้นที่ไม่ตรงกับตัวเลขที่จะสื่อ ซึ่งสเกลที่ตรงกับความเป็นจริง ผมลองทำไว้เป็นตัวอย่างในภาพทางขวาครับ (ปรับสีนิดหน่อยให้แสบตาน้อยลง)

มาถึงตรงนี้ เราคงจะเห็นกันแล้วว่าการใช้ data visualization ในสภายังมีปัญหาอยู่พอสมควร ซึ่งเราก็เจอปัญหากันทั้งในกราฟของฝ่ายรัฐบาลและฝ่ายค้าน ผมจึงอยากมาเขียนเรื่องนี้ แชร์ไว้เพื่อเป็นความรู้กับการทำ data visualization ของทุกๆ ท่าน เพื่อให้ตอบโจทย์กับทุกคนที่อยากสื่อสารตัวเลขให้มีประสิทธิภาพ และทุกๆ คนที่อ่านกราฟ เพื่อให้เข้าใจ และตั้งสติเวลาดูกราฟกันครับ 😊

taepras.com

UX Designer by day, creative coder by night. Bangkok-based. Currently @ KBTG. Georgia Tech MS-HCI Alum. Former UX intern at Google Hardware.

UX Designer by day, creative coder by night. Bangkok-based. Currently @ KBTG. Georgia Tech MS-HCI Alum. Former UX intern at Google Hardware.