29 เมษายน 2558

อัพเดท link test2


รณรงค์ให้ใช้กฏหมายอย่างถูกต้อง

 https://github.com/Jaasii/54-010126-3024-0
เขียนโดย ที่ ไม่มีความคิดเห็น:

25 มีนาคม 2558

Assignment1(progress2) - D3.js : อัตราการว่างงานในไทยปี 2557

    ใน Assignment1 เป็นการนำข้อมูลอัตราการว่างานในไทยของปี พ.ศ. 2557 มาแสดงผลให้เข้าใจง่ายขึ้น เพราะการว่างงาน ถือเป็นปัญหาใหญ่ในสังคมไทย ที่กลายเป็นปัญหาเชิงโครงสร้างและเชื่อมกับปัญหาทางการศึกษาไทย

    ข้อมูลของ JobDB ระบุข้อมูลเกี่ยวกับแรงงานในปี 2557 โดยคร่าวๆ ว่ามีนักศึกษาจบใหม่ในปี 2557 รวม  4 แสนคน แบ่งได้ดังนี้
  • ปวช. และ ปวส. ประมาณ    1    แสนคน
  • ปริญญาตรี ประมาณ           3    แสนคน
 
  จากข้อมูลจากกรมจัดหางานที่มองว่า จะมีผู้เข้าตลาดแรงงาน 547,853 คน คิดเป็นสัดส่วนดังนี้
  • ปริญญาตรี    336,879    คน (61.49%)
  • ปวส. และอนุปริญญา    74,550    คน(13.61%)
  • ม.3    64,604     คน (11.79%)
  • ปวช. ปี 3    48,884    คน(8.92%)
  • ม.6    22,936    คน(4.19%)


  และจากข้อมูลของสำนักงานสถิติรายงานว่า ตัวเลขการว่างงานในไทยของเดือนพฤษภาคม 2557 เป็นดังนี้
  • กำลังแรงงานทั้งหมด    38.37     ล้านคน
  • ผู้ที่มีงานทำแล้ว           37.76     ล้านคน
  • ผู้ที่ว่างงาน                    3.62     แสนคน
    โดยสภาอุตสาหกรรมแห่งประเทศไทย คาดว่าในวุฒิปริญญาตรีจะมีคนตกงานประมาณ 1.5 แสนคน เนื่องจากเกินความต้องการถึง 50%  เมื่อนำไปรวมกับตัวเลขการตกงานที่ค้างอยู่จะมีคนตกงานถึง 4.9 แสนคน และเมื่อดูจากตัวเลขการว่างงานของที่จำแนกตามระดับการศึกษาที่สำเร็จจะในปี 2557 พบว่าตัวเลขการว่างานที่มากที่สุดคือระดับการศึกษาที่สำเร็จในวุฒิปริญญาตรี







    สำหรับอัตราการว่างงานในไทยตั้งแต่ปี 2555 - 2556 ที่สำรวจโดย Adecco สามารถแสดงแนวโน้มได้ดังนี้


     
     ในขณะที่คณะที่ว่างงาน 10 อันดับคือ

  • คณะมนุษยศาสตร์    19%
  • คณะอักษรศาสตร์     18%
  • คณะนิเทศศาสตร์     17%
  • คณะพาณิชศาสตร์และการบัญชี    12%
  • คณะวารสารศาสตร์และการสื่อสารมวลชน    11%   
  • คณะรัฐศาสตร์           7%
  • คณะสังคมศาสตร์      6%
  • คณะเทคโนโลยีสารสนเทศและการสื่อสาร    5%
  • คณะศึกษาศาสตร์/ศิลปกรรมศาสตร์             3%
  • คณะวิศวกรรมศาสตร์                                  2%
        


Impact 

     จากข้อมูลอัตราการว่างงานที่รวบรวมมานั้นพบว่า ปัญหาที่เกิดขึ้นส่วนหนึ่งมีสาเหตุมาจากการที่ มีจำนวนแรงงานเยอะเกินกว่าที่ตลาดต้องการ ซึ่งข้อมูลที่นำมาแสดงเหล่านี้อาจส่งผลให้ ผู้ที่จะทำการเลือกศึกษาต่อในระดับวุฒิการศึกษาต่างๆ ได้นำมาพิจารณาว่า ตลาดแรงงานไทยเป็นไปในทิศทางใด

