วันอังคารที่ 27 มกราคม พ.ศ. 2558

Exercise 2

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


ชื่อเรื่อง : รายงานผลการสำรวจพฤติกรรมผู้ใช้อินเทอร์เน็ตในประเทศไทยปี 2557 
               Thailand Internet User Profile 2014
เรียบเรียงโดย : ส่วนงานดัชนีและสำรวจสำนักยุทธศาสตร์สำนักงานพัฒนาธุรกรรมทาง
                         อิเล็กทรอนิกส์(องค์การมหาชน) กระทรวงเทคโนโลยีสารสนเทศและการสื่อสาร       
พิมพ์ครั้งที่1 : กรกฎาคม 2557
พิมพ์จำนวน : 2,000 เล่ม
ราคา 120 บาท
สงวนลิขสิทธิ์ตามพระราชบัญญัติลิขสิทธิ์ พ.ศ. 2537

สนใจข้อมูลเพิ่มเติม : https://www.etda.or.th/etda_website/


รูปที่ 1 แสดงลักษณะหน้าปกของหนังสือชื่อ รายงานผลการสำรวจพฤติกรรมผู้ใช้อินเทอร์เน็ตในประเทศไทยปี 2557  
Thailand Internet User Profile 2014


              ข้อมูลภายในของหนังสือส่วนใหญ่จะกล่าวถึงข้อมูลเกี่ยวกับการใช้งานอินเทอร์เน็ตในประเทศไทยปี 2557 ซึ่งข้อมูลที่ได้เกิดจากการทำแบบสอบถาม โดยมุ่งเน้นการเก็บข้อมูลจากประชาชนทุกเพศทุกวัย และสิ่งที่น่าสนใจซึ่งเกี่ยวเนื่องกับวิชาที่ได้เรียนอบู่ในตอนนี้คือ การนำข้อมูลดิบที่ได้มาแสดงในลักษณะของ Data visualization (ดังรูป 2) และ Infographic (ดังรูป 3) ได้อย่างดีเยี่ยม ทำให้ผู้อ่านเข้าใจได้ง่ายขึ้น



รูปที่ 2 ส่วนหนึ่งของหนังสือดังกล่าวอยู่ในหน้า 64  
แสดงการนำข้อมูลดิบที่ได้มาแสดงเป็น bar chart


รูปที่ 3 ส่วนหนึ่งของหนังสือดังกล่าวอยู่ในหน้า 73 
แสดงการนำข้อมูลดิบที่ได้มาแสดงเป็นลักษณะ infographic
        

                สรุป ข้อมูลที่นำมาใช้ในการสร้างกราฟทั้งหมดในหัวข้อด้านล่างต่อไปนี้ นำมาจากส่วนหนึ่งของหนังสือดังกล่าวในหน้า 41 ในหัวข้อ 
" ร้อยละของผู้ใช้อินเทอร์เน็ตฯจำแนกตามจำนวนชั่วโมงการใช้อินเทอร์เน็ตต่อสัปดาห์ปี 2556 – 2557 "


รูปที่ 4 แสดงการนำข้อมูลมาใช้อยู่ในรูปแบบไฟล์ .csv จากโปรแกรม Microsoft Excel


1. Try one or more web - based tools

     Datawrapper

         แหล่งข้อมูล : https://datawrapper.de

    • เริ่มต้นที่หน้าแรกของเว็บจะมีข้อมูลการใช้งานมากมายซึ่งผู้ใช้งานสามารถสมัครสมาชิกเพื่อเข้าใช้งานได้ หรือหากผู้ใช้งานไม่ต้องการสมัครสมาชิกสามารถเริ่มต้นสร้างกราฟได้ที่ปุ่ม +New chart  ดังรูป 1.1



รูปที่1.1 แสดงหน้าต่างของเว็บ datawrapper.de

    • ขั้นตอนการสร้างกราฟประกอบด้วย 4 ขั้นตอนดังนี้
      • Upload data ในส่วนนี้จะเป็นการดึงข้อมูลที่ต้องการสร้างกราฟมาแสดงซึ่งต้องเป็นไฟล์ .csv ( ยังไม่รองรับข้อมูลที่เป็นภาษาไทย ) 
      • Check & Describe เมื่อได้ทำการโหลดไฟล์ .csv ได้แล้วหน้าเว็ปก็จะเปลียนให้ทำขั้นตอนถัดไปทันทีดังรูป 1.3 โดยในหน้านี้จะเป็นการตรวจสอบข้อมูลที่เราทำการโหลดมาและสามารถเพิ่มคำอธิบายข้อมูลข้างต้นได้


