วันพุธที่ 29 เมษายน พ.ศ. 2558

URL : Test_2

url สำหรับ test_2
วิชา Data Visualization
นาย ธนพัฒน์ สิงห์ทอง
5401012620015
https://bitbucket.org/thanapat_11/5401012620015
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันพุธที่ 25 มีนาคม พ.ศ. 2558

A1 : การซื้อหนังสือในงานสัปดาห์หนังสือแห่งชาติ และร้านปกติ

Assignment I : "การซื้อหนังสือในงานสัปดาห์หนังสือแห่งชาติ และร้านทั่วไป"

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

ข้อมูลที่ใช้

จาก สมาคมผู้จัดพิมพ์และผู้จำหน่ายหนังสือแห่งประเทศไทย(PUBAT)

# BookFair

เหตุผลที่มาเข้าชมงานสัปดาห์หนังสือ

ข้อมูลจาก : สรุปแบบสอบถามผู้ชมงาน งานมหกรรมหนังสือแห่งชาติ ครั้งที่ 18

ผู้คนที่มาเข้าชมงาน

ข้อมูลจาก : สรุปแบบสอบถามผู้ชมงาน งานมหกรรมหนังสือแห่งชาติ ครั้งที่ 19

ข้อมูลจาก : สรุปแบบสอบถามผู้ชมงาน งานมหกรรมหนังสือแห่งชาติ ครั้งที่ 19

ค่าใช้จ่ายในงานหนังสือโดยประมาณ

ข้อมูลจาก : 
  • สรุปแบบสอบถามผู้ชมงาน งานมหกรรมหนังสือแห่งชาติ ครั้งที่ 18
  • สรุปแบบสอบถามผู้ชมงาน งานมหกรรมหนังสือแห่งชาติ ครั้งที่ 19
  • สรุปแบบสอบถามผู้ชมงาน งานสัปดาห์นังสือแห่งชาติฯ ครั้ง 42

# Normal

ปกติซื้อหนังสือร้านที่ไหน ?

ข้อมูลจาก : งานวิจัย : การศึกษาพฤติกรรมการอ่านและซื้อหนังสือของคนไทย ( ตารางที่ 38 )

ซื้อบ่อยแค่ไหน ?

ข้อมูลจาก : งานวิจัย : การศึกษาพฤติกรรมการอ่านและซื้อหนังสือของคนไทย ( ตารางที่ 28 )

ค่าใช้จ่ายในการซื้อหนังสือแต่ละครั้งโดยประมาณ

ข้อมูลจาก : งานวิจัย : การศึกษาพฤติกรรมการอ่านและซื้อหนังสือของคนไทย ( ตารางที่ 31 )

การซื้อหนังสือจากร้านทั่วไป

        จากทั้งสองกราฟก่อนหน้าถ้าเราคิดเล่นๆ พิจารณาการช่วงที่สูงสุด ก็คือซื้อครั้งละประมาณ 201-500 บาท และซื้อเดินละครั้ง ในหนึ่งปี ก็จะซื้อหนังสือประมาณ 12 ครั้งใช้เงินไป ประมาณ 2400 - 6000 บาท..

การซื้อหนังสือในงานหนังสือ

        การซื้อหนังสือในงานหนังสือนั้น บางคนก็ซื้ออย่างดุเดือดเต็มรถเข็น จากตารางข้างต้นจะเห็นว่า แนวโน้วในการซื้อหนังสือในงานนั้นจะอยู่ที่ประมาณ 1000 บาทขึ้นไป ฉะนั้นถ้าไปงานทั้ง 4 ครั้ง ก็จะใช้เงินไปประมาณ 4000 บาท

Impact : 

  • จากข้อมูลดังกล่าว อาจจะไปสะกิจให้เรามีสติรู้ตัวในการจับจ่ายในงานเทศกาลหนังสือไม่ให้มากเกินความพอดีกับรายได้ของเราไป


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

วันพุธที่ 11 กุมภาพันธ์ พ.ศ. 2558

Week #4

Learning D3.js


เกี่ยวกับ D3 (Data Driven Document)

เป็น Java Script Library ที่สามารถนำข้อมุล(data) เข้ามาประมวลและแสดงผล โดยใช้ HTML, SVG และ CSS  มีความสามารถอย่างเช่น สามารถตอบสนองได้โดยตรง ต่อข้อมูลชุดนั้นๆ 