Improve


     เนื่องจากปัญหาแรงงานไทย เป็นปัญหาที่เกิดขึ้นในระดับโครงสร้างและระดับการศึกษา ในการแก้ปัญหาจึงค่อนข้างยาก แต่จากข้อมูลที่ได้มาอาจนำไปสู่การแก้ปัญหาได้ในแนวทางหนึ่ง เช่น

  • ควรปลูกฝังค่านิยมเรื่องการศึกษาใหม่
  • มหาวิทยาลัย หรือหลักสูตรการสอนควรปรับปรุงให้ตรงกับที่ตลาดต้องการ
  • ให้เด็กไทยที่จะทำการศึกษาต่อ ได้วิเคราะห์ถึงความต้องการในตลาดแรงงานว่ามีแนวโน้มไปในทางใด ก่อนที่จะเลือกศึกษาต่อ

เพิ่มเติม

    ** ทำไม ปี 57  ตลาดซอฟต์แวร์ไทยโตเกิน GDP ของประเทศ เกือบ ๆ 6 เท่าแต่ผลสำรวจคนสายคอม ฯ ตกงานมากสุดเป็นอันดับ 2

    ผลสำรวจของสำนักงานสถิติแห่งชาติ มี 5 อาชีพที่คนตกงานมากที่สุดปี 2557 ได้แก่
  • อันดับ 1 คือ อาชีพที่เกี่ยวกับการบริหารธุรกิจ/บริหารการพาณิชย์
  • อันดับ 2 คือ สายงานคอมพิวเตอร์
  • อันดับ 3 คือ สายวิศวกร
  • อันดับ 4 คือ สังคมศาสตร์
  • อันดับ 5 คือ สายมนุษยศาสตร์

  จากข้อมูลดังกล่าว จะเห็นได้ว่า สายงานคอมพิวเตอร์อยู่ในอันดับที่ 2 ของอาชีพที่ตกงาน แต่ตลาดซอฟต์แวร์ไทยกลับเติบโตเกิน GDP ของประเทศ เกือบๆ 6 เท่า(5.73 เท่า) หรือ 8.6% ในขณะที่ GDP ของประเทศมีเพียง 1.5%

   ผลสำรวจของ ซิป้าร่วมกับ ทีดีอาร์ไอ ได้แสดงมูลค่าตลาดซอฟต์แวร์และบริการซอฟต์แวร์ของประเทศไทยในปี พ.ศ. 2556 และคาดการณ์เมื่อสิ้นปี พ.ศ. 2557

Credit : http://marketeer.co.th/2014/08/software/




Credit : http://tdri.or.th/tdri-insight/software-survey-2013/

สรุปของผลสำรวจ

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

สาเหตุที่เป็นไปได้ที่สายงานคอมตกงานติดอันดับ

  • งานที่พัฒนาเฉพาะด้านถูกแทนที่ด้วยซอฟต์แวร์สำเร็จรูป
  • ลูกค้าบางรายใช้โปรแกรมเถื่อน
  • การผูกขาดจากตลาดส่วนกลาง
  • มีการแย่งรับงานเล็กๆ กันมากขึ้น ราคาและจำนวนครั้งการจ้างงานจึงลดลง
  • ตำแหน่งว่างมีน้อยเมื่อเทียบกับสถาบันที่เปิดสอน

อ้างอิง


เขียนโดย ที่ ไม่มีความคิดเห็น:

11 กุมภาพันธ์ 2558

Assignment1(prepare) - D3.js

 ใน Assignment 1 เป็นการทดลองใช้งาน D3.js โดยผู้ศึกษาได้เลือกศึกษาและฝึกปฏิบัติตาม Text book ที่มีเนื้อหาเกี่ยวกับการนำข้อมูลมาแสดงผล


     ชื่อหนังสือ : Interactive Data Visualization for the web (First Edition)
    ผู้แต่ง : Scott Murray
    สำนักพิมพ์ : O'REILLY

     สำหรับการศึกษาใน Assignment ที่ 1 นี้ได้เลือกศึกษาตามบทที่ 1 ถึง 5 ซึ่งจะแบ่งได้ดังนี้

  •  Chapter 1 : Introduction
  •  Chapter 2 : Introducing D3
  •  Chapter 3 : Technology Fundamentals
  •  Chapter 4 : Setup
  •  Chapter 5 : Data

