Data Visualization: January 2015

Data Visualization Week 2

Datawrapper (Easy to use, Customize, Full Control)

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

RAW (copy, paste & Customize)

Raw เป็นเว็บแอปพลิเคชั่นที่สามารถนำข้อมูลที่ไม่เฉพาะแค่ตัวเลข แต่สามารถแสดงกราฟที่มีข้อมูลเป็นตัวอักษรได้ด้วยโดยจะใช้สีในการจำแนกข้อมูลตัวอักษรนั้นๆ โดยการเพิ่มข้อมูลสามารถทำได้โดยการ คัดลอก ตารางมาจากโปรแกรม Spreadsheet และนำมาวางได้เลย (Copy & Paste)

*โดยข้อมูลข้างต้นที่นำมาใช้นั้นไม่สามารถใช้ได้เนื่องจากไม่มีรูปแบบกราฟที่รองรับ

โดยข้อมูลที่นำมาทดลองเป็นตัวอย่างของทางเว็บโดยเป็นข้อมูลส่วนแบ่งทางการตลาดของ วัสดุที่ใช้ในการบันทึกเพลง ของแต่ละปีโดยทำการเลือกแสดงผลในรูปแบบของกราฟ "Voronoi Tessellation"

ซึ่งคนทั่วไปอาจจะดูไม่รู้เรื่อง ~

รูปแบบของกราฟนั้นมีให้เลือกทั้งหมด 16 รูปแบบโดยเป็นกราฟที่อาจจะไม่ค่อยคุ้นสำหรับคนทั่วไป

ปล. เว็บไซต์นี้ไม่รองรับการ import ข้อมูลจากไฟล์ CSV สามารถเพิ่มข้อมูลโดยการพิมพ์หรือ Copy & Paste ได้เท่านั้น

Plot.ly

plot.ly เว็บแอปพลิเคชั่นที่สามารถนำข้อมูลมาแสดงผลในรูปแบบของกราฟ (รองรับการ Import ข้อมูลจากไฟล์ CSV) โดยมีตาราง Spreadsheet ให้เราใส่ข้อมูลได้เลยหรือจะ Import จากไฟลฺ์ CSV ก็ได้โดยมีเครื่องมือสำหรับจัดการและ วิเคราะห์ข้อมูลนั้นๆด้วย

กราฟที่ได้จากการ Import ไฟล์ CSV สามารถนำมาพล๊อตกราฟได้และยังสามารถเลือกธีมของกราฟนั้นๆได้ปรับสีได้เลือกขนาดเส้นได้และอื่นๆซึ่งมีความหลากหลายมาก

กราฟตัวอย่างจาก https://plot.ly/~BrillionNerd/3/

Google Chart

เป็นการสร้างกราฟโดยใช้ภาษา JavaScript ซึ่งสามารถเขียนใช้บนหน้าเว็บได้รองรับ HTML5

ตัวอย่างกราฟที่ได้จากการเขียนโค้ดฝังบนหน้าเว็บโดย import ข้อมูลมาจาก google sheet

>> http://bit.ly/1BuwjZU <<

Code (ฝัง script ลงบนหน้าเว็บ)

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['table', 'map', 'corechart']});
google.setOnLoadCallback(initialize);
function initialize() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1ckSCsOQgwyAaLRA_xYIjRujMwddwKbtBZNRdjN6LWIo/edit?usp=sharing');
query.send(draw);
}
function draw(response) {
if (response.isError()) {
alert('Error in query');
}
var ticketsData = response.getDataTable();
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(ticketsData, {'isStacked': true, 'legend': 'bottom',
'vAxis': {'title': 'Temperature °C'},
'hAxis': {'title': 'Time'}});
}
</script>
</head>
<body>
<div id="chart_div" style="align: center; width: 700px; height: 300px;"></div>
</body>
</html>

Data Visualization Week 1

Create Chart by Spreadsheet, Processing, other.

Spreadsheet using calc from LibreOffice

Calc เป็นโปรแกรมประเภท Speadsheet ของ LibreOffice สามารถใช้งานในด้านการจัดการข้อมูลและนำมาแสดงผลในรูปแบบ กราฟต่างๆได้

โดยเราสามารถเลือกรูปแบบ, ข้อมูล, รายละเอียดของแต่ละข้อมูล, หัวข้อ ได้ทำให้เข้าใจข้อมูลนั้นๆง่ายขึ้น

Processing

เขียนโค้ดด้วยโปรแกรม Processing โดยทำการอ่านค่าจากไฟล์ที่ได้จาก Calc (เซฟไฟล์เป็นฟอแมต CSV) และนำค่าที่ได้มาสร้างเป็นกราฟแท่งแบบง่ายๆ

Other [ www.onlinecharttool.com ]

onlinecharttool เว็บไซต์สำหรับสร้างกราฟ โดยมีกราฟให้เลือกหลากหลายรูปแบบ เหมือนกับที่โปรแกรมประเภท Spreadsheet มีและยังสามารถ import ไฟล์ CSV ที่เซฟมาจากโปรแกรมประเภท Spreadsheet เพื่อสร้างกราฟได้ทันที หรือสามารถเพิ่มข้อมูลเองได้

และยังสามารถเซฟกราฟออกมาในรูปแบบไฟล์ต่างๆ JPG, PNG, CSV, PDF หรือจะแชร์ส่ง Social Network Facebook Twitter หรือ ส่งเข้าอีเมลก็ได้

ปัจจุบันการนำข้อมูลมาแสดงผลผ่านรูปภาพ (Info graphic) หรือกราฟ (Chart) สามารถทำได้ง่ายมากโดยจากตัวอย่างเพียงเรามีไฟล์ข้อมูลจากโปรแกรมประเภท Spreadsheet ที่เป็นฟอแมต CSV จะมีเว็บไซต์หรือแอปพลิเคชั่นมากมายรองรับการนำข้อมูลเหล่านั้นมาแสดงผลเป็นรูปภาพหรือกราฟ ซึ่งทำให้เกิดความเข้าใจในข้อมูลนั้นๆได้ง่ายมากขึ้น . . . *

Differenf between Data visualization and Info graphfic

Data visualization

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

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

Info graphfic

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

Pages

Tuesday, January 27, 2015

Data Visualization | Week 2

Data Visualization Week 2

Tuesday, January 20, 2015

Data Visualization | Week 1

Data Visualization Week 1