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

  

Infographic vs Data Visualization

Infographic

Information graphics หรือ Infographic เป็นการนำเสนอข้อมูลหรือความรู้ต่างๆในรูปแบบของกราฟฟิก โดยจะเน้นที่จะแสดงข้อมูลที่ซับซ้อนหรือเข้าใจยากให้เข้าใจได้อย่างรวดเร็วและชัดเจน โดยในการใช้กราฟิกเป็นการเพิ่มขีดความสามารถในการรับรู้ของมนุษย์ทำให้เห็นภาพ ขั้นตอนการสร้าง infographic สามารถที่จะเรียกว่าการแสดงข้อมูล (data visualization), การออกแบบข้อมูล (information design) หรือสถาปัตยกรรมข้อมูล (information architecture)

Data Visualization 

Data visualization หรือ Data Visualisation คือการแสดงข้อมูลในรูปแบบของภาพหรือกราฟิก นับเป็นศควรรศที่ผู้คนแสดงภาพเช่นแผนภูมิ (chart) และแผนที่ (map) เพื่อให้ผู้คนได้เข้าใจข้อมูลได้อย่างง่ายดายและรวดเร็ว มีการรวบรวมและวิเคราะห์ข้อมูลในปริมาณที่มากขึ้นซึ่งได้มีการใช้โปรแกรมสำหรับการแสดงภาพเพื่อดูผลจากการวิเคราะห์ ความสัมพันธ์ของข้อมูลเป็นจำนวนมาก การสื่อสารแนวคิดและสมมติฐานของผู้อื่นรวมไปถึงการทำนายอนาคตอีกด้วย

Difference

Data Visualization 

1.ถูกสร้างโดยโปรแกรมและสามารถที่จะนำไปใช้ในชุดข้อมูลจำนวนมากได้ 

2.เป็นสิ่งโดยทั่วไป (general)

3.context-free

4.ส่วนใหญ่จะเป็นอัตโนมัติ

Infographic 

Data Visualization Week 1

      ในสัปดาห์นี้ได้รับมอบหมายให้ทำงานสองชิ้นด้วยคือ

ให้ใช้ Spreadsheet ในการสร้าง graph/chart

ให้ใช้ processing.js

      สำหรับในการใช้ Spreadsheet ในการสร้าง graph/chart ได้ใช้โปรแกรม Microsoft Excel ในการสร้าง โดยข้อมูลที่ใช้สร้างนั้นเป็นการพยากรณ์อากาศในหนึ่งสัปดาห์ โดยในกราฟจะแสดงอุณหภูมิสูงสุด อุณหภูมิต่ำสุด อุณหภูมิเฉลี่ย และลักษณะของสภาพอากาศในแต่ละวัน

ข้อมูลที่ใช้ในการสร้างกราฟ

กราฟที่ได้จากข้อมูลข้างต้น

เมื่อใช้โปรแกรม processing ในการสร้างกราฟ