Test ครั้งที่ 2

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


สำหรับส่วนที่แก้ไขเพิ่มเติมหลังจากที่ส่งมีดังนี้

• เพิ่มในส่วนของ css เข้ามา
• เปลี่ยนจากการเรียกใช้งานไฟล์ d3.js และ d3-tip.js จากในเครื่อง เป็นการเรียกใช้งานผ่านทาง URL 
• เพิ่มข้อมูลลงไปจากเดิมเล็กน้อย

URL ของ Repository บน github : https://github.com/pongsathornantari/53-1156-320-8

Assignment I

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

โดยจะมีค่าเฉลี่ยของประชากรที่ว่างงานในช่วงปีพ.ศ. 2554 ถึง พ.ศ. 2557 ประมาณ 28.06 หมื่นคน

เมื่อได้เห็นกราฟของคนว่างงานทั้งประเทศแล้ว ลองมาดูในแต่ละภูมิภาคกันดูบ้างครับ เริ่มจากในส่วนของกรุงเทพมหานครกันก่อนครับ

จะเห็นได้ว่าช่วงเดือนมิถุนายนปีพ.ศ. 2557 ประชากรว่างงานในกรุงเทพมหานครสูงถึง 7.1 หมื่นคน โดยจะมีค่าเฉลี่ยอยู่ที่ประมาณ 3.08 หมื่นคน

มาดูในส่วนของภาคกลางกันบ้างครับ

จะเห็นได้ว่าประชากรว่างงานในภาคกลางนั้นค่อยข้างสูง โดยจะมีจำนวนประชากรที่ว่างงานมากที่สุดในเดือนมิถุนายนปี พ.ศ. 2557 ประมาณ 12.7 หมื่นคน โดยเฉลี่ยแล้วจะอยู่ที่ประมาณ 7.33 หมื่นคน

ในส่วนของภาคเหนือ จะมีจำนวนประชากรที่ว่างงานที่ไม่สูงมากเมื่อเทียบกับภาคกลาง

ในช่วงปีพ.ศ. 2554 ประชากรที่ว่างงานในภาคเหนือค่อนข้างสูง มีหลายเดือนอยู่ที่จำนวนคนว่างงานมีมากกว่า 7 หมื่นคน โดยในเดือนที่มีประชากรว่างงานมากที่สุดคือเดือนมิถุนายนปีพ.ศ. 2557 ซึ่งสูงถึง 7.7 หมื่นคน ค่าเฉลี่ยของประชากรที่ว่างงานในภาคเหนือจะอยู่ที่ประมาณ 4.51 หมื่นคน

ภาคตะวันออกเฉียงเหนือ

จำนวนประชากรที่ว่างงานมากที่สุดอยู่ในเดือนพฤศจิกายนปีพ.ศ. 2554 ซึ่งสูงถึง 16.23 หมื่นคน โดยจะมีค่าเฉลี่ยอยู่ที่ประมาณ 8.36 หมื่นคน

ภาคใต้

สำหรับในภาคใต้จะมีค่าเฉลี่ยของประชากรที่ว่างงานอยู่ประมาณ 4.7 หมื่นคน โดยเดือนที่มีประชากรว่างงานมากที่สุดคือเดือนกรกฎาคมปีพ.ศ. 2556 ซึ่งมีประมาณ 8.6 หมื่นคน

กราฟแสดงจำนวนประชากรเฉลี่ยที่ว่างงานในปีพ.ศ. 2554 ในแต่ละภูมิภาค

กราฟแสดงจำนวนคนว่างงานโดยแบ่งตามอายุ

DataVisualization Week 3: Other Chart

Smith Chart

