Data Visualization: 2015

วันอังคารที่ 5 พฤษภาคม พ.ศ. 2558

Assignment 2

Assignment 2

Data Visualization 2558

Computer Engineering Career Paths Topic

5401012610044 ชาญศักดิ์ กรชัยวรกุล

5401012610061 ธนวัฒน์ ม่วงสว่าง

5401012631025 กล้าณรงค์ ระลึก

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

ภาพ Data Visualization ประเภท Word Cloud แสดงให้เห็นถึงตำแหน่งงานทางด้าน IT

ซึ่งขนาดของตัวอักษรแปรผันตรงตามเงินเดือน โดยส่วนที่ไฮไลท์บ่งบอกถึงตำแหน่งที่นิยม

ต่อไปเป็น Bar Chart แสดงจำนวนเงินเดือนเฉลี่ย 10 ตำแหน่ง IT ที่มีความนิยมในปี 2015

ซึ่งจำนวนเงินเดือนที่แสดง แต่ละตำแหน่งจะแบ่งออกเป็นสองส่วน ตามประสบการณ์ คือ

Bar แท่งสีน้ำเงินแสดงเงินเดือนเฉลี่ยที่ประสบการณ์ 0 - 5 ปี

Bar แท่งสีส้ม แสดงเงินเดือนเฉลี่ยที่ประสบการณ์ 5 - 10 ปี

ส่วนสีเทาที่มีตัวอักษร N/A คือไม่มีตำแหน่งงานนั้นในช่วงประสบการณ์ 0 - 5 ปี

Pie Chart นี้แสดงให้เห็นถึงอัตราส่วนการรับสมัครงานในงาน Job Fair 2015 โดยสีเขียวจะเป็นบริษัทที่เปิดรับสมัครงานที่มีตำแหน่งงานในสาย IT ส่วนสีแดงจะเป็นบริษัทที่ไม่มีตำแหน่งงานในด้าน IT

Bar Chart แสดงจำนวนบริษัทที่มีการประกาศรับสมัครตำแหน่งงานด้าน IT ในงาน

KMUTNB job fair 2015 ซึ่งข้อมูล Bar สีน้ำเงิน แสดงจำนวนบริษัทเรียงจากมากสุดลงมาน้อยสุด

ภาพ Data Visualization แสดงผลสรุปแบบสอบถามนักศึกษาวิศวกรรมศาสตร์คอมพิวเตอร์ชั้นปีที่4

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

ภาพ Data Visualization แสดงผลสรุปจำนวนเงินที่ต้องการเสนอต่อบริษัท

ของนักศึกษาวิศวกรรมศาสตร์คอมพิวเตอร์ชั้นปีที่4

สรุป
สำหรับหัวข้อ Computer Engineering Career Paths สิ่งที่พวกผมอยากสื่อออกมาคือ เรามีแนวทาง มีอาชีพใดบ้างที่เราสามารถไปประกอบอาชีพ ในอนาคตได้ ไม่ว่าจะเป็นงาน ออกแบบ วิเคราะห์ พัฒนา ติดต่อลูกค้า ปรับปรุงระบบ ทางด้านคอมพิวเตอร์ และสิ่งที่ค่อนข้างสำคัญก็คือเงินเดือน เงินเดือนที่แปรผันตามความสามารถ ความรับผิดชอบ ประสบการ์ณที่เรามี... แนวทางของเพื่อนๆ นศ. ปี 4 ที่กำลังจะจบออกไป พวกเขาอยากทำอะไรกัน แล้วเราละต้อง ทำตามคนอื่นมั้ย ? หรือจะหาแนวทางที่เป็นของเราเอง

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

Test3

Bitbucket url : https://bitbucket.org/pookla223/test3

bar chart แสดงจำนวนคนที่มาสูบบุหรี่ภายในมหาวิทยาลัยในแต่ละปี

D3 Page Template

pie chart แสดงเปอร์เซ็นคนที่เข้ามาสูบบุหรี่ภายในมหาวิยาลัยในปี 2558

D3 Page Template

วันเสาร์ที่ 25 เมษายน พ.ศ. 2558

Assignment 2 Career Paths

Word Cloud

ใช้แสดงชื่อตำแหน่งงานด้าน IT จำนวน 40 - 50 ตำแหน่ง ซึ่งขนาดของตัวอักษรใหญ่หรือเล็ก จะขึ้นอยู่กับปริมาณเงินเดือนของแต่ละตำแหน่งงาน

Bar Chart

