วันพฤหัสบดีที่ 7 พฤษภาคม พ.ศ. 2558

Assignment 2 : มลพิษทางอากาศ

URL ฺBlog : Assignment 2 : มลพิษทางอากาศ

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

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

Examination 2 

Problem 1.รณรงค์แก้ไขปัญหาที่สำคัญ สำหรับนักศึกษา เช่น ติดเกม ,เสพยาเสพย์ติด,ติดการพนัน,ชู้สาว,มาเรียนสาย
https://cyber169@bitbucket.org/cyber169/5401012620091
เขียนโดย ที่ ไม่มีความคิดเห็น:

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

Assignment 1 : พฤติกรรมการสูบบุหรี่และดื่มสุรา

บุหรี่


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

        สาเหตุของการติดบุหรี่
1) ทำตามเพื่อน เพราะเห็นเพื่อน ๆ บางคนสูบ
2) เกิดจากสมาชิกบางคนในครอบครัวสูบบุหรี่ เช่น พ่อ แม่ ลุง น้า จึงต้องการเอาอย่างบ้าง 
3) ความอยากทดลอง เพราะอยากรู้อยากเห็น
4) ยึดถือค่านิยมผิด ๆ คิดว่าการสูบบุหรี่เป็นการโก้เก๋
5) อิทธิพลจากการโฆษณาของสื่อมวลชน ทั้งจากภาพยนตร์ โทรทัศน์ หนังสือพิมพ์
6) ความเชื่อที่ผิดๆ เช่น เชื่อว่าเมื่อสูบบุหรี่จะทำให้สมองปลอดโปร่ง จิตใจเเจ่มใสและไม่ง่วงนอน เป็นต้น




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


สุรา



          สุรา หมายถึง น้ำเมาที่ได้จากการกลั่นสารบางประเภท เช่น เอทิลแอลกอฮอล์ เกิดจากการหมักหรือแช่ให้เกิดสารบางประเภท  เมื่อดื่มแล้วสารนั้นจะออกฤทธิ์กดประสาทส่วนกลาง หากดื่มไม่มากจะทำให้รู้สึกผ่อนคลาย แต่ถ้าหากดื่มมากขึ้นจะทำให้เสียการทรงตัว และหมดสติไปในที่สุด

          สาเหตุสำคัญที่ทำให้เริ่มดื่มสุรา
1) เพื่อเข้าสังสม หรือสังสรรค์
2) ตามอย่างเพื่อน หรือเพื่อชวนดื่ม
3) อยากทดลองดื่ม
4) เพื่อความโก้เก๋
5) เพื่อให้เจริญอาหาร
6) ใช้เป็นยา หรือเป้นส่วนผสมของยา
7) มีความเครียด วิตกกังวล
8) เพื่อความเป้นผู้ใหญ่
9) เมื่อรู้สึกผิดหวัง
10) ผู้ใหญ่ใช้ให้ไปซื้อ








จาก Bar chart จะเห็นได้ว่า ในแต่ละปี มีอัตราร้อยละในการเพิ่มขึ้น และลดลงค่อนข้างน้อย ถ้าดูจากผลรวมของประชากรทั้งชายและหญิง และในปี 2554 เป็นต้นมา มีแนวโน้มของอัตราร้อยละ ที่เพิ่มขึ้น 
เขียนโดย ที่ 2 ความคิดเห็น:

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

Prepare for Assignment 1

Begin with D3.js

     ใช้ตารางสรุปยอดขายรถยนต์ในไทย ประจำเดือน ธันวาคม พ.ศ.2557 ในการทำ chart