Chapter 1 : Introduction

    บทที่ 1 เป็นการกล่าวนำถึงความสำคัญของการนำข้อมูลมาแสดงผล ในแง่ของการตั้งคำถามที่เกี่ยวข้องกับการเรียนรู้ D3 ซึ่งมีหัวข้อที่น่าสนใจดังนี้
  • Why Data Visualization?
          เพราะว่าการแสดงผลข้อมูลนั้น เป็นวิธีการที่เร็วที่สุดในการสื่อสารให้คนอื่นๆสามารถรับรู้และเข้าใจถึงข้อมูลได้
  • Why Write Code?
          เพราะการสร้างข้อมูลด้วยมืออาจช้าและไม่สะดวก หรือแม้แต่ความผิดผลาดในเรื่องของความแม่นยำ จึงต้องใช้ความสามารถของระบบคอมพิวเตอร์เข้ามาช่วยจัดการกับข้อมูลที่มีมากมายมหาศาล ซึ่งคนจะมีหน้ามีสร้างกระบวนการคำนวณและออกแบบระบบด้วยซอฟต์แวร์
  • Why Interactive?
          เพราะการสร้างข้อมูลที่มีความยืดหยุ่น หรือมีลูกเล่นสามารถเป็นสื่อที่ดีสำหรับการมีส่วนร่วมของผู้ชมที่อาจจะไม่เกี่ยวข้องหรือเป็นผู้ที่ดูแลข้อมูลนั้นๆอยู่
  • Why on the Web?
          เพราะต้องการการหลีกเลี่ยงการติดตั้งซอฟต์แวร์ลงบนอุปกรณ์ และสามารถทำงานได้บนอุปกรณ์ที่แตกกต่างกัน
          

Chapter 2 : Introducing D3

    บทที่ 2 นี้ จะเป็นการแนะนำคุณสมบัติของ D3 ว่าคืออะไร

    D3 หรือ d3.js เป็นไลบรารี่ของ JavaScript สำหรับสร้าง Data Visualization โดย D3 นั้นย่อมาจากคำว่า Data-Driven Document โดยแต่ละคำให้ความหมายดังนี้

  • Data หมายถึง ข้อมูลที่จะนำไปแสดงผล
  • Driven หมายถึง การเชื่อมต่อกันระหว่างข้อมูลที่ต้องการใช่แสดงผลกับ Document
  • Document หมายถึง สิ่งใดๆที่สามารถนำไปเรียบเรียงหรือแสดงผลบน web browser ได้ อย่างเช่น HTML และ SVG

    คุณสมบัติ

  • Loading data ไปยัง web browser
  • Binding data(ซ่อนข้อมูล) เป็น element(องค์ประกอบ) ใน document และสร้าง element ใหม่ได้ตามต้องการ
  • Transform elements โดยการตีความและการตั้งค่าคุณสมบัติต่างๆ
  • Transitioning elements ไปตาม input ที่ผู้ใช้กำหนด

    สิ่งที่ D3 ไม่สามารถทำได้

  • D3 ไม่สามารถสร้างการแสดงผลข้อมูลที่ไม่มีอยู่หรือทำนายข้อมูลออกมาแสดงผล
  • D3 ไม่รองรับ web browser ที่เก่าๆได้
  • D3 ไม่สามารถจัดการกับแต่ละ pixel ของ bit map แต่จะจัดการในรูปแบบของ vector ที่ใช้การคำนวณทางคณิตศาสตร์
  • D3 ไม่ได้ซ่อนข้อมูลเพราะ D3 ทำงานอยู่ในฝั่ง client อยู่แล้ว




Chapter 3 : Technology Fundamentals


     ในบทนี้จะกล่าวถึงการใช้งานเบื้องต้นที่จำเป็นจะต้องมีก่อนการใช้งาน D3 โดยจะเริ่มตั้งแต่การใช้ HTML ไปจนถึง CSS

การใช้งาน HTML
      ในเนื้อหานี้จะมีการแนะนำถึงโครงสร้างของ HTML ว่ามีลักษณะเป็นอย่างไร และการลักษณะการจัดเรี่ยงข้อความให้สวยงามจะต้องใช้  tags อะไรบ้าง

องค์ประกอบในการเขียน HTML

 <!DOCTYPE html>
    เป็นการประกาศประเภทของเอกสาร มักจะอยู่ส่วนบนสุด

html
    จะต้องปิดล้อมโค้ด HTML ในเอกสาร

head
    เป็นส่วนที่ใช้ประกาศส่วนหัวข้อใหญ่ที่เกี่ยวข้องกับเอกสาร
 
title
    หัวข้อย่อยของเอกสาร

body
     ส่วนอื่นๆของเอกสารจะต้องอยู่ภายใน body

