assignment-2

Assignment II - สุขภาพจิตของคุณน่าเป็นห่วงแค่ไหน?

สามารถติดตามได้ที่  ::  http://v53-63257.blogspot.com/2015/05/assignment-2.html

TEST2

หมายเหตุ :: เนื่องจากในชั่วโมงสอบไม่่สามารถทำการเทส chart ได้ จึงได้ทำการแก้ไขเพิ่มเติ่มในบ้างส่วนและแนบ commit มาให้อาจารย์อีกครั้ง

commit-1 : f77bab8c43f5b5170d0abc3248b1f4e814a9b4d8

commit-2 : fd0de3aeae511fafbca1d4e6c25fd1f5705c5434 (เผลอกด revert)

commit-3 : 8811f47406be29c8798e59bd8b29fb0a9ff1d607

commit-4 : dc3778926f9cb436381410b8bfebad20bf86d1da

commit-5 : e8444849c20acd42371a484a23e39ac6cf4b9f67

link : https://github.com/thanaporntepkila/test5311563117

เรื่องปัญหาของนักศึกษาเกี่ยวกับยาเสพติด

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

สิ่งที่จะโชว์ :

ต้องการแสดงจำนวนผู้ติดยาที่มีเพิ่มขึ้นอย่างต่อเนื่องของนักศึกษา

ต้องการโชว์สาเหตุหลักๆว่ามีอะไรบ้างที่เป็นสาเหตุให้นักศึกษาติดยาเสพติด (ยังไม่ทำ)

ต้องการโชว์ว่ายาเสพติดประเภทไหนบ้างที่นักศึกษาเลือกเสพเป็นส่วนใหญ่

ต้องการแสดงให้เห็นจำนวนนักศึกษาที่เรียนไม่จบหรือโดนไล่ออกนื่องด้วยการติดยา (ยังไม่ทำ)

รูปแบบ :

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

แสดงข้อมูลของยาเสพติดที่่นักศึกษาเลือกเสพเป็นส่วนใหญ่ : แสดงเป็น pie chart เพื่อแสดงให้เห็นเปอร์เซ็นของสารเสพติดที่เป็นที่นิยม เพื่อที่จะได้มีการรณรงค์ได้ถูกทาง

แสดงกราฟจำนวนนักศึกษาที่ติดยาตั้งแต่ปี 2550-2557 ( หน่วยต่อ 10,000 คน)

แสดงกราฟเปอร์เซ็นของประเภทยาเสพติดที่นักศึกษาเสพ

Assignment 1

สภาวะขยะล้นเมือง

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

1. เป็นแหล่งเพาะพันธุ์แมลง และพาหะของโรค 

2. เป็นบ่อเกิดของโรค 

3. สูญเสียทางเศรษฐกิจ 

4. อาจทำให้เกิดไฟไหม้ 

5. ทำลายสภาพแวดล้อม

รวบรวมของมูลจาก:กรมควบคุมมลพิษ http://www.pcd.go.th/info_serv/waste_wastethai48_53.html

กราฟแสดงปริมาณขยะตั้งแต่ปี พ.ศ. 2546 - 2554

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

                     กราฟแสดงสัดส่วนของขยะมูลฝอยที่ตกค้างต่อปี

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

                    กราฟแสดงสัดส่วนการนำขยะมูลฝอยกลับมาใช้

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

                                  กราฟแสดงปริมาณขยะมูลฝอย
                           และขยะอันตรายตั้งแต่ปี พ.ศ. 2546 - 2554

          กราฟแสดงปริมาณขยะอันตรายตั้งแต่ปี พ.ศ. 2546 - 2554

กราฟแสดงแนวโน้มของขยะอันตรายตั้งแต่ปี พ.ศ. 2546 - 2554

                    สีส้ม : แสดงปริมาณขยะอะนตรายจากโรงงานอุตสาหกรรม

                    สีฟ้า : แสดงปริมาณขยะอะนตรายจากแหล่งชุมชน

