6 พฤษภาคม 2558

Assignment 2 : Career Paths

Computer Engineering Career Paths Topic :

http://v54-31025.blogspot.com/2015/05/assignment-2.html

29 เมษายน 2558

T2

Version control [Github] : https://github.com/chansak79/T2

Hash code :

592f6d6
735fad8
2d94920
12f247f
16c6caa
e5c6814
c261bb3
a7eb184

***Best show on fire fox brower***

******************************************************************************

จุดประสงค์

เพื่อรณรงค์แก้ไขปัญหา การติดเกมส์ของนักศึกษา

เนื้อหา

ที่มาและสาเหตุของการติดเกมส์
ผลกระทบที่เกิดจากการติดเกมส์
สรุป

1. ที่มาและสาเหตุของการติดเกมส์

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

2. ผลกระทบที่เกิดจากการติดเกมส์

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

กราฟพาย แสดงชั่วโมงการใช้ชีวิตของประชากรไทยอายุต่ำกว่า 25 ปี(เฉพาะคนที่เล่นเกมส์) ค่าเฉลี่ย 1 สัปดาห์

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

กราฟบาร์ แสดงค่าใช้จ่ายรายเดือนเฉลี่ยของประชากรไทยอายุต่ำกว่า 25 ปี(เฉพาะคนที่เล่นเกมส์)

จะเห็นได้ว่าประชากรไทยที่อายุต่ำกว่า 25 ปี และมีปัญหาติดเกมส์ จะเสียเงืน เฉลี่ยเดือนละ 1500 บาท ซึ่งหากเราออมเงินจำนวนนี้ หรือนำเงินจำนวนนี้ไปลงทุน ทุกๆเดือน เราจะได้ผลตอบแทนเมื่อเราแก่ตัวลง ไม่มีแรงทำงาน

[Work Group] A2 : Carreer Paths

[Work Group] Mini project Data Visualization : Carreer Paths

24 มีนาคม 2558

Assignment 1 (Version 2.0)

อีก 20 ปีข้างหน้า คุณต้องการมีเงินเก็บเท่าไร ?

Fixed Deposit คือ เงินฝากประจำ ต้องฝากเท่ากันทุกเดือน เช่น เงินฝากประจำ 3 เดือน 6 เดือน 9 เดือน 12 เดือน เป็นต้น ยิ่งจำนวนเดือนที่ทำสัญญาเยอะ จะได้รับดอกเบี้ยเยอะขึ้นตามไปด้วย โดยปัจจุบันอัตราดอกเบี้ยอยู่ที่ประมาณ 1.75% - 3.5%

Inspiration :

จากกราฟจะเห็นได้ว่าการมีเงินเก็บหลักหลายล้านไม่ใช่เรื่องยาก หากเราเริ่มเก็บตั้งแต่เริ่มทำงาน เมื่อเราอายุประมาณ 40 ปี เราสามารถมีเงินเก็บได้หลายล้านบาท

“การที่จะมีเงินเก็บเท่าไร ไม่มีวิธีใดทีถูกต้อง จงทำตามวิธีที่ถูกใจ”

9 มีนาคม 2558

Assignment 1 (Version 1.0)

อีก 20 ปีข้างหน้า คุณต้องการมีเงินเก็บเท่าไร ?

Reference :

https://docs.google.com/spreadsheets/d/1afgdNKLWw2zHqfBpVaNJkOZCpZNjkNsozhpMesHbACE/edit?usp=sharing

http://www.clker.com/clipart-bussines-man-4.html

8 มีนาคม 2558

Assignment 1 (Design)

Inspire : เกิดแรงบันดาลใจในการออมเงิน

ข้อมูลที่ต้องใช้ :

ฐานเงินเดือน
>> Link : รายได้ นศ. จบใหม่ 2558 <<

อัตราการเพิ่มของฐานเงินเดือนต่อปี (เงินเดือนเพิ่มขึ้นเฉลี่ย 5% ต่อปี)

