[T]issues 2.1

เรื่องที่จะพูดถึงในวันนี้คือกราฟแท่ง – แล้วทำไมต้องจั่วหัวว่า semantic? มันเป็นกราฟแบบใหม่หรือเปล่า?

คำตอบคือ Nope – ก็แค่กราฟแท่งธรรมดาๆนี่แหละครับ แต่วันนี้เราจะทำให้มันไม่ธรรมดาด้วยการใส่ “ความหมาย” เข้าไปในกราฟด้วย

การนำข้อมูลมาแสดงผลด้วยแผนผังต่างๆ อย่างกราฟแท่ง, กราฟเส้น, pie chart (ไม่รู้ภาษาไทยแปลว่าอะไร) นั้นสำคัญอย่างมากเลยทีเดียว – ลองนึกภาพข้อมูลเรียงกันเป็นตับๆ เป็นตาราง แน่นอนว่าหากเราพยายามทำความเข้าใจกับมันสัก 2-3 นาที (หรืออาจจะมากกว่า)ก็ย่อมเข้าใจได้ไม่ยาก – ทีนี้ถ้าตารางมันซับซ้อนขึ้น หรือมีความสัมพันธ์กับตารางอื่น เริ่มมีปัญหาแล้วล่ะ เผลอๆอาจถึงขั้นดูไม่รู้เรื่อง

การแสดงข้อมูลดิบไม่ friendly กับมนุษย์ จึงเป็นทีมาของการทำ data visualization…

ตัวอย่างที่เห็นบ่อยๆในชีวิตประจำวันก็เช่นกราฟเส้นแสดงราคาสินค้า, หุ้น, น้ำมัน ฯลฯ แบบที่เห็นปุ๊บแล้วสมองเราแปลความหมายได้เลย จากแนวโน้มว่ามากขึ้นหรือลดลง

อีกตัวอย่างนึงที่ใช้ data visualization แบบครบเครื่องก็ google analytics พี่กูเราใช้ชาร์ทแทบจะทุกอย่างที่ (ผม) รู้จักเลยก็ว่าได้

เข้าประเด็นเรื่องกราฟที่มีความหมาย…

ทีนี้ไอ้การทำกราฟมาโชว์บนเว็บก็มีเทคโนโลยีมากมายรองรับ อย่าง Flash, SilverLight – หรือจะใช้โปรแกรมเจ็นออกมาเป็นรูปเลยก็ไม่ผิดกติกา

ปัญหาคือกราฟ (Multimedia/Image format) เหล่านั้นมักจะอยู่ในรูปแบบที่แปลงข้อมูลไปหมดแล้ว – ยากที่จะไล่ดูข้อมูลดั้งเดิม เรียกอีกอย่างว่าไม่มี accessibility

เช่นคุณไม่สามารถ copy&paste ข้อมูลเหล่านั้นลงบน word ได้ เพราะมันไม่ใช่ text อีกต่อไป – บางครั้งมันก็แค่ชวนหงุดหงิด แต่บางคราวก็ทำให้ฉิบหายได้เลยถ้าข้อมูลเยอะๆ – นั่งกรอกกันหลังขดหลังแข็งกันทีเดียว

ทางออกของปัญหานี้คือใช้ HTML ธรรมดาๆนี่แหละครับสร้างกราฟเอา แล้วใช้ CSS ตกแต่งหน้าตาให้ออกมาอย่างที่เราต้องการ

ตัวอย่างต่อไปนี้เป็นกราฟแท่งแนวนอน ลองเลือก No ข้างล่างเพื่อ “เปลือย” สไตล์ออกจะเห็นข้อมูลดั้งเดิม เลือก Yes ก็กลับมาเป็นกราฟตามเดิม

ใช้ CSS หรือเปล่า?
Yes – ตกแต่งหน้าตาด้วย CSS
No – ขอดูข้อมูลเพียวๆ

รายละเอียดวิธีทำดูได้ที่บทความ Accessible Data Visualization with Web Standards ของ A List A Part ครับ

ที่จริงเรื่อง accessibility มันมีมากกว่าแค่ copy&paste ครับ – มันส่งผลไปถึงคอนเซ็ปต์ Semantic Web ด้วย แล้วไว้มาพูดกันวันหลัง…

ป.ล. ข้อมูลทั้งหมดเป็นการสมมุติทั้งตัวเลขและแบรนด์ ไม่เป็นความจริงทุกประการ