ใช้แสดงข้อมูล 10 อันดับตำแหน่งงานด้าน IT ที่นิยมปี 2015 ซึ่งกราฟจะแสดงปริมาณช่วงเงินเดือนตามประสบการณ์ ของตำแหน่งงานแต่ละตำแหน่ง จำนวน 10 ตำแหน่งงาน

ข้อมูลจากบริษัท Adecco

ใช้แสดงข้อมูลตำแหน่งงานที่มีการเปิดรับสมัครจากบริษัทต่างๆ ในงาน KMUTNB Job Fair 2015 โดยจะแสดงตำแหน่งที่มีความต้องการมากที่สุด ไปยังตำแหน่งที่มีความต้องการน้อยที่สุด

Pie Chart

ใช้แสดงตำแหน่งงานด้าน IT และตำแหน่งงาน ด้านอื่นๆ ที่มีการเปิดรับสมัคร ในงาน KMUTNB Job Fair 2015
ใช้แสดงข้อมูลที่ได้ทำการสำรวจจากนักศึกษา Cpr.E ชั้นปีที่ 4 ซึ่งเป็นข้อมูลเมื่อจบไปแล้วจะไปทำอะไรต่อ เช่น ศึกษาต่อ, ไม่สำเร็จการศึกษาตามหลักสูตร, ทำงาน, อื่นๆ(ยังไม่ทำงาน, เที่ยว) เป็นต้น

Job Descriptions

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

วันอังคารที่ 10 มีนาคม พ.ศ. 2558

Assignment 1

อุบัติเหตุทางถนน

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

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

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

ภาพจาก : http://trso.thairoads.org/statistic/festival

ช่วงเทศกาลปีใหม่

กราฟแสดงจำนวนการเกิดอุบัติเหตุ และผู้ได้รับบาดเจ็บในแต่ละปี

กราฟแสดงจำนวนผู้เสียชีวิต

ช่วงเทศกาลสงกรานต์

กราฟแสดงจำนวนการเกิดอุบัติเหตุ และผู้ได้รับบาดเจ็บในแต่ละปี

กราฟแสดงจำนวนผู้เสียชีวิต

สรุปข้อมูลการเกิดอุบัติเหตุช่วงปีใหม่ ปี 2557, 2558

กราฟแสดงสาเหตุการเกิดอุบัติเหตุ

กราฟแสดงประเภทรถที่เกิดอุบัติเหตุสูงสุด

กราฟแสดงลักษณะจุดเกิดเหตุ

กราฟแสดงจำนวนผู้ที่ถูกดำเนินคดีตามมาตรการลดพฤติกรรมเสี่ยง

improve : ปรับรุงพฤติกรรมเสี่ยงของตนเองในการใช้รถใช้ถนน ตรวจเช็คสภาพรถก่อนใช้งาน ปฏิบัติตามกฎจราจร สวมหมวกกันน็อก คาดเข็บขัดนิรภัย ไม่ขับรถเร็วเกินกฎหมายกำหนด ขับรถอย่างระมัดระวังไม่ประมาท เมาไม่ขับ ง่วงนอนไม่ขับ ซึ่งสิ่งเหล่านี้ล้วนเป็นพฤติกรรมเสี่ยงที่ทำให้เกิดอุบัติเหตุมากที่สุด

inspiration : จะเห็นได้ว่าการรณรงค์ การใช้กฎหมายบังคับ และการปฏิบัตตามกฎจราจรในแต่ละปี ทำให้อุบัติเหตุลดลงจริง จะสังเกตุได้จาการาฟที่มีแนวโน้มลดลง

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

ขับรถอย่างปลอดภัยโดยเฉพาะในช่วงเทศกาล

ข้อมูล
ศูนย์อำนวยความปลอดภัยทางถนน
สำนักอำนวยความปลอดภัย กรมทางหลวง
หน่วยเฝ้าระวังและสะท้อนสถานะการความปลอดภัยทางถนน

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

Topic Assignment 1

แอลกอฮอล์ กับ อุบัติเหตุ

ตั้งแต่อดีตจนถึงปัจจุบัน แอลกอฮอล์เข้ามามีบทบาทในชีวิตของมนุษย์มาก ซึ่งก็ส่งผลเสียมากมาย ไม่ว่าจะเป็นร่างกาย สมอง ทรัพย์สิน ไปจนถึงการเสียชีวิต

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

ซึ่งในช่วงเทศกาลปีใหม่ มีอุบัติเหตุจากการเมาสุรา คิดเป็น ร้อยละ 38.73 ในปี 2556 และร้อยละ 37.28 ในปี 2555 ส่วนในช่วงเทศกาลสงกรานต์มีอุบัติเหตุจากการเมาสุราคิดเป็นร้อยละ 39.11 ในปี 2556 และ ร้อยละ 39.21 ในปี 2555