อัตราดอกเบี้ยของธนาคาร
>> Link 1 : ธนาคารแห่งประเทศไทย <<
>> Link 2 : ธนาคารกสิกรไทย <<

ลักษณะของงาน :

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

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

Think about topic for your presentation

วิธีออมเงิน

http://alshamey.com/2015/01/teach-children-save-money/

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

Book : Interactive Data Visualization for the Web

http://chimera.labs.oreilly.com/books/1230000000345/

Prepare for Assignment 1

Start learning D3.js

Bar Charts !

แบบที่ 1 Manually - text

<body>
<style>
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
</style>
<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>
</body>

แบบที่ 2 Automatically [D3.js] - text

<style>
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  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 = [4, 8, 15, 16, 23, 42];

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return d * 10 + "px"; })
    .text(function(d) { return d; });
 
</script>
</body>

แบบที่ 3 Automatically [D3.js][long form] - text

<style>
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  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 = [4, 8, 15, 16, 23, 42];

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 * 10 + "px"; });
barEnter.text(function(d) { return d; });

</script>
</body>

แบบที่ 4 Manually - graphics

<style>
.chart rect {
  fill: steelblue;
}
.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}
</style>
<svg class="chart" width="420" height="120">
  <g transform="translate(0,0)">
    <rect width="40" height="19"></rect>
    <text x="37" y="9.5" dy=".35em">4</text>
  </g>
  <g transform="translate(0,20)">
    <rect width="80" height="19"></rect>
    <text x="77" y="9.5" dy=".35em">8</text>
  </g>
  <g transform="translate(0,40)">
    <rect width="150" height="19"></rect>
    <text x="147" y="9.5" dy=".35em">15</text>
  </g>
  <g transform="translate(0,60)">
    <rect width="160" height="19"></rect>
    <text x="157" y="9.5" dy=".35em">16</text>
  </g>
  <g transform="translate(0,80)">
    <rect width="230" height="19"></rect>
    <text x="227" y="9.5" dy=".35em">23</text>
  </g>
  <g transform="translate(0,100)">
    <rect width="420" height="19"></rect>
    <text x="417" y="9.5" dy=".35em">42</text>
  </g>
</svg>

แบบที่ 5 Automatically - graphics

<meta charset="utf-8">
<style>
.chart rect {
  fill: steelblue;
}
.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}
</style>
<svg class="chart"></svg>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];

var width = 420,
    barHeight = 20;

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, width]);

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", x)
    .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d; });

</script>

แบบที่ 6 ทดลองเปลี่ยนแนวกราฟ ?

Reference : https://github.com/mbostock/d3/wiki/Tutorials

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

Code box generate

http://hilite.me/

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

Find types/structures not mentioned in lecture

Disk space visualization

เป็นรูปแบบ Data Visualization ชนิดหนึ่งแสดงถึงการใช้งานพื้นที่ของดิกส์(Disk Usage) ในรูปแบบที่คล้ายกับ pie charts

โปรแกรม filelight (UNIX)

โปรแกรม philesight (UNIX)

Try web-based tools

Creately เป็น web-based tools อีกหนึ่งเครื่องมือที่สามารถสร้าง Data visualization ได้หลากหลายรูปแบบไม่ว่าจะเป็น Basic Charts, Flowcharts, UML Diagrams, Gantt Charts, Organizational Charts และอื่นๆ อีกมากมาย

สำหรับการใช้งานสามารถใช้งานได้ทั้งแบบ Online(มีแบบฟรี และเสียเงิน) และดาวโหลดเป็นโปรแกรมมาติดตั้งบนเครื่อง(เสียเงิน)

รูปภาพแสดงถึงคอนเซปของ Creately

รูปภาพแสดงถึงการเลือกรูปแบบที่ต้องการ

รูปภาพแสดงถึงหน้าแรกของการทำงานออนไลน์เว็ป

รูปภาพแสดงถึงวิธีการสร้าง Bar Charts

รูปภาพแสดงถึงการทำ infographics

Reference : http://creately.com/