ทดสอบ_1

  • ทดลองคำสั่งงานเบื้องต้นในการวาดรุป SVG เบื้องต้น

ตัวอย่างการใช้งาน SVG ทั่วไป

ตัวอย่างการวาดวงกลมโดย SVG ทั่วไป

ตัวอย่างการใข้งาน SVG ด้วย D3.js

ตัวอย่างการวาดวงกลมโดยใช้ SVG ด้วย D3.js

ตัวอย่าง



ทดสอบ_2

  • ลองนำเอาข้อมูลมาใช้งาน
  • ทดลองการไล่สีโดยการแปลงข้อมูลจริง (domain) ไปเป็นสิ่งที่เราต้องการ (range)

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

วันอังคารที่ 3 กุมภาพันธ์ พ.ศ. 2558

Week #3


Try more web-based tools : Raphaël

ที่มารูปภาพ : ลิงก์

เกี่ยวกับ Raphael : (ราฟเพอล์)

เป็นเครื่องมือสำหรับวาด รูปร่างกราฟฟิคต่างๆ บน Web-Brower ในรูปแบบของ JavaScript Library คล้ายๆกับ Processing.js จึงง่ายต่อการนำไปประยุกค์ใช้บนเว็ปต่างๆ และก็เป็นทางเลือกอีกทางสำหรับ JavaScript Library