ข้อมูลจะเป็นข้อมูลอัตราการเกิดอุบัติเหตุเนื้องจากการเมาสุรา ต่อการเกิดอุบัติเหตุทั้งหมดในช่วงเทศกาล วันปีใหม่ วันสงกรานต์ แต่ละปีที่ผ่านมา

ข้อมูล

http://www.thaiantialcohol.com/newsletters/view/1481

http://www.roadsafetythailand.com/main/index.php/data-statistics-th/statanddatanewyearmenu

http://trso.thairoads.org/statistic/festival

http://db.kmddc.go.th/Default.aspx

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

Week 4

ทำการทดลองใช้งาน D3.js

ได้ศึกษาการใช้งานตาม Tutorials https://github.com/mbostock/d3/wiki/Tutorials

เป็นการสร้าง barchart ตามตัวอย่าง Tutorials

1:  <meta charset="utf-8">  
2:  <style>  
3:  .chart rect {  
4:   fill: steelblue;  
5:  }  
6:  .chart text {  
7:   fill: white;  
8:   font: 10px sans-serif;  
9:   text-anchor: end;  
10:  }  
11:  </style>  
12:  <svg class="chart"></svg>  
13:  <script src="http://d3js.org/d3.v3.min.js"></script>  
14:  <script>  
15:  var data = [4, 8, 15, 16, 23, 42]; //create data  
16:  //generate width and bar height  
17:  var width = 420,  
18:    barHeight = 20;  
19:  //scale axes x  
20:  var x = d3.scale.linear()  
21:    .domain([0, d3.max(data)])  
22:    .range([0, width]);  
23:  //create chart  
24:  var chart = d3.select(".chart")  
25:    .attr("width", width)  
26:    .attr("height", barHeight * data.length);  
27:  //create bar  
28:  var bar = chart.selectAll("g")  
29:    .data(data)  
30:   .enter().append("g")  
31:    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });  
32:  //create rect  
33:  bar.append("rect")  
34:    .attr("width", x)  
35:    .attr("height", barHeight - 1);  
36:  //create text  
37:  bar.append("text")  
38:    .attr("x", function(d) { return x(d) - 3; })  
39:    .attr("y", barHeight / 2)  
40:    .attr("dy", ".35em")  
41:    .text(function(d) { return d; });  
42:  </script>

ผลที่ได้

ได้ศึกษาการวาดวงกลม สี่เหลี่ยม

ตัวอย่างโค้ดจากเว็บ http://spalinux.com/2013/12/basic-using-d3-js-to-create-svg-circle-and-rect

1:  <html>  
2:  <head>  
3:  <script src="http://d3js.org/d3.v3.min.js"></script>  
4:  </head>  
5:  <body>  
6:  <script>  
7:  // create svg  
8:  var svg = d3.select("body").append("svg");  
9:  svg.attr("width", 500)  
10:    .attr("height", 200);  
11:  // create circle  
12:  var circle = svg.append("circle");  
13:  circle.attr("cx", 80)  
14:     .attr("cy", 40)  
15:     .attr("r", 20);  
16:  // create rect  
17:  var rect = svg.append("rect");  
18:  rect.attr("x", 140)  
19:    .attr("y", 90)  
20:    .attr("width", 70)  
21:    .attr("height", 30);  
22:  </script>  
23:  </body>  
24:  </html>

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

week 3

web-based tools supported visualization types/structures

web-based tool ที่ได้ทดลองคือ infogr.am https://infogr.am/

ในส่วนหน้าเว็บ

การใช้งานเราสามารถเลือกใช้งานได้ทั้งแบบฟรี และไม่ฟรี ซึ่งก็จะมีฟังก์ชั่นการใช้งานให้เราแตกต่างกัน

- ใช้ฟรีก็จะสามารถ ใช้ chart มากกว่า 30 ชนิด, สามารถแก้ไขข้อมูลได้, สามารถ import file XLS, XLSX, CSV file, แสดง chart แบบ Publish

- ใช้งานแบบไม่ฟรีก็จะมีฟัก์ชั่นการใช้งาน เพิ่มขึ้นมา เช่น สามารถดาวโหลด chart ได้เป็นไฟร์ PNG PDF, สามารถแชร์แบบ private ได้, Real-time data(Google Spreadsheet, JSON), สามารถออกแบบ themes ใหม่ได้