Smith Chart ขณะที่ยังไม่ได้ใส่ค่าต่างๆลงไป

        Smith Chart ได้ถูกคิดค้นโดย Phillip H. Smith ซึ่งเป็น graphic aid หรือ โนโมแกรม (nomogram) ที่ถูกออกแบบมาสำหรับวิศวกรไฟฟ้าและอิเล็กทรอนิกส์ ที่มีความเชี่ยวชาญทางด้านความถี่ของคลื่นวิทยุ (Radio Frequency:RF) ให้สามารถแก้ปัญหาในสายขนส่ง (transmission line) และ matching circuit โดย smith chart ได้เติบโตขึ้นอย่างต่อเนื่องในช่วงหลายปีและถูกใช้งานกันอย่างแพร่หลาย ไม่ใช่สำหรับแก้ปัญหาเพียงอย่างเดียวแต่ยังสามารถสาธิตเกี่ยวกับลักษณะพารามิเตอร์ของ RF ในหนึ่งความถี่หรือหลายๆความถี่ อีกทางเลือกคือใช้ข้อมูลของ tabular แผนภูมิสมิธยังสามารถที่จะแสดงได้หลายพารามิเตอร์รวมไปถึงค่าความต้านทาน (impledance) ค่าความนำ (admittance) ค่าสัมประสิทธิ์การสะท้อน (reflection coefficients) เป็นต้น 

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

ภาพการวิเคราะห์เน็ตเวิร์คโดยการใช้ smith chart

ตัวอย่างการพล็อตจุดของ normalised impedance 

ตัวอย่างการพล็อตจุดของค่า reflection coefficient เชิงซ้อน

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

Data Visualization week 2

สำหรับงานที่ได้รับมอบหมายในสัปดาห์นี้มีดังนี้

• Try one or more web-based tools
• Try google charts

ในส่วนของ web-based tools ที่ได้ลองทำดูนั้นลองทำ 3 ตัวด้วยกันครับคือ Datawrapper, Manyeyes และ plotly เริ่มกันที่ Datawrapper ก่อนเลยครับ 

Datawrapper นั้นถือเป็นโปรแกรมที่ใช้สร้าง Visualization ซึ่งถือว่าใช้งานค่อนข้างง่ายเพียงแค่ล๊อคอินเข้าไปแล้วเลือก create new chart ซึ่งขั้นตอนนั้นมีเพียง 4 ขั้นตอนด้วยกันโดยในขั้นตอนแรกสามารถอัพโหลดไฟล์ csv หรือจะใช้โค้ดตัวอย่างจากในเว็บก็ได้ครับ

ขั้นตอนต่างๆของ Datawrapper

สำหรับในขั้นตอนที่ 2 จะให้ใส่ที่มาของไฟล์ข้อมูลซึ่งจะใส่หรือไม่ใส่ก็ได้ครับ

ขั้นตอนที่สองใส่ที่มาของข้อมูล

ในขั้นตอนที่ 3 นั้นจะเป็นการปรับแต่ง visualization ครับ สามารถเลือกกราฟ ใส่ชื่อกราฟ หรือเปลี่ยนสีของเส้นกราฟ

ขั้นตอนที่ 3 ในการสร้างกราฟบน Datawrapper

ในขั้นตอนที่ 4 จะเป็นการ publish & embed โดยในเวอร์ชันฟรีนั้นไม่สามารถที่จะ publish for embedding และ export to static image ได้

ขั้นตอนการ publish & embed

หลังจากที่ได้ปรับแต่งกราฟแล้วจะได้ประมาณนี้ครับ

Manyeyes เป็นอีก web-based tools อีกตัวนึงที่ใช้สร้าง Visualization โดยลักษณะของเว็บจะคล้ายๆกับ Datawrapper แต่มีเพียง 3 ขั้นตอนคือ ขั้นตอนแรกจะเป็นการอัพโหลดข้อมูลลงไปซึ่งจะไม่สามารถอัพโหลดไฟล์ csv ขึ้นไปได้เหมือนกับ Datawrapper หรือ Plotly ต้อง copy ข้อมูลไปวางแล้วแยกด้วยเครื่องหมายลูกน้ำ (,) ขั้นตอนต่อมาจะให้เลือกลักษณะของกราฟ ขั้นตอนสุดท้ายคือการแชร์ข้อมูลซึ่งจะให้ใส่ ชื่อของ visualization แหล่งที่มาของข้อมูล เป็นต้น ซึ่งใน Datawrapper จะแยกขั้นตอนการใส่ที่มาของข้อมูลเป็นอีกขั้นตอนนึง 

การใส่ข้อมูลที่มีลงไปในเว็บ Manyeyes

ขั้นตอนการเลือก visualization ของเว็บ Manyeyes