h1, h2, h3, h4
    ใช้ประกาศส่วนหัวข้ออื่นๆ

p
    ประกาศส่วนที่เป็น paragraph

ul, ol, li
    list ข้อย่อยต่างๆเป็น จุดหรือตัวเลข

em
    ใช้กำหนดตัวอักษรเอียง


โค้ดตัวอย่าง

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Amazing Visualization Tool Cures All Ills</h1>
<p>A new open-source tool designed for visualization of data turns out to havean unexpected, positive side effect: it heals any ailments of the viewer.Leading scientists report that the tool, called D3000, can cure even thefollowing symptoms:</p>
<ul>
<li>fevers</li>
<li>chills</li>
<li>general malaise</li>
</ul>
<p>It achieves this end with a patented, three-step process.</p>
<ol>
<li>Load in data.</li>
<li>Generate a visual representation.</li>
<li>Activate magic healing function.</li>
</ol>
</body>
<html>


ผลที่ได้



การใช้งาน CSS ร่วมกับ HTML
    ในเนื่อหาส่วนนี้ได้มีการสอนการใช้งาน CSS เบื้องต้นร่วมกับ HTML เพื่อใช้ในการตกแต่งตัวอักษร

 โค้ดตัวอย่างการฝัง CSS บน  HTML

 <html>
    <head>
        <style type="text/css">
            p {

                   font-size: 24px;
                   font-weight: bold;
                   background-color: red;
                   color: white;
            }
        </style>
    </head>
    <body>
        <p>If I were to ask you, as a mere paragraph, would you say that I
have style?</p>
    </body>
</html>

 ผลที่ได้




Chapter 4 : Setup

    บทที่ 4 เป็นการเริ่มต้นการใช้งน d3 .js โดย D3 จะต้องมีการ import library เข้ามาในการใช้งาน ซึ่งสามารถเรียกได้ 2 วิธี คือ
  1. เรียกผ่านทาง link ได้เลย โดยการเรียกใช้ ผ่าน tag ดังต่อไปนี้ในไฟล์ html
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  2. เรียกโดยไฟล์ ซึ่งจะต้องสร้าง directory มา เช่น Project_D3 และสร้าง directory ย่อยใช้ชื่อว่า d3 จากนั้นให้ download ไฟล์ D3 เป็น zip ไฟล์มา directory ย่อยที่สร้างขึ้น และแตกไฟล์ เมื่อประกาศใช้ library d3 จะต้องใช้ tags  <script type="text/javascript" src="d3/d3.v3.js"></script>
    ในโฟลเดอร์จะมีโครงสร้างดังนี้


           project-folder/
                  d3/
                      d3.v3.js
                      d3.v3.min.js (optional)
                   index.html
         
 โค้ดตัวอย่างใน index.html

<!DOCTYPE html>
<html lang="en">
        <head>
              <meta charset="utf-8">
              <title>D3 Page Template</title>
              <script type="text/javascript" src="d3/d3.v3.js"></script>
        </head>
        <body>
              <script type="text/javascript">
              // Your beautiful D3 code will go here
              </script>
         </body>
</html>

Chapter 5 : Data

    สำหรับบทที่ 5 นี้เป็นการนำข้อมูลมาแสดงผลบนเว็บ browser โดยการเรียกผ่าน method ที่สามารถเรียกได้จาก library ของ D3 

โค้ดตัวอย่าง

<html lang="en">
        <head>
              <meta charset="utf-8">
              <title>D3 Page Template</title>
              <script type="text/javascript" src="d3/d3.v3.js"></script>
        </head>
        <body>
              <script type="text/javascript">
                    var dataset = [ 5, 10, 15, 20, 25 ];
                    d3.select("body").selectAll("p")
                    .data(dataset)
                    .enter()
                    .append("p")
                    .text(function(d) { // <-- Note tender embrace at left
                          return "I can count up to " + d;
                     });
             </script>
         </body>
</html>

ผลที่ได้



เขียนโดย ที่ ไม่มีความคิดเห็น:

1 กุมภาพันธ์ 2558

Exercise3 - Try more web-based tools

    Exercise 3 เป็นการทดลองใช้ Web-based Tools สำหรับการแสดงผลข้อมูล โดยการนำข้อมูลจากการทดสอบใน Exercise ที่ 1 และ 2 มาใช้ เพื่อดูการแสดงผล และวิธีการใช้งานของ Web-based Tools ที่เลือกใช้งาน ซึ่งใน exercise ที่ 3 นี้ได้เลือก AMCHARTS มาทดลองใช้