การใช้งานเมื่อกดที่ Join now, it's free! ระบบก็จะให้ Register ซึ่งเราสามารถ login โดยใช้ Account ของ google ได้

เมื่อ login เข้ามาก็จะมีปุ่มให้เราเลือก create ซึ่งเราสามารถสร้างได้ทั้ง infographics หรอ Chart

เราสามารถเลือกแบบ Chart ที่ต้องการและทำการใส่ข้อมูล หรือ import file ได้เลย

เมื่อต้องการแชร์สามารถกดที่ปุ่ม publish > publish for everyone ซึ่งก็จะมี script responsive ส่วนของ Embed ให้เราสามารถนำไปแชร์ที่เว็บอื่นได้

ได้ทดลองสร้าง Chart อันแรกเป็น bar chart ซึ่งเป็น chart ที่ใช้ในเชิงเปรียบเทียบข้อมูล

ข้อมูล เป็นข้อมูลเปรียบเทียบ อัตราการดื่มสุราของประชากรประชากร อายุตั้งแต่ 15 ปีขึ้นไปจำแนกตามเพศ

ข้อมูลจากเว็บสำนักงานสถิติแห่งชาติ http://service.nso.go.th/nso/nsopublish/themes/files/smokeExec57.pdf

ข้อมูลเปรียบเทียบ อัตราการดื่มสุราของประชากรประชากร อายุตั้งแต่ 15 ปีขึ้นไปจำแนกตามเพศ | Create infographics

Chart อันที่สองเป็น pie chart ซึ่งเป็น chart ที่ใช้บอกส่วนประกอบของข้อมูล

ข้อมูล เป็นข้อมูลแสดงพฤติกรรมการดื่มสุราฯ ของประชากรอายุตั้งแต่อายุ 15 ปีขึ้นไป จําแนกตามความบ่อยครั้งของการดื่มฯ พ.ศ. 2557

ข้อมูลจากเว็บสำนักงานสถิติแห่งชาติ http://service.nso.go.th/nso/nsopublish/themes/files/smokeExec57.pdf

พฤติกรรมการดื่มสุราฯ ของประชากรอายุตั้งแต่อายุ 15 ปีขึ้นไป จําแนกตามความบ่อยครั้งของการดื่มฯ พ.ศ. 2557 | Create infographics

Chart อันที่สามเป็น wordcloud ซึ่งเป็น chart ที่ใช้บอกถึงการกระจายของข้อมูล

ข้อมูล เป็นข้อมูลแสดงการกระจายของ “ประชากรเมือง” ในภาคต่างๆ ของประเทศไทยปี 2553

ข้อมูลจาก http://kasetsartjournal.ku.ac.th/kuj_files/2014/A1403260935512968.pdf

การกระจายของ “ประชากรเมือง” ในภาคต่างๆ ของประเทศไทยปี 2553 | Create infographics

Find types/structures not mentioned in lecture

เป็น Chart ที่ชื่อว่า Pictorial เป็น chart ที่แสดงภาพจำนวน ซึ่งใช้ในการเปรียบเทียบข้อมูล

ข้อมูลจากเว็บสำนักงานสถิติแห่งชาติ http://service.nso.go.th/nso/nsopublish/themes/files/smokeExec57.pdf

วันจันทร์ที่ 26 มกราคม พ.ศ. 2558

Web-based tools

RAW

http://raw.densitydesign.org/

ได้ทดลองใช้ web-based tools ชื่อ RAW สร้างกราฟข้อมูลแสดงการใช้งานเว็บบราวเซอร์เฉลีย ในแต่ละปีคิดเป็นเปอร์เซ็นตั้งแต่ปี 2008 - 2014

Year   IE 8   IE 7   IE 9 FireFox Chrome Safari
2008 0% 33.80% 0%   6.93% 0% 0%
2009 4.10% 34.96% 0%   11.71% 1.42% 0.62%
2010 25.77% 29.04% 0.28% 13.77% 4.76% 1.43%
2011 34.07% 18.02% 2.66% 15.54% 15.58% 3.67%
2012 22.92% 8.90% 7.53% 13.80% 29.69% 9.64%
2013 11.75% 4.17% 5.66% 13.62% 37.91% 18.52%
2014 5.68% 2.32% 2.68% 16.01% 40.59% 25.02%

ข้อมูลจาก http://truehits.net/graph/graph_stat.php#WEB
บริษัท ศูนย์วิจัยนวัตกรรมอินเทอร์เน็ตไทย จำกัด

เริ่มจากการใส่ข้อมูลที่เราต้องการสร้างกราฟ