Data Visualization: Exercise2 - Use web-based tool

Exercise ที่ 2 เป็นการทดลองและเปรียบเทียบเครื่องมือที่ใช้สร้าง Graph และ Chart โดยใช้ข้อมูลง่ายๆ ซึ่งในที่นี้ได้ใช้นำข้อมูลการใช้เวลาใน 1 วัน หรือ 24 ชั่วโมง เช่นเดียวกับ Exercise 1 มาเป็นข้อมูลที่จะมาแสดง ซึ่งโจทย์กำหนดให้ใช้เครื่องมือดังนี้

Web-base Tools
Google Charts
Other Tools

รูปที่ 1 : ตารางข้อมูลที่นำมาใช้แสดง

Web-based Tools

Web-based Tools หมายถึง เครื่องมือที่มีการทำงานผ่านทาง Web browser อย่าง Internet Explorer, Chrome, Firefox และอื่นๆ ซึ่งต้องอาศัยการเชื่อมต่อทางอินเตอร์เน็ตในการใช้งาน

โดย web-based tools ที่ใช้ในการสร้าง Chart และ กราฟมีหลากหลาย web site ให้เลือกใช้งาน เช่น Datawrapper , RAW , Many eyes และ Plotly เป็นต้น ซึ่งในการทดสอบนี้ ได้เลือก RAW มาใช้งาน

RAW

รูปที่ 2 : แสดงหน้า homepage ของ RAW web-based

เป็นเครื่องมือที่ใช้ในการจัดการข้อมูลที่ต้องการจะนำมาแสดงผล โดยเป็นการเชื่อมโยงกันระหว่าง spreadsheets และ vector graphics

* vector graphics เป็นการนำข้อมูลมาประมวลผลผ่านชุดคำสั่งทางคณิตศาสตร์ เพื่อสร้างภาพดิจิตอล 2 หรือ 3 มิติ

รูปที่ 3 : แสดงหน้า Features ของ Raw web-based

รูปที่ 4 : เป็นส่วนในการเพิ่มข้อมูลที่ต้องการนำไปแสดงผล

รูปที่ 5 : แสดงการ upload ไฟล์ *.csv ลงใน RAW

รูปที่ 6 : ข้อมูลที่ต้องการแสดงผล

รูปที่ 7 : การแสดงผลข้อมูลแบบต่างๆ

รูปที่ 8 : การจัดการรูปข้อมูลที่จะใช้ในการแสดงผล

รูปที่ 9 : การแสดงผลข้อมูลที่ได้จาก RAW

Google Charts

Google charts เป็นเครื่องมือในการสร้าง graph หรือ charts โดยการให้บริการของ Google ที่ใช้งานได้พรี พัฒนาจาก JavaScript สามารถสร้างการแสดงผลข้อมูลออกมาได้หลากหลายรูปแบบ ทั้ง Bar Charts , Pie Chart ,Histograms และอื่นๆอีกมากมาย พร้อมทั้งคำแนะนำการใช้งานและตัวอย่าง

ตัวอย่างโค้ดที่ใช้ในการสร้าง Pie Chart 3D ของ Google Charts

<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(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Working', 5],
['Sleeping', 8],
['Surfing', 3],
['Watching TV', 2],
['Reading', 0.25],
['Relaxing', 2.5],
['Other', 3.25]
]);

var options = {
title: 'Time Usage',
is3D: true,
};

var chart = new google.visualization.PieChart(document.getElementById

('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
</html>

รูปที่ 10 : Pie Chart ที่ได้จากการใช้ Google chart API

Other Tools

ในการนำข้อมูลมาแสดงผลเป็น graph หรือ chart นั้นยังมีเครื่องมือื่นๆให้เลือกใช้อีกมากมาย ซึ่งในที่นี้ได้เลือกเครื่องมือที่มีชื่อว่า jschart เป็นเครื่องมือที่มีทั้งเป็นโปรแกรมให้ Download และ ติดตั้งบนเครื่องคอมพิวเตอร์ และ ใช้งาน Online ผ่าน web browser

JScharts