AMCHARTS


     AMCHARTS เป็นเครื่องมือที่ใช้ในการสร้างแผนภูมิขั้นสูงโดยใช้ Javascript ซึ่งเหมาะสมกับการแสดงข้อมูลใดๆ ทั้งรูปแบบของกราฟหรือชาร์ต แผนที่ และอื่นๆอีก โดยแบ่งออกเป็นโปรดักซ์หลัก 3 โปรดักซ์ ได้แก่ JavaScript CHARTS, JavaScript STOCK CHART, และ Interactive JavaScript MAPS ซึ่งผู้ใช้จะต้องทำการ Download ซอฟต์แวร์และติดตั้งบนเครื่องสำหรับการใช้งาน

    แต่ถ้าหากผู้ใช้ไม่ต้องการที่จะ Download และติดตั้ง Software ลงบนเครื่องคอมพิวเตอร์ ทาง AMCHARTS ก็มีอีกทางเลือกหนึ่งที่จะให้ความสะดวกกับผู้ใช้งาน คือ การใช้งาน Live Editor ซึ่งจะต้องใช้งานบนเว็บบราวเซอร์และมีการเชื่อมต่ออินเตอร์เน็ต


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

  • ผู้ใช้สามารถเลือกรูปแบบการแสดงผลข้อมูลได้ที่หน้าเว็บไซต์ได้เลย หรือจะเลือก Make a Chart โดยในการทดลองนี้ได้เลือก Make a CHART

รูปที่ 1 : เป็นลักษณะของ AMCHARTS LIVE EDITOR


  • เมื่อเลือก Make a CHART แล้วจะปรากฏรูปแบบของการแสดงข้อมูลต่างๆ และรายละเอียดมากกว่าที่ปรากฏอยู่ในหน้าเว็บไซต์

 

รูปที่ 2 : แสดงรูปแบบของการแสดงของมูล


  • เมื่อเลือกรูปแบบการแสดงผลได้แล้ว ส่วนถัดมาคือส่วนที่ใช้ในการจัดรูปแบบ และรายละเอียดต่างๆ อย่างข้อมูลที่จะใช้ในการแสดงผล เปลี่ยนสี ขนาด และรายละเอียดอื่นๆ


รูปที่ 3 : ส่วนของการจัดการรูปแบบการนำข้อมูลมาแสดงผล


  • การเพิ่มข้อมูลลงใน editor ซึ่งสามารถ import file *.csv เข้ามาได้ และปรากฏเป็นตารางดังรูปที่ 4


รูปที่ 4: ตารางข้อมูลที่ต้องการมาแสดงผล



  • หลังจากที่เพิ่มข้อมูลลงใน editor เรียบร้อยก็สามารถปรับแต่ง Pie Chart ตามที่ต้องการ


รูปที่ 5 : แสดงการปรับแต่ง Pie Chart ตามที่ต้องการ



ผลการทดลอง


pie | amCharts


More Structure

  • Funnel Chart
         - เป็นแผนภาพที่มีลักษณะคล้ายกับกรวย ส่วนมากจะใช้ในการแสดงขั้นตอนต่างๆของกระบวนการขาย และจำนวนเงินของรายได้แต่ละขั้นตอน แต่การทดลองนี้ได้นำข้อมูลเดียวกับที่ใช้ในสร้าง Pie Chart มาสร้างเป็น Funnel Chart


  • Pyramid










เขียนโดย ที่ ไม่มีความคิดเห็น:

27 มกราคม 2558

Exercise2 - Use web-based tool

    Exercise ที่ 2 เป็นการทดลองและเปรียบเทียบเครื่องมือที่ใช้สร้าง Graph และ Chart โดยใช้ข้อมูลง่ายๆ ซึ่งในที่นี้ได้ใช้นำข้อมูลการใช้เวลาใน 1 วัน หรือ 24 ชั่วโมง เช่นเดียวกับ Exercise 1 มาเป็นข้อมูลที่จะมาแสดง ซึ่งโจทย์กำหนดให้ใช้เครื่องมือดังนี้


  • Web-base Tools
  • Google Charts
  • Other Tools

 
รูปที่ 1 : ตารางข้อมูลที่นำมาใช้แสดง