Data Visualization Week 3 :: Other Chart

 Streamgraph

           Streamgraph เป็นกราฟรูปร่างหน้าตาแปลกๆ ที่แสดงข้อมูลในรูปแบบของพื้นที่กราฟในช่วงเวลาต่างๆ โดยส่วนใหญ่ข้อมูลที่นำมาแสดงในรูปแบบของ Streamgraph นั้นจะแสดงให้เห็นถึงส่วนประกอบของข้อมูลๆหนึ่ง ในเวลานั้นๆว่ามีส่วนประกอบใดมากน้อยเพียงใดโดยสามารถประมาณค่าได้ด้วยสายตา ซึ่ง Streamgraph จะมีประโยชน์อย่างมากเมื่อข้อมูลที่จะนำมาสร้าง Chart นั้นมีส่วนประกอบของข้อมูลจำนวนมาก  ทำให้ยากต่ออ่านค่าและเปรียบเทียบค่าเมื่อนำไปสร้าง Chart ประเภทอื่นๆ

            ตัวอย่างเช่น  ยอดข้อมูลการรีวิวสินค้าและบริษัทต่างๆในเว็บบล็อกทั้งหมด 8 เว็บตั้งแต่ ปี ค.ศ. 2006 - 2008  ซึ่งจากรูปกราฟข้างล่างจะเห็นว่าเมื่อเรานำข้อมูลทั้งหมดมาสร้างกราฟแบบ Line Chart แล้วนั้นกราฟที่ได้ค่อนข้างจะอ่านยาก  และการเปรียบเทียบค่าในแต่ละช่วงเวลาก็เป็นไปได้ยากเช่นกัน

แสดงข้อมูล TechCrunch 8 name ในรูปของ Line Chart

             หลังจากนำข้อมูลที่ได้ไปสร้าง Chart แบบ Streamgraph จะเห็นได้ว่าเราสามารถเปรียบเทียบข้อมูลในช่วงเวลาต่างๆได้แล้วจากการดูพื้นที่กราฟในช่วงเวลานั้นๆ ตัวอย่างเช่น ข้อมูลในช่วงปี ค.ศ. 2007 นั้นการรีวิวสินค้าใน facebook เป็นที่นิยมมากขึ้นอย่างรวดเร็วจนแทบจะมียอดรีวิวเทียบเท่ากับ google เลยทีเดียว

แสดงข้อมูล TechCrunch 8 name ในรูปของ Streamgraph 

ที่มา :: http://www.neoformix.com/2008/TechCrunchAnalysis.html

