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
>> 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>
No comments:
Post a Comment