Web-based Tools

    Web-based Tools  หมายถึง เครื่องมือที่มีการทำงานผ่านทาง Web browser อย่าง Internet Explorer, Chrome, Firefox และอื่นๆ ซึ่งต้องอาศัยการเชื่อมต่อทางอินเตอร์เน็ตในการใช้งาน
    โดย web-based tools ที่ใช้ในการสร้าง Chart และ กราฟมีหลากหลาย web site ให้เลือกใช้งาน เช่น Datawrapper , RAW , Many eyes และ Plotly เป็นต้น ซึ่งในการทดสอบนี้ ได้เลือก RAW มาใช้งาน

    RAW

 
รูปที่ 2 : แสดงหน้า homepage ของ RAW web-based

     เป็นเครื่องมือที่ใช้ในการจัดการข้อมูลที่ต้องการจะนำมาแสดงผล โดยเป็นการเชื่อมโยงกันระหว่าง spreadsheets และ vector graphics

    * vector graphics เป็นการนำข้อมูลมาประมวลผลผ่านชุดคำสั่งทางคณิตศาสตร์ เพื่อสร้างภาพดิจิตอล 2 หรือ 3 มิติ


รูปที่ 3 : แสดงหน้า Features ของ Raw web-based


รูปที่ 4 : เป็นส่วนในการเพิ่มข้อมูลที่ต้องการนำไปแสดงผล



รูปที่ 5 : แสดงการ upload ไฟล์ *.csv ลงใน RAW



รูปที่ 6 : ข้อมูลที่ต้องการแสดงผล



รูปที่ 7 : การแสดงผลข้อมูลแบบต่างๆ



รูปที่ 8 : การจัดการรูปข้อมูลที่จะใช้ในการแสดงผล



รูปที่ 9 : การแสดงผลข้อมูลที่ได้จาก RAW

Google Charts

    Google charts เป็นเครื่องมือในการสร้าง graph หรือ charts โดยการให้บริการของ Google ที่ใช้งานได้พรี พัฒนาจาก JavaScript สามารถสร้างการแสดงผลข้อมูลออกมาได้หลากหลายรูปแบบ ทั้ง Bar Charts , Pie Chart ,Histograms และอื่นๆอีกมากมาย พร้อมทั้งคำแนะนำการใช้งานและตัวอย่าง

ตัวอย่างโค้ดที่ใช้ในการสร้าง Pie Chart 3D ของ Google Charts