ที่มา ::  http://en.wikipedia.org/wiki/Streamgraph

 Web - based tool :: Create A Graph

         

        เว็บที่นำเสนอในครั้งนี้คือ   Create A Grap ( http://nces.ed.gov/nceskids/createagraph/default.aspx?ID=301921444d294b6791dea84d526e7afa )

หน้าเว็บ

เลือกกราฟที่ต้องการสร้าง

ใส่ข้อมูล

ดูตัวอย่างกราฟที่สร้าง

Save

กราฟที่ได้ 

Data Visualization Week 2 :: web-based tool & google chart

Data Visualization Week 2

          ข้อมูลที่นำมาใช้ในการทดลองในครั้งนี้นั้นเป็นข้อมูลของ อัตราผู้ป่วยโรคสำคัญต่อหนึ่งแสนคน  ในปี ค.ศ.2012  และ ปี ค.ศ.2013 

Use google chart

          เป็นการเขียนโค้ดเพื่อสร้าง chart โดยการใช้ script ของทาง google chart ซึ่งทางเว็บนั้นได้มีโค้ดตัวอย่างไว้ให้สำหรับผู้เริ่มใช้ได้ทดลองกันด้วย ดังตัวอย่างการสร้างกราฟแท่งในครั้งนี้ได้มีการนำโค้ดของทาง google chart  มาประยุกต์ใช้ (https://developers.google.com/chart/interactive/docs/quick_start) ซึ่งทางเว็บได้แนะนำมาว่าหากผู้ใช้ต้องการสร้างสร้าง Pie chart ให้เรียกใช้ด้วยคำสั่ง google.visualization.PieChart แต่หากต้องการสร้าง Bar chart ให้เรียกใช้ด้วยคำสั่ง google.visualization.BarChart แทน

CODE ที่ใช้ในการสร้างกราฟ

ผลที่ได้จากการทดลอง

Use web-based tool

   plot.ly : http://plot.ly/

             ในส่วนของ plot.ly นั้นผู้ใช้ต้องทำการสมัครสมาชิกก่อนจึงจะสามารถเข้าใช้งานได้
             ขั้นตอนที่ 1 ทำการ add ข้อมูลลงในตาราง  กำหนดว่าข้อมูลชุดไหนอยู่แนวแกน X, แกน Y  รวมทั้งกำหนดรูปแบบของ chart ที่ต้องการใช้ในการแสดงข้อมูล เช่น Bar chart , Pie chart เป็นต้น

             ขั้นตอนที่  2 กำหนดสีกำหนดรูปแบบของการฟ

             ขั้นตอนที่  3 เมื่อได้กราฟตามความต้องการแล้วผู้ใช้สามารถ Export ออกไปใช้งานได้เลย

ภาพแสดงกราฟที่ได้จากการทดลอง

   Datawrapper : https://datawrapper.de/

            ในส่วนของ Datawrapper นั้นจะมีขั้นตอนการสร้าง chart ง่ายๆอยู่ 4 ขึ้นตอน

            ขั้นตอนที่ 1 ทำการ add ข้อมูล ซึ่งในที่นี้ผู้ใช้สามารถใส่ข้องมูลเป็นแบบ text  หรือแบบ CSV file ก็ได้

            ขั้นตอนที่ 2 ตรวจสอบข้อมูลว่าถูกต้องหรือไม่  อีกทั้งยังสามารถกำหนดข้อมูลต่างๆ อย่างเช่นหน่วยของตัวเลขได้อีกด้วย

            ขั้นตอนที่ 3 ทำการเลือกรูปแบบกราฟที่ต้องการ  ซึ่งผู้ใช้สามารปรับแต่งรูปแบบของ chart ได้

     

ภาพแสดงกราฟที่ได้จากการทดลอง

            ขั้นตอนที่ 4 เป็นขั้นตอนของการ Publish & Embed ซึ่งในบางกรณีนั้นจะต้องทำการอัพเกรดก่อน (เสียค่าบริการ)

   Raw : http://raw.densitydesign.org/
            Raw เป็น web based ตัวหนึ่งที่ผู้ใช้สามารถลองเล่นได้โดยไม่ต้องสมัครสมาชิกให้ยุ่งยาก  ซึ่งขั้นตอนในการใช้นั้นก็ไม่ได้ต่างจาก web based ตัวอื่นๆเท่าใดนัก

            เริ่มแรกจากการใส่ข้อมูลลงไป

            จากนั้นก็ทำการเลือกรูปแบบ chart ตามแบบที่ผู้ใช้ต้องการ

             จัดการข้อมูลตามรูปแบบที่ผู้ใช้ต้องการให้แสดงผลบนกราฟ

            ทำการปรับขนาด ปรับสี ของ chart

            chart ที่ได้จากการทดลอง

            สามารถนำ chart ที่ได้ออกไปใช้ในรูปแบบของ Embed code ได้

   Many eyes : http://ibm.com/software/analytics/manyeyes             การสร้างกราฟใน web based ของ Many eyes นั้นสามารถทำได้ภายในสามขั้นตอนเท่านั้น  นั่นคือ  ใส่ข้อมูลสำหรับสร้าง chart => เลือกรูปแบบและปรับเปลี่ยน chart ตามที่ต้องการ => share!

       ขั้นตอนที่ 1  ผู้ใช้ต้องทำการ add ข้อมูลลงไป  เมื่อทำการใส่ข้อมูลเรียบร้อยแล้วทางเว็บจะมีการแสดงข้อมูลให้เราดูแบบเป็นตารางอีกด้วยซึ่งนั่นจะทำให้ผู้ใช้สามารถตรวจสอบข้อมูลได้ง่ายขึ้น

รูปภาพแสดง :  ขั้นตอนการ add ข้อมูล

       ขั้นตอนที่ 2  เป็นการเลือกรูปแบบของ chart ที่ผู้ใช่ต้องการ  ซึ่งทางเว็บก็มีหลากหลายรูปแบบให้เลือกใช้ 

รูปภาพแสดง :  chart รูปแบบต่างๆที่ทางเว็บมีให้ผู้ใช้ได้เลือก

         ขั้นตอนที่ 3  ทำการ share กราฟที่สร้างได้เพื่อให้เพื่อนคนอื่นๆของคุณได้เห็น

  รูปภาพแสดง :  ขั้นตอนการ share ซึ่งเป็นขั้นตอนสุดท้าย

รูปภาพแสดง :  กราฟที่สร้างได้จาก web based ของ Many eyes 

ที่มา
1. http://social.nesdb.go.th/SocialStat/StatReport_Final.aspx?reportid=226&template=2R1C&yeartype=M&subcatid=17

Data Visualization Week 1

Data Visualization Week 1

        ข้อมูลที่นำมาใช้ในการทดลองในครั้งนี้นั้นเป็นข้อมูลของประเทศที่มีนักท่องเที่ยวมากที่สุด 10 อันดับ ในปี ค.ศ.2012  และ ปี ค.ศ.2013 ซึ่งข้อมูลที่ได้จากการประมวลผลนี้อาจจะเป็นตัวช่วยให้ใครหลายๆ คนตัดสินใจเป้าหมายในการเดินทางครั้งต่อไปได้ง่ายขึ้น

ตารางแสดง 10 อันดับประเทศที่มีนักท่องเทียวมากที่สุดในปี 2013-2014

Use spreadsheet

      Spreadsheet  เป็นโปรแกรมที่มีความสามารถในการประมวลผลทางด้านการคำนวณ การวิเคราะห์ทางสถิติ และ สามารถสรุปผลออกมาในรูปแบบของตารางและกราฟต่างๆได้ เช่น กราฟแท่ง( bar charts ), กราฟวงกลม(  pie charts ), กราฟเส้น( line graph) เป็นต้น  โดยในการทดลองครั้งนี้ได้เลือกใช้โปรแกรม  Microsoft Excel 2007 ในการทดลอง

       ผลที่ได้จากการทดลอง

Chart แสดง 10 อันดับประเทศยอดนิยมของนักท่องเที่ยว

Chart แสดงเปอร์เซ็นความเปลี่ยนแปลงของจำนวนนักท่องเที่ยวใน ปี 2012 และ ปี 2013

Use Processing.js

       Processing.js คือ ภาษาที่ใช้สำหรับพัฒนาโปรแกรม   ใช้ในการสร้างกราฟฟิกต่างๆ ได้ทั้งงในรูปแบบ 2 มิติ และ 3 มิติ  ตัวอย่างเช่น  กราฟแสดงข้อมูล animations เป็นต้น

        code ที่ใช้ในการทดลอง

          //ส่วนของการกำหนดตัวแปร
          String city[] = {"France", "US", "Spain", "China", "Italy", "Turkey", "German", "UK",
          "Russia", "Thai"};
          float preple_2012[] = {83,66.7,57.5,57.7,46.4,35.7,30.4,29.3,25.7,22.4};
          float preple_2013[] = {84.7,69.8,60.7,55.7,44.7,35.7,31.5,31.2,28.4,26.5};
          int ScreenWidth = 720, ScreenHeight=400;
          int Margin = 85;
void setup() {
         //กำหนดขนาด
            size(ScreenWidth,ScreenHeight);
smooth();   }

void draw() {
          //เรียกฟังชั่นวาดกราฟ
    background(255);
   textAlign(CENTER);
  Axis();
   PrintBars();
   Bars();
   }

          //ฟังชั่นสำหรับวาดเส้นกราฟและแบ่งสเกล
   void Axis(){
   textFont(createFont("Arial",12),24);   text("International Tourist Arrivals", Margin+       (ScreenWidth-(Margin*2))/2,60);
      strokeWeight(1);
   stroke(220);
   for(float x=0;x<=10;x++){
        int bars=(ScreenHeight-Margin)-int(0.57*(ScreenHeight)*(x/10));
        line(Margin,bars,ScreenWidth-Margin,bars);
   }
   strokeWeight(1);
   stroke(180);
   for(float x=0;x<=5;x++){
        int bars=(ScreenHeight-Margin)-int(0.57*(ScreenHeight)*(x/5));
        line(Margin,bars,ScreenWidth-Margin,bars);
   }
   strokeWeight(2);
   stroke(90);
   line(Margin,ScreenHeight-Margin,ScreenWidth-Margin,ScreenHeight-Margin);
   line(Margin,ScreenHeight-Margin,Margin,Margin);
   strokeWeight(1);
          }

          //plot สเกลบนกราฟทั้งแกน X (ชื่อประเทศ) และแกน Y
          void Bars(){
   for (int i=0;i<10;i++){
     stroke(90);
     fill(0x2e,0x2a,0x2a);
     textFont(createFont("Arial",12),13);
       text(city[i], Margin+30 +(i*55), ScreenHeight-Margin+20 );
   }
   fill(0x2e,0x2a,0x2a);
   for(float x=0;x<=10;x++){
      textFont(createFont("Arial",12),12);
      text(round(x*10),Margin-23,ScreenHeight-Margin-(x*22));
   }
   rotate(radians(-90));
   text("Millio",-ScreenHeight/2,Margin-45);
          }

          //วาด Bar ลงบนกราฟ
          void PrintBars(){
   for (int i=0;i<10;i++){
   fill(72 ,61, 139);
   stroke(90);
   rect(Margin+15 +(i*55), ScreenHeight-Margin-1, 15, (-preple_2012[i])*2.3+1);
   fill(135, 206, 235);
   rect(Margin+30 +(i*55), ScreenHeight-Margin-1, 15, (-preple_2013[i])*2.3+1);    }
          }

        ผลที่ได้จากการทดลอง

Chart แสดง 10 อันดับประเทศยอดนิยมของนักท่องเที่ยว จากโปรแกรม Processing.js

Infographic vs. Data Visualization

Infographic vs. Data Visualization

Infographics 

          Infographics หรือ Information Graphic  หมายถึง  การนำข้อมูล  เช่น ข้อมูลสารสนเทศ สถิติ ตัวเลข ความรู้ เป็นต้น   มาสรุปให้อยู่ในลักษณะของภาพหรือกราฟิก ดูแล้วเข้าใจง่ายในเวลาอันรวดเร็วและชัดเจน สามารถสื่อให้ผู้ชมเข้าใจความหมายของข้อมูลทั้งหมดได้

Data Visualization   

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

Reference :

http://www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2

http://www.motioninfostudio.com/%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99%E0%B8%A1%E0%B8%B2%E0%B8%81%E0%B8%81%E0%B8%A7%E0%B9%88%E0%B8%B2%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-data-visua/

http://rungrasasmee-visualization.blogspot.com/2013/03/data-visualization-infographics.html