( ที่มา : http://raphaeljs.com/ )

การใช้งาน :

  1. เริ่มต้นต้อง Include -> Raphael.js จาก : ลิงก์ เข้ามาในไฟล์ HTML ของเรา โดยที่ไฟล์ Raphael.js ต้องอยู่ใน Folder เดียวกับ index.html ของเรา

  2.  โครงร่างของ Code ที่สำคัญๆคือ window.onload() โดยที่ทุกอย่างจะอยู่ภายในส่วนนี้ จากนั้นจะเป็นคำสั่งต่าง ซึ่งสามารถศึกษาเพิ่มเติมได้จาก Document ของ Raphael ที่ ลิงก์
    3. ( Code แสดงตัวอย่างการใช้คำสั่งวาดรุปร่างพื้นฐานโดย Raphael Library )

ศึกษาการใช้งานเบื้องต้นเพิ่มเติมได้ที่ : https://www.youtube.com/watch?v=IPy77zMsd0Y

 

 ตัวอย่าง Demo การใช้งานรูปแบบต่างๆ :

แสดงรูปแบบการใช้งานในแบบต่างๆ



 ตัวอย่างเพิ่มเติมที่ : http://raphaeljs.com/ 

ทดลองวาด Line_Chart : Raphaeljs

  • ข้อมูลการเจริญเติบโตของต้นพืช A1, B10, C1, C7, E3 ในช่วงวันที่() 
  • ศึกษาอ้างอิงจาก



  

Find types/Structures not mentioned in lecture

Pyramid Chart :

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

กราฟแสดงปริมาณอาหารประเภทต่างๆ ที่ควรกินให้เหมาะสม
ที่มารูปภาพ : http://www.lifeclinic.com/focus/nutrition/food-pyramid.asp
ที่มารูปภาพ :  http://yellowsubstudio.com/search/Foods-Rich-In-Vitamins-And-Minerals-Chart




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

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

Week 2#






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

( รูปที่ 1 : ตัวอย่างกราฟรูปแบบต่างๆ )

ตัวอย่างกราฟต่างๆ


( รูปที่ 2 :  ตัวอย่างกราฟรูปแบบต่างๆ )

การใช้งาน

1. ใช้เว็ปไซต์ของ manyeyes นั้นมีข้อมูลบางประเภท ให้ทดลองใช้อยู่แล้วที่หัวข้อ Dataset แต่ถ้าเรามีข้อมูลที่ต้องการจะวิเคราะห์เอง ก็สามารถเพิ่มเข้าไปได้
(โดยที่ข้อมูลที่เพิ่มเข้าไปจะอยู่ในรูปแบบตามรุปประกอบด้านล่าง)


( รูปที่ 3 : ตัวอย่างการเพิ่มข้อมูลลงไป )

2. เลือกรูปแบบกราฟที่เหมาะสมกับชุดข้้อมูลนั้นๆ



( รูปที่ 4 : ตัวอย่างแสดงผลลัพธ์ที่ได้จาก manyeyes )



Google Chart

(ที่มารูป : http://nbsadminassist.com/wp-content/uploads/2013/10/Google_wordmark.gif)

    เป็นเครื่องมือที่ใช้สร้างกราฟต่างๆ ที่ใช้ได้ฟรีโดยจะเรียกใช้โดย JavaScript 

( รูปที่ 5 : ตัวอย่างกราฟรูปแบบต่างๆของ Google)


การใช้งานตัวอย่าง

   ในเว็ปไซต์ Google Chart Site! ของ Google Chart นั้น Chart ในรูปแบบต่างๆนั้นจะมี Code ตัวอย่างอยู่แล้วเราแค่ใส่ข้อมูลของเราลงไปให้ถูกรุปแบบ

Ex. Bubble Chart เป็นตัวอย่างการสร้าง Bubblechart 


<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(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Correlation between life expectancy, fertility rate and population of some world countries (2010)',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>
  <body>
    <div id="series_chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

ผลลัพธ์ที่ได้



 ( รูปที่ 7 : ภาพผลลัพธ์จากจากใช้ Bubble Chart ของ Google Chart )

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

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

Week 1#

Infographic :

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

ตัวอย่างการนำเสนอข้อมูลในรูปแบบ Infographic



(ที่มารูปภาพ : http://appgame.in.th/forum/index.php?topic=671.0)


(ที่มารูปภาพ : https://lh3.googleusercontent.com/-HEpq-xQWA2s/U2rnzGdcGqI/AAAAAAAABYc/kzJrb09FipQ/w426-h551/57%2B-%2B1)

Spreadsheet : Microsoft Excel

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

ตัวอย่างข้อมูล

  • ข้อมูลแสดงความสูงของต้นผักสลัด

( รุปที่ 1 : แสดงข้อมูลความสูงของผักสลัดในหน่วย cm. )

ตัวอย่างการแสดงกราฟ

( รูปที่ 2 : แสดงกราฟจากโปรแกรม exel จากข้อมูล รูปที่ 1)

Processing

    เป็นเครื่องมือสำหรับการเขียนโปรแกรมภาษา Processing/Java 
  • แสดงกราฟโดยใช้ โปรแกรม Processing


( รูปที่ 3 : แสดงกราฟจากโปรแกรม Processing จากข้อมูล รูปที่ 1 )

    Source Code

Datplot

    เป็น Program ที่ช่วยสร้างกราฟข้อมูลต่างๆ จากไฟล์ข้อมูลต่างๆ เช่น .txt, .csv อย่างง่ายและรวดเร็วและมันฟรี ( http://www.datplot.com/download/ )

( รูปที่ 4 : แสดงกราฟจากโปรแกรม Datplot จากข้อมูล รูปที่ 1 )

วิธีใช้งานโดยคร่าว

1. เลือกข้อมูลที่ต้องการวิเคราะห์ เช่น .txt, .csv กดเข้าไปที่ File -> Load New data Source จากนั้นก็เลยไฟล์ข้อมูลของเราลงมา จากเลือกหัวข้อของ Cloume ว่าอยู่บรรทัดที่เท่าไร จากนั้นกด Import Data


( รูปที่ 5 : การ import File เข้าโปรแกรม Datplot )

2. เลือกข้อมูลในแนวแกน x ตรงมุมบนชวามือ ( X-ais Parameter )


( รูปที่ 6 : เลือกข้อมูลแกน x )

3. คลิกขวาเลือก Data Curve ->  Add เลือก Coulum ที่ต้องการ



( รูปที่ 7 : เลือก Coulum ที่ต้องการ)

4. ถ้ามีกราฟหลายเส้นก็กดทำตาม ข้อ 3. ก็จะได้กราฟ

( รูปที่ 8 : รูปกราฟที่ได้จาก Datplot)

5. ฟังก์ชั้น Event line เป็นที่สามารถดูข้อมูล ณ จุดๆ ใดก็ได้ของเส้น

( รูปที่ 9 : ตัวอย่างการใช้งาน Event Line )











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