<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Working',     5],
          ['Sleeping',      8],
          ['Surfing',  3],
          ['Watching TV', 2],
          ['Reading',    0.25],
          ['Relaxing',   2.5],
          ['Other',    3.25]
        ]);

         var options = {
          title: 'Time Usage',
          is3D: true,
        };

         var chart = new google.visualization.PieChart(document.getElementById

 ('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

รูปที่ 10 : Pie Chart ที่ได้จากการใช้ Google chart API



 

Other Tools


        ในการนำข้อมูลมาแสดงผลเป็น graph หรือ chart นั้นยังมีเครื่องมือื่นๆให้เลือกใช้อีกมากมาย ซึ่งในที่นี้ได้เลือกเครื่องมือที่มีชื่อว่า jschart เป็นเครื่องมือที่มีทั้งเป็นโปรแกรมให้ Download และ ติดตั้งบนเครื่องคอมพิวเตอร์ และ ใช้งาน Online ผ่าน web browser

    JScharts
 
 
รูปที่ 11 : หน้าเว็บไซต์ส่วนที่ให้ผู้ใช้เลือกรูปแบบการแสดงข้อมูล



รูปที่ 12 : ส่วนที่เป็น Editor ของ JScharts Online



รูปที่ 13 : แสดงการใส่ข้อมูลที่ต้องการแสดงผล




รูปที่ 14 : Pie Chart ที่ได้จากการใช้ JSchart Online







Reference:

     WEB-BASE อนาคตใหม่ในการใช้งานโปรแกรม
     Vector graphics คืออะไร










เขียนโดย ที่ ไม่มีความคิดเห็น:

18 มกราคม 2558

Exercise1 - Chart & Graph Generator | Tool

    ใน Exercise 1 จะเป็นการทดลองและเปรียบเทียบเครื่องมือที่ใช้สร้าง Graph และ Chart โดยใช้ข้อมูลง่ายๆ ซึ่งในที่นี้ได้ใช้นำข้อมูลการใช้เวลาใน 1 วัน หรือ 24 ชั่วโมง มาเป็นข้อมูลที่จะมาแสดง ซึ่งโจทย์กำหนดให้ใช้เครื่องมือดังนี้

    - Spreed Sheet
    - Processing.js
    - เครื่องมืออื่นๆ
ตารางข้อมูลที่นำมาใช้

รูปที่ 1.1 ตารางการใช้เวลาใน 1 วัน




Spreed Sheet


    spreed sheet เป็นโปรแกรมที่ใช้ในการคำนวณ ซึ่งใช้ได้ทั้งข้อมูลที่เป็นตัวเลข และตัวอักษร สามารถหาผลลัพธ์ได้ในลักษณะของ column หรือ row โดยใช้การ บวก ลบ คูณ หาร เพื่อให้ได้ค่าออกมา นอกจากการคำนวณแล้ว ยังสามารถนำข้อมูลไปแสดงผลในรูปแบบของตารางและกราฟได้ 
    สำหรับการทดลองเครื่องมือในกลุ่มของ Spreed Sheet นั้น ได้เลือก Microsoft Excel มาทดลอง เพราะเป็นเครื่องมือเบื้องต้นที่มีอยู่ในแทบทุกเครื่องที่ใช้ระบบปฏิบัติการ Windows

    Microsoft Excel


1.2 ลักษณะของโปรแกรม Microsoft Excel

คุณสมบัติของ Microsoft Excel

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




การทดลองใช้ Microsoft Excel โดยใช้ข้อมูลในรูปที่ 1.1


รูปที่ 1.3 ลักษณะของโปรแกรม Excel

    ในรูปที่ 1.3 เป็นการป้อนข้อมูลลงในตารางของ Microsoft Excel โดยจะแบ่งออกเป็น 2 column ได้แก่ Activity และ Time Usage มีหน่วยเป็น hr หรือ ชั่วโมง 
    ส่วนของ Activity จะเป็นกิจกรรมคร่าวๆใน หนึ่งวัน ได้แก่ การนอน อ่านหนังสือ เล่นอินเตอร์เน็ต ดูทีวี ผ่อนคลาย และกิจกรรมอื่นๆ 
     อีก column หนึ่ง คือ Time Usage จะเป็นส่วน ที่ใช้แสดงระยะเวลาที่ใช้ในแต่ละกิจกรรมนั้นๆ ซึ่งเมื่อนำมารวมกันแล้วต้องได้ 24 ชั่วโมง จึงได้นำ ชั่วโมงที่ใช้ไปมาบวกกันด้วยวิธีเบื้องต้นของ Microsoft Excel โดยการใช้สูตร =SUM(B2:B8) หมายถึงการนำข้อมูลในเซลล์ B2 ถึง B8 มาบวกกัน หรือ คลิ๊กเซลล์ใน colum ที่ต้องการบวก แล้วเลือกผลรวมอัตโนมัติใน แถบเครื่องมือ


1.4 นำข้อมูลที่ป้อนในตารางไปสร้าง Bar Graph 

    รูปที่ 1.4 แสดงกราฟที่ได้จากข้อมูลที่ป้อนลงในตาราง excel ซึ่งสามารถตบแต่งสีสัน และการแสดงข้อมูลได้ โดยเลือกจากแถบเครื่องมือที่มีให้ใน excel


1.5 นำข้อมูลที่ป้อนในตารางไปสร้างเป็น chart

    รูปที่ 1.5 แสดง chart ที่ได้จากข้อมูลเดิม ซึ่งเป็นอีกรูปแบบหนึ่งในการแสดงข้อมูลของ Microsoft Excel


    จากการทดลองใช้ Microsoft Excel พบว่าเป็นโปรแกรมที่ใช้งานง่าย และมีคุณสมบัติเหมาะกับการนำไปใช้ในการแสดงผลข้อมูล ซึ่งจะต้องเลือกให้เหมาะสมกับข้อมูลที่มี เพื่อให้ง่ายต่อการทำความเข้าใจและการนำไปใช้งานต่อ  อีกทั้งยังมีรูปแบบของ graph และ chart ต่างๆให้เลือกมากมาย ซึ่งจะช่วยประหยัดเวลาและการนำเสนอข้อมูลที่ดูสวยงาม



Processing.js





ตัวอย่างโค้ดที่นำมาใช้


size(200, 200);

 background(100);

 smooth();

 strokeWeight(1);

int diameter = 150;

 float[] angs = {120,3.75,45,30,75,37.5,48.75};

 float lastAng = 0;

for (int i=0; i<angs.length; i++){

   fill(angs[i] * 3.0);

   arc(width/2, height/2, diameter, diameter, lastAng, lastAng+radians(angs[i]));

   lastAng += radians(angs[i]);  

 }




Infogram


    Infogr.am หรือ Infogram เป็นเว็บแอปพลิเคชั่นที่ช่วยในการแสดงข้อมูล(Data Visualization) ด้วย infographic และ chart ซึ่งองค์กรที่จัดทำ Infogram นั้นได้รับรางวัลต่างๆมากมายในช่วงเวลาสั้นๆ

คุณสมบัติของ Infogram

    1. มีความรวดเร็วในการใช้งาน
    2. สามารถแบ่งปันข้อมูลที่จัดทำออกมาเป็นรูปแบบต่างๆ ผ่านโซเชียล
    3. การแสดงข้อมูลที่ได้มานั้นง่ายต่าความเข้าใจ
    4. สามารถใช้งานได้ทั้งบน PC และสมาร์ทโฟน
    5. รองรับผู้ใช้ในกลุ่มธุรกิจขนาดเล็กไปจนถึงระดับองค์กรสื่อ


การทดลองใช้ Infogram โดยใช้ข้อมูลในรูปที่ 1.1


   
    การเข้าใช้งาน Infogram จะต้องเลือกรูปแบบการใช้งานให้เหมาะสม ดังแสดงในรูป สำหรับการทดลองในที่นี้ใช้จะเลือกการใช้งานในระดับเบสิค ซึ่งมี feature ดังนี้
    - มีรูปแบบแสดงผลให้เลือกกว่า 30 แบบ
    - ง่ายต่อการแก้ไขข้อมูล
    - สามารถ import ไฟล์ XLS,XLSX และ CSV
    - เผยแพร่ข้อมูลออนไลน์ได้

   โดยการใช้งานในระดับเบสิคนั้นจะไม่มีค่าใช้จ่าย แต่จะต้องมีการลงทะเบียนและเข้าสู่ระบบในการใช้งาน




    จากรูปจะเป็นส่วนที่ให้ผู้ใช้เลือกว่าจะทำอะไร หลังจาก log in โดยในที่นี้จะเห็นได้ว่ามีสามส่วนหลักๆ ได้แก่ ส่วน Create ใช้สำหรับสร้าง chart, graph หรือแม้กระทั่ง map, ส่วนที่สอง My Library เป็นส่วนที่บันทึกผลงานที่เราสร้างขึ้น และส่วนที่สาม คือ Update to Pro ซึ่งจะมีไว้ให้ผู้ใช้อัปเดทระดับการใช้งาน





    หลังจากที่เลือก Create ทาง Infogram จะมี theme หรือรูปแบบให้เลือกมากมาย ทำให้สะดวกและไม่ต้องออกแบบเอง





    เมื่อเลือก theme ได้แล้วลักษณะเบื้องต้นจะเป็นดังรูป ซึ่งในส่วนหัวข้อสามารถที่จะแก้ใขให้ได้ข้อความตามที่ต้องการ





    ขั้นตอนต่อมาคือการเพิ่มข้อมูลลงไป เพื่อสร้าง Graph ขึ้นมา ในที่นี้เลือกการแสดงข้อมูลในรูปแบบของ Bar Chart จะเห็นได้ว่าในการเพิ่มข้อมูลจะมีตารางให้คล้ายกับ Microsoft Excel




        จากรูป เป็นการแสดงผลข้อมูลในรูปแบบของ Bar Chart




    หากต้องการจะเพิ่มการแสดงผลข้อมูลในรูปแบบอื่นๆอีก ก็สามารถเลือกได้จากแถบเครื่องมือในด้านขวามือ ซึ่งมีให้เลือกหลากหลายรูปแบบ



     ในรูป การแสดงผลข้อมูลในลักษณะของ Bar Chart



     จากการทดลองใช้ Infogram จะเห็นได้ว่า Infogram สามารถนำข้อมูลไปแสดงผลได้ค่อยข้างสะดวกและรวดเร็ว อีกทั้งยังมีรูปแบบที่สวยงามทันสมัย แต่มีข้อจำกัดทางด้านการคำนวณ และการแสดงข้อมูลที่อาจจะไม่ได้บอกถึงจำนวนที่แน่ชัด อย่างในรูปแบบของ Chart ที่ไม่ได้แสดงผลเป็นตัวเลขเป็น % จึงอาจทำให้นำข้อมูลไปใช้ไม่ได้ 




















เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: บทความ (Atom)