Data Visualization week 2

สำหรับงานที่ได้รับมอบหมายในสัปดาห์นี้มีดังนี้

• Try one or more web-based tools
• Try google charts

ในส่วนของ web-based tools ที่ได้ลองทำดูนั้นลองทำ 3 ตัวด้วยกันครับคือ Datawrapper, Manyeyes และ plotly เริ่มกันที่ Datawrapper ก่อนเลยครับ 

Datawrapper นั้นถือเป็นโปรแกรมที่ใช้สร้าง Visualization ซึ่งถือว่าใช้งานค่อนข้างง่ายเพียงแค่ล๊อคอินเข้าไปแล้วเลือก create new chart ซึ่งขั้นตอนนั้นมีเพียง 4 ขั้นตอนด้วยกันโดยในขั้นตอนแรกสามารถอัพโหลดไฟล์ csv หรือจะใช้โค้ดตัวอย่างจากในเว็บก็ได้ครับ

ขั้นตอนต่างๆของ Datawrapper

สำหรับในขั้นตอนที่ 2 จะให้ใส่ที่มาของไฟล์ข้อมูลซึ่งจะใส่หรือไม่ใส่ก็ได้ครับ

ขั้นตอนที่สองใส่ที่มาของข้อมูล

ในขั้นตอนที่ 3 นั้นจะเป็นการปรับแต่ง visualization ครับ สามารถเลือกกราฟ ใส่ชื่อกราฟ หรือเปลี่ยนสีของเส้นกราฟ

ขั้นตอนที่ 3 ในการสร้างกราฟบน Datawrapper

ในขั้นตอนที่ 4 จะเป็นการ publish & embed โดยในเวอร์ชันฟรีนั้นไม่สามารถที่จะ publish for embedding และ export to static image ได้

ขั้นตอนการ publish & embed

หลังจากที่ได้ปรับแต่งกราฟแล้วจะได้ประมาณนี้ครับ

Manyeyes เป็นอีก web-based tools อีกตัวนึงที่ใช้สร้าง Visualization โดยลักษณะของเว็บจะคล้ายๆกับ Datawrapper แต่มีเพียง 3 ขั้นตอนคือ ขั้นตอนแรกจะเป็นการอัพโหลดข้อมูลลงไปซึ่งจะไม่สามารถอัพโหลดไฟล์ csv ขึ้นไปได้เหมือนกับ Datawrapper หรือ Plotly ต้อง copy ข้อมูลไปวางแล้วแยกด้วยเครื่องหมายลูกน้ำ (,) ขั้นตอนต่อมาจะให้เลือกลักษณะของกราฟ ขั้นตอนสุดท้ายคือการแชร์ข้อมูลซึ่งจะให้ใส่ ชื่อของ visualization แหล่งที่มาของข้อมูล เป็นต้น ซึ่งใน Datawrapper จะแยกขั้นตอนการใส่ที่มาของข้อมูลเป็นอีกขั้นตอนนึง 

การใส่ข้อมูลที่มีลงไปในเว็บ Manyeyes

ขั้นตอนการเลือก visualization ของเว็บ Manyeyes

ขั้นตอนการแชร์ visualization ของเว็บ Manyeyes

Visualization ที่สร้างจากเว็บ Manyeyes

Plotly เป็นอีกตัวเลือกนึงในการสร้าง Visualization การใช้งานนั้นถือว่าง่ายกว่า Datawrapper และ Manyeyes เล็กน้อยกล่าวคือ จะเป็นการรวมทุกขั้นตอนไว้ในหน้าๆเดียวไม่ว่าจะเป็นการอัพโหลดไฟล์ข้อมูล การเลือกลักษณะ visualization และการแชร์

หน้าตาของเว็บ Plotly

 
Visualization ที่สร้างจากเว็บ Plotly

ในส่วนของการทดลองใช้งาน google chart นั้นถือว่าไม่ยากเนื่องจากมีโค้ดตัวอย่างให้ใช้จากบนเว็บซึ่งถือว่ามีการอธิบายที่ค่อนข้างละเอียด โดยโค้ดตัวอย่างสามารถนำไปแก้ไขได้ใน text editor ต่างๆได้เช่น notepad,notepad++ เป็นต้น 

ภาพรวมของเว็บไซต์ google chart

แก้ไขโค้ดใน Text Editor

กราฟที่สร้างจาก google chart