ขั้นตอนการแชร์ visualization ของเว็บ Manyeyes

Visualization ที่สร้างจากเว็บ Manyeyes

Plotly เป็นอีกตัวเลือกนึงในการสร้าง Visualization การใช้งานนั้นถือว่าง่ายกว่า Datawrapper และ Manyeyes เล็กน้อยกล่าวคือ จะเป็นการรวมทุกขั้นตอนไว้ในหน้าๆเดียวไม่ว่าจะเป็นการอัพโหลดไฟล์ข้อมูล การเลือกลักษณะ visualization และการแชร์

หน้าตาของเว็บ Plotly

 
Visualization ที่สร้างจากเว็บ Plotly

ในส่วนของการทดลองใช้งาน google chart นั้นถือว่าไม่ยากเนื่องจากมีโค้ดตัวอย่างให้ใช้จากบนเว็บซึ่งถือว่ามีการอธิบายที่ค่อนข้างละเอียด โดยโค้ดตัวอย่างสามารถนำไปแก้ไขได้ใน text editor ต่างๆได้เช่น notepad,notepad++ เป็นต้น 

ภาพรวมของเว็บไซต์ google chart

แก้ไขโค้ดใน Text Editor

กราฟที่สร้างจาก google chart

  

Infographic vs Data Visualization

Infographic

Information graphics หรือ Infographic เป็นการนำเสนอข้อมูลหรือความรู้ต่างๆในรูปแบบของกราฟฟิก โดยจะเน้นที่จะแสดงข้อมูลที่ซับซ้อนหรือเข้าใจยากให้เข้าใจได้อย่างรวดเร็วและชัดเจน โดยในการใช้กราฟิกเป็นการเพิ่มขีดความสามารถในการรับรู้ของมนุษย์ทำให้เห็นภาพ ขั้นตอนการสร้าง infographic สามารถที่จะเรียกว่าการแสดงข้อมูล (data visualization), การออกแบบข้อมูล (information design) หรือสถาปัตยกรรมข้อมูล (information architecture)

Data Visualization 

Data visualization หรือ Data Visualisation คือการแสดงข้อมูลในรูปแบบของภาพหรือกราฟิก นับเป็นศควรรศที่ผู้คนแสดงภาพเช่นแผนภูมิ (chart) และแผนที่ (map) เพื่อให้ผู้คนได้เข้าใจข้อมูลได้อย่างง่ายดายและรวดเร็ว มีการรวบรวมและวิเคราะห์ข้อมูลในปริมาณที่มากขึ้นซึ่งได้มีการใช้โปรแกรมสำหรับการแสดงภาพเพื่อดูผลจากการวิเคราะห์ ความสัมพันธ์ของข้อมูลเป็นจำนวนมาก การสื่อสารแนวคิดและสมมติฐานของผู้อื่นรวมไปถึงการทำนายอนาคตอีกด้วย

Difference

Data Visualization 

1.ถูกสร้างโดยโปรแกรมและสามารถที่จะนำไปใช้ในชุดข้อมูลจำนวนมากได้ 

2.เป็นสิ่งโดยทั่วไป (general)

3.context-free

4.ส่วนใหญ่จะเป็นอัตโนมัติ

Infographic 

Data Visualization Week 1

      ในสัปดาห์นี้ได้รับมอบหมายให้ทำงานสองชิ้นด้วยคือ

ให้ใช้ Spreadsheet ในการสร้าง graph/chart

ให้ใช้ processing.js

      สำหรับในการใช้ Spreadsheet ในการสร้าง graph/chart ได้ใช้โปรแกรม Microsoft Excel ในการสร้าง โดยข้อมูลที่ใช้สร้างนั้นเป็นการพยากรณ์อากาศในหนึ่งสัปดาห์ โดยในกราฟจะแสดงอุณหภูมิสูงสุด อุณหภูมิต่ำสุด อุณหภูมิเฉลี่ย และลักษณะของสภาพอากาศในแต่ละวัน

ข้อมูลที่ใช้ในการสร้างกราฟ

กราฟที่ได้จากข้อมูลข้างต้น

เมื่อใช้โปรแกรม processing ในการสร้างกราฟ