รูปที่ 1.2 แสดงหน้าต่างในการ upload ไฟล์ .csv


รูปที่ 1.3 แสดงหน้าต่างในการ Check&Describe 

      • Visualize ส่วนนี้เป็นการเลือกลักษณะของกราฟที่ต้องการ และใส่รายละเอียดสี ขนาดตัวอักษร สีกราฟ อื่นๆ ได้ ตัวอย่างที่นำมาแสดงเป็นลักษณะกราฟเส้น ดังรูป 1.4 และลักษณะกราฟแท่งของข้อมูลในปี 2556 และปี 2557 ดังรูป 1.5 - 1.6

รูปที่ 1.4 แสดงหน้าต่างส่วน Visualize ซึ่งเลือกการแสดงข้อมูลแบบ Line chart



รูปที่ 1.5 แสดงหน้าต่างส่วน Visualize ซึ่งเลือกการแสดงข้อมูลในปี 2556 แบบ Bar chart 


รูปที่ 1.6 แสดงหน้าต่างส่วน Visualize ซึ่งเลือกการแสดงข้อมูลในปี 2557 แบบ Bar chart 

 
       สรุป  สิ่งที่บอกได้จากการนำข้อมูลมาแสดงเป็นกราฟแบบต่างๆได้ว่า การใช้งาน internet ของคนไปยในปี 2556 ถึงปี 2557 พบว่า คนไทยใช้งาน internet เพิ่มขึ้นมากโดยดูได้ชัดเจนจากกราฟแท่งซึ่งแสดงว่าในปี 2556 คนไทยส่วนใหญ่ใช้งาน internet ต่ำกว่า 10 ชั่วโมงต่อสับดาห์ แต่ในปี 2557 คนไทยส่วนใหญ่ใช้งานข้อมูล internet มากสุดประมาณ 40 - 76 ชัวโมงต่อสัปดาห์ นับว่าเพิ่มขึ้นจากเดิมมาก

      • Publish & Embed ส่วนนี้จะใช้งานได้จำเป็นต้องสมัครสมาชิกก่อน ดังรูป 1.7


รูปที่ 1.7 แสดงหน้าต่างส่วน Publish & Embed

2. Try google charts

       Google Charts

           แหล่งข้อมูล : https://google-developers.appspot.com/chart/interactive/docs/index

    • เริ่มต้นเข้าสู่ Google charts ดังรูป 2.1 โดยทำการศึกษาตัวอย่างรูปแบบกราฟต่างๆได้ในส่วน Chart gallery โดยจะมีตัวอย่างโค้ด HTML และผลลัพธ์ที่ได้ของกราฟต่างๆมากมาย ในส่วนนี้ได้ลองศึกษาเกี่ยวกับการสร้างกราฟแบบ Bar chart


รูปที่ 2.1 แสดงหน้าเว็ป Google chart ในส่วนของ Chart gallery


    • ทดลองเขียน Html ในโปรแกรม Notepad แล้วบันทึกเป็นไฟล์ .html ดังรูป 2.2 แสดงข้อมูลแบบ Bar chart โดยผลลัพธ์ที่ได้ดังรูป 2.3 
      • ข้อดีของการใช้โปรแกรม Notepad คือใช้งานง่าย เป็นโปรแกรมพื้นฐานที่อยู่ในเครื่องไม่จำเป็นต้องไปโหลดเพิ่มเติ่ม และใช้ในการทดสอบโค้ดได้ง่าย
      • ข้อเสีย คือหากโค้ดมีการผิดพลาดเราไม่สามารถรู้ได้ว่าตรงไหน ต้องนั่งทวนโค้ดตั้งแต่บรรทัดแรก ทำให้เสีบเวลาอย่างมาก ผู้ที่ยังไม่ถนัดใน Syntax ของการใช้งาน HTML ควรเลือกใช้โปรแกรมอื่นๆที่จะช่วยให้การเขียน HTML ง่ายขึ้นเช่น Dreamweaver เป็นต้น  