27 มกราคม 2558

Try dygraphs

Dygraphs เป็นอีกทางเลือกหนึ่งสำหรับการสร้าง Data Visualization ข้อดีคือ สามารถใช้งานได้ฟรี ลักษณะการทำงานคล้ายกับ processing.js คือเขียนเป็นสคริปสั้นๆ ก็สามารถสร้างกราฟอย่างง่ายได้ทันที แต่มีข้อเสียคือ สามารถสร้างได้เพียงกราฟในลักษณะกราฟเส้น เท่านั้น และค่าของแกน x สามารถเป็นได้เพียงตัวเลข หรือวันที่ เท่านั้น

ข้อมูล จำนวนผู้เสียชีวิต 7 วันอันตรายปี 2015 (30/12/2014 – 05/01/2015)

30/12/2014 เสียชีวิต 56 คน

31/12/2014 เสียชีวิต 62 คน

01/01/2015 เสียชีวิต 60 คน

02/01/2015 เสียชีวิต 32 คน

03/01/2015 เสียชีวิต 15 คน

04/01/2015 เสียชีวิต 12 คน

05/01/2015 เสียชีวิต 32 คน

ตัวอย่าง สคริปอย่างง่าย

<html>
<head>
<script src="http://dygraphs.com/1.1.0/dygraph-combined.js" type="text/javascript"></script>
</head>
<body>
<div id="graph">
</div>
<script type="text/javascript">
g = new Dygraph(document.getElementById("graph"),

// data
"Date,The Number of Death\n" +
"2014-12-30,56\n" +
"2014-12-31,62\n" +
"2015-01-01,60\n" +
"2015-01-02,32\n" +
"2015-01-03,15\n" +
"2015-01-04,12\n" +
"2015-01-05,32\n",
{
// options
legend: 'always',
animatedZooms: true,
title: '7 Critical Day'
});
</script>
</body>
</html>

Reference :
http://rvpreport.rvpeservice.com/viewrsc.aspx?report=0626&session=16
http://dygraphs.com/index.html

Try google charts

Google charts เป็นเครื่องมือสำหรับสร้าง Data Visualization บนเว็ปตัวหนึ่งที่ใช้งานง่ายมีรูปแบบให้เลือกหลากหลายตั้งแต่ กราฟง่ายๆ จนถึง กราฟต้นไม้แบบซับซ้อน ซึ่งการนำไปใช้งานจะอยู่ในรูปแบบ JavaScript

Reference : https://developers.google.com/chart/interactive/docs/quick_start

เริ่มการใช้ Google charts อย่างง่าย

1. ส่วนของการโหลด Libraries ของ Google มาใช้

- Google JSAPI API

- Google Visualization library

2. ส่วนของการสร้างข้อมูลสามารถ สร้างในรูปแบบของตัวแปร Array หรือจะดูดข้อมูลมาจาก Spreadsheets ก็ได้ตามสะดวก

3. ส่วนของการตั้งค่ากราฟต่างๆ เช่น ขนาด หัวข้อ รูปแบบของกราฟ

ตัวอย่าง JavaScript อย่างง่าย

<html>
<head>
<script src="https://www.google.com/jsapi" type="text/javascript"></script>

<script type="text/javascript">

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
var data = google.visualization.arrayToDataTable([
['Semester', 'Student'],
['1/2554', 286],
['2/2554', 281],
['1/2555', 254],
['2/2555', 231],
['1/2556', 193],
['2/2556', 175],
['1/2557', 174],
]);

var options = {
title: 'Engineering Student of KMUTNB Prachinburi Campus',
'width':500,
'height':300
};

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

chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curve_chart"></div>
</body>
</html>

Try web-based tools

Web-based tools ที่เลือกมาทดลองใช้งานคือ plotly สามารถสมัครสมาชิกและใช้งานได้ฟรี การใช้งาน plotly สามารถใช้งานได้ 2 รูปแบบหลัก คือ Workspace online และ API libraries
Reference : https://plot.ly/