รูปที่ 1 ตารางสรุปยอดขายรถยนต์ในไทย ประจำเดือนธันวาคม 57
1.Histrogram
แสดง chart ในแบบ Histogram
Code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
.chart div {
  font: 10px sans-serif;
  background-color: orange;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
</style>
<body>
<div class="chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [33073,15646, 13369, 5658, 5283, 3471,2799,2097,1874];

var chart = d3.select(".chart");
var bar = chart.selectAll("div");
var barUpdate = bar.data(data);
var barEnter = barUpdate.enter().append("div");
barEnter.style("width", function(d) { return d / 50 + "px"; });
barEnter.text(function(d) { return d; });

</script>
</body>
</html>

Refer from : bost.ocks.org


2. Pie
แสดง chart ในแบบ Pie

Code :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<html>
<head>
        <meta charset="utf-8">
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
        text {
                font-family: sans-serif;
                font-size: 12px;
                fill: white;
        }
 
        </style>
</head>
<body>
        <script type="text/javascript">
 
        //Width and height
        var w = 400;
        var h = 400;
        var dataset = [ 33073, 15646, 13369, 5658, 5283, 3471, 2799,2097,1874 ];
        var outerRadius = w / 2;
        var innerRadius = 0;
        var arc = d3.svg.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);
                       
        var pie = d3.layout.pie();
               
        //Easy colors accessible via a 10-step ordinal scale
        var color = d3.scale.category10();
 
        //Create SVG element
        var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);
                       
        //Set up groups
        var arcs = svg.selectAll("g.arc")
                  .data(pie(dataset))
                  .enter()
                  .append("g")
                  .attr("class", "arc")
                  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
                       
        //Draw arc paths
        arcs.append("path")
            .attr("fill", function(d, i) {
                return color(i);
            })
            .attr("d", arc);
                       
        //Labels
        arcs.append("text")
            .attr("transform", function(d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function(d) {
                return d.value;
            });
                                               
        </script>
</body>
</html>
Refer from : bl.ocks.org
เขียนโดย ที่ ไม่มีความคิดเห็น:

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

Exercise 3

Exercise 3 - Try more Web-based Tools

     ทดลองใช้เว็บ Web-based Tools  อื่นๆซึ่งใน Exercise นี้ ผมได้เลือกเว็บ charts.hohli มาใช้ในการ create chart online

ภาพแสดง table ที่ใช้ในการกรอกข้อมูล

     มีการ preview chart ในขณะที่เรากำลังกรอกข้อมูล

Preview graph instant

     ข้อดี
        - เหมาะสำหรับข้อมูลที่มี ไม่กี่ชนิด
        - ใช้งานสะดวก ไม่ซับซ้อน
   
     ข้อเสีย
       - ไม่เหมาะกับข้อมูลที่มีหลายชนิด
       - ไม่สามารถ import ไฟล์ ใดๆ ได้เลย ตัวอย่างเช่น csv


    เมื่อกด Generate จะได้
After press generate


กราฟที่ได้ 


ข้อมูลจาก headlightmag








Bubble chart

          Bubble chart เป็นแผนภูมิแบบฟองอากาศ ซึ่งในแต่ละฟอง สามารถกำหนดค่าพารามิเตอร์ได้ถึง 3 ค่า คือ ค่า X , ค่า Y และค่ารัศมี ของฟอง Bubble chart มักถูกใช้ในการนำเสนอข้อมูลทางการเงิน ดังภาพ


Refer from : https://docs.oracle.com
เขียนโดย ที่ ไม่มีความคิดเห็น:

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

Exercise 2

Try  web-based tools


สำหรับ web-based tools ที่ทดลองใช้คือ Plotly 
มีขั้นตอนในการใช้งานอย่างง่าย ดังนี้
     1. สร้างตารางข้อมูลใน Google sheets

     2. ใช้ฟังก์ชันที่มีอยู่ในเว็บ plotly คือ สามารถ import ไฟล์ จาก Google Drive หรือ Dropbox ได้จากในเว็บ plotly ทันที

     3. ข้อมูลที่สร้างจาก Google sheets ก็จะมาปรากฏใน plotly ทันที


     4.เมื่อกด Line plot  ก็จะได้รูปกราฟ ดังนี้


Refer from : https://plot.ly/
                    
---------------------------------------------------------------------------------------------------------

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

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
    
          <div id="ex0"></div>
            google.load('visualization', '1', {packages: ['corechart']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Horse power');

      data.addRows([
        [0, 0],   [2000, 60],  [2500, 90],
        [3000,110],  [3500,140],  [4000,170],
        [4500,190],  [5000,220],  [5500,240],
        [6000,270],  [6500,280],  [7000,300],
        [7500,290]
      ]);

      var options = {
        width: 600,
        height: 563,
        hAxis: {
          title: 'RPM'
        },
        vAxis: {
          title: 'Horse power'
        }
      };

      var chart = new google.visualization.LineChart(
        document.getElementById('ex0'));

      chart.draw(data, options);

    }


Refer from : https://google-developers.appspot.com
เขียนโดย ที่ ไม่มีความคิดเห็น:

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

Exercise 1

use spreadsheet to create graph/chart 

1. create from google spreadsheet

Refer from
https://docs.google.com

2. create from web application


Refer from
http://www.chartgo.com

3. create from proceesing



 Refer from
http://www.motioninfostudio.com
Data visualization VS Info graphic

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

ภาพแสดงตัวย่อของประเทศที่ตั้งขององค์กร

Infographic ย่อมาจาก Information Graphic คือ ภาพหรือกราฟิกซึ่งบ่งชี้ถึงข้อมูล ไม่ว่าจะเป็นสถิติ ความรู้ ตัวเลข ฯลฯ เรียกว่าเป็นการย่นย่อข้อมูลเพื่อให้ประมวลผลได้ง่ายเพียงแค่กวาดตามอง ซึ่งเหมาะสำหรับผู้คนในยุคไอทีที่ต้องการเข้าถึงข้อมูลซับซ้อนมหาศาลในเวลาอันจำกัด ( เหตุผลเพราะมนุษย์ชอบและจดจำภาพสวยๆ ได้มากกว่าการอ่าน ) ยกตัวอย่างเช่น ภาพแสดงวิธีประหยัดเงิน



Refer from
http://www.oknation.net




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