รูปที่ 2.2 แสดงตัวอย่างโค้ด Html บนโปรแกรม Notepad อย่างง่าย



รูปที่ 2.3 แสดงข้อมูลข้างต้นในลักษณะ bar chart บน Browser Chrome

3. Find/try more tools

       AMCHARTS

         แหล่งข้อมูล :  https://live.amcharts.com/

    • เริ่มต้นใช้งานจะมีหน้าต่างให้เลือกรูปแบบการสร้างกราฟแบบต่างๆดังรูป 3.1 ของหน้าเว็ป AMCHARTS โดยทดลองการใช้งานสร้างกราฟแบบ Barchart



รูปที่ 3.1 แสดงหน้าเว็ป AMCHARTS


    • เมื่อเลือกรูปแบบกราฟแล้วจะมีส่วนต่างๆเช่น ( ดังรูป 3.2 )
      • ช่องการใส่ข้อมูลซึ่งอาจทำการ import ได้
      •  สามารถดูกราฟในรูปแบบ HTML ได้ Save HTML ได้
      • กำหนดลักษณะตัวอักษร สี ขนาด
      • อื่นๆ



รูปที่ 3.2 แสดงต่างการใส่รายละเอียดต่างๆของกราฟที่ต้องการ


    • ซึ่งลักษณะกราฟสามารถเลือกแบบ Hand ได้ดังรูป 3.3 หรือแบบทั่วไปดังรูป 3.4 
      • ข้อเสียของการใช้งานแบบไม่ทำการสมัครสมาชิกคือ ไม่สามารถ save หรือ Share ข้อมูลเพื่อเก็บไว้ใช้งานส่วนตัวได้


รูปที่ 3.3 แสดง Bar graph ของข้อมูลแบบ Hand



รูปที่ 3.4 แสดง Bar graph ของข้อมูลแบบปกติ





วันพุธที่ 21 มกราคม พ.ศ. 2558

Exercise 1

1. Use spreadsheet to create graph/chart


     Spreadsheet หรือ แผ่นตารางทำการ หมายถึง แผ่นตารางที่ประกอบด้วยแนวตั้งและแนวนอน ตัดกันเป็นช่องสี่เหลี่ยม แนวตั้งเรียกว่า Column (สดมภ์) แนวนอนเรียกว่า Row (แถว) ช่องสี่เหลี่ยมที่เกิดการตัดกันเรียกว่า Cell ใช้สำหรับบรรจุตัวอักษร ตัวเลข รูปภาพ หรือสูตรการคำนวนต่างๆ 
     ใช้รวบรวมข้อมูลให้ถูกจัดเก็บเป็นกลุ่มก้อน อีกทั้งยังสามารถนำมาคำนวณ, เรียงลำดับ และสร้างกราฟ อย่างง่ายขึ้น การดำเนินงานยังรวมถึงทำรายงานต่างๆ โดยโปรแกรมที่ใช้กันในปัจจุบันคือ
  • Microsoft Excel
  • Pladao Calc
  • อื่นๆ



รูปที่1.1 แสดงการใช้งาน Spreadsheet จากโปรแกรม Microsoft Excel


รูปที่1.2 ตารางแสดงข้อมูลที่ใช้ในการวาดกราฟจากโปรแกรม Microsoft Excel

อ้างอิงข้อมูลจาก : http://thaipublica.org/2014/09/salary-survey-2013/


คุณสมบัติอง Microsoft Excel
  1. Microsoft Excel สามารถคำนวณได้โดยการป้อนสูตรทางคณิตศาสตร์ ที่มีตั้งแต่การคำนวณพิ้นฐานอย่าง บวก ลบ คูณ หาร ไปจนถึงสูตรคำนวณที่ซับซ้อนขึ้นอย่างการหาค่าเฉลี่ย หรือแม้กระทั้งค่า Max ,Min เป็นต้น
  2. การสร้างฟังก์ชันทางคณิตศาสตร์ ที่ช่วยในการคำนวณที่ซับซ้อน เช่น ฟังก์ชันที่เกี่ยวกับการเงิน หรือบัญชี
  3. สามารถนำข้อมูลที่ป้อนในตารางไปสร้างเป็นกราฟได้
  4. ความสามารถในการตกแต่งตารางข้อมูล หรือกราฟ เพื่อให้การแสดงผลที่เข้าใจง่ายและสวยงาม
  5. สามารถคัดเลือกข้อมูลที่ต้องการออกมาวิเคราะห์หรือสร้างกราฟได้
  6. ความสามารถในการพิมพ์งานออกทางเครื่องพิมพ์ โปรแกรม Microsoft   Excel สามารถพิมพ์งานทั้งข้อมูลและรูปภาพหรือกราฟออกทางเครื่องพิมพ์ได้ทันที ซึ่งทำให้ง่ายต่อการสร้างรายงาน
  7. ความสามารถในการแปลงข้อมูลในตารางให้เป็นเว็บเพจ เพื่อนำไปแสดงในโฮมเพจ
อ้างอิงข้อมูลจาก : http://www.krumai.com/ex/p6_1_2.html



รูปที่1.3 การนำข้อมูลที่ได้มาแสดงเป็น Pie Chart ในโปรแกรม Microsoft Excel




รูปที่1.3 การนำข้อมูลที่ได้มาแสดงเป็น Bar Graph ในโปรแกรม Microsoft Excel


2. Use Processing.js

*ยังแสดง Pie Chart ได้ไม่สมบูรณ์


รูปที่2.1 แสดงโค้ดในการสร้างกราฟ pie chart จากโปรแกรม processing2.2.1




รูปที่2.2 แสดงโค้ดในการสร้างกราฟ pie chart (ต่อ)จากโปรแกรม processing2.2.1




รูปที่2.3 แสดงกราฟ pie chart จากการรันโค้ดข้างต้น



3. Find and try other tools


Online Chart Tool 
     เป็นเครื่องมือในการสร้างกราฟแบบออนไลน์ มีวัตถุประสงค์ให้ผู้ใช้สามารถออกแบบและแบ่งปันแผนภูมิของตัวเองแบบออนไลน์และฟรี ทางผู้ผลิตสนับสนุนจำนวนชนิดแผนภูมิต่างๆ เช่น แผนภูมิแท่ง แผนภูมิวงกลม แผนภูมิเส้น bubble charts  radar plots เป็นต้น

อ้างอิงข้อมูลจาก :http://www.onlinecharttool.com/


รูปที่3.1  เครื่องมือแบบออนไลน์ที่ใช้ในการสร้างกราฟแบบต่างๆ

ขั้นตอนการใช้งาน

  • เริ่มต้นให้เลือกไปที่ปุ่ม Design Your chart 
  • ทำการเลือกรูปแบบกราฟที่เราต้องการสร้างพร้อมระบุรายละเอียด(แสดงบนรูปที่ 3.2) เมื่อเสร็จสิ้นกดปุ่ม Next เพื่อทำรายการต่อไป 



รูปที่3.2  แสดงหน้าต่างการเลือกกราฟชนิดต่างๆ 



  • ใส่ข้อมูลที่ต้องการสร้างกราฟ ซึ่งสามารถเลือกสีกราฟหรือรายละเอียดอื่นๆได้ดังรูปที่ 3.3เมื่อเสร็จสิ้นกดปุ่ม Next เพื่อทำรายการต่อไป 


รูปที่3.3  แสดงหน้าต่างการใส่ข้อมูลที่ต้องการสร้างกราฟ



  • เลือกรายละเอียดตัวอักษรในกราฟดังรูปที่3.4 เมื่อเสร็จสิ้นกดปุ่ม Next เพื่อทำรายการต่อไป 


รูปที่3.4  แสดงหน้าต่างการใส่รายละเอียดตัวอักษรแบบต่างๆ


  • ในหน้าต่างนี้แสดงข้อมูลในรูปแบบกราฟที่เราต้องการ (แสดงบนรูปที่ 3.5 หรือรูปที่ 3.6) โดยหากต้องการ Save หรือ Share สามารถทำได้โดยการกดปุ่ม Next แล้วทำรายการต่อไป


รูปที่3.5  แสดงกราฟข้อมูลแบบ Bar Chart



รูปที่3.6  แสดงกราฟข้อมูลแบบ Pie Chart