Data Visualization: มกราคม 2015

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

Data Visualization Week 2 :: web-based tool & google chart

Data Visualization Week 2

ข้อมูลที่นำมาใช้ในการทดลองในครั้งนี้นั้นเป็นข้อมูลของ อัตราผู้ป่วยโรคสำคัญต่อหนึ่งแสนคน ในปี ค.ศ.2012 และ ปี ค.ศ.2013

Use google chart

เป็นการเขียนโค้ดเพื่อสร้าง chart โดยการใช้ script ของทาง google chart ซึ่งทางเว็บนั้นได้มีโค้ดตัวอย่างไว้ให้สำหรับผู้เริ่มใช้ได้ทดลองกันด้วย ดังตัวอย่างการสร้างกราฟแท่งในครั้งนี้ได้มีการนำโค้ดของทาง google chart มาประยุกต์ใช้ (https://developers.google.com/chart/interactive/docs/quick_start) ซึ่งทางเว็บได้แนะนำมาว่าหากผู้ใช้ต้องการสร้างสร้าง Pie chart ให้เรียกใช้ด้วยคำสั่ง google.visualization.PieChart แต่หากต้องการสร้าง Bar chart ให้เรียกใช้ด้วยคำสั่ง google.visualization.BarChart แทน

CODE ที่ใช้ในการสร้างกราฟ

ผลที่ได้จากการทดลอง

Use web-based tool

plot.ly : http://plot.ly/

ในส่วนของ plot.ly นั้นผู้ใช้ต้องทำการสมัครสมาชิกก่อนจึงจะสามารถเข้าใช้งานได้
ขั้นตอนที่ 1 ทำการ add ข้อมูลลงในตาราง กำหนดว่าข้อมูลชุดไหนอยู่แนวแกน X, แกน Y รวมทั้งกำหนดรูปแบบของ chart ที่ต้องการใช้ในการแสดงข้อมูล เช่น Bar chart , Pie chart เป็นต้น

ขั้นตอนที่ 2 กำหนดสีกำหนดรูปแบบของการฟ

ขั้นตอนที่ 3 เมื่อได้กราฟตามความต้องการแล้วผู้ใช้สามารถ Export ออกไปใช้งานได้เลย

ภาพแสดงกราฟที่ได้จากการทดลอง

Datawrapper : https://datawrapper.de/

ในส่วนของ Datawrapper นั้นจะมีขั้นตอนการสร้าง chart ง่ายๆอยู่ 4 ขึ้นตอน

ขั้นตอนที่ 1 ทำการ add ข้อมูล ซึ่งในที่นี้ผู้ใช้สามารถใส่ข้องมูลเป็นแบบ text หรือแบบ CSV file ก็ได้

ขั้นตอนที่ 2 ตรวจสอบข้อมูลว่าถูกต้องหรือไม่ อีกทั้งยังสามารถกำหนดข้อมูลต่างๆ อย่างเช่นหน่วยของตัวเลขได้อีกด้วย

ขั้นตอนที่ 3 ทำการเลือกรูปแบบกราฟที่ต้องการ ซึ่งผู้ใช้สามารปรับแต่งรูปแบบของ chart ได้

ภาพแสดงกราฟที่ได้จากการทดลอง

ขั้นตอนที่ 4 เป็นขั้นตอนของการ Publish & Embed ซึ่งในบางกรณีนั้นจะต้องทำการอัพเกรดก่อน (เสียค่าบริการ)

Raw : http://raw.densitydesign.org/
Raw เป็น web based ตัวหนึ่งที่ผู้ใช้สามารถลองเล่นได้โดยไม่ต้องสมัครสมาชิกให้ยุ่งยาก ซึ่งขั้นตอนในการใช้นั้นก็ไม่ได้ต่างจาก web based ตัวอื่นๆเท่าใดนัก

เริ่มแรกจากการใส่ข้อมูลลงไป

จากนั้นก็ทำการเลือกรูปแบบ chart ตามแบบที่ผู้ใช้ต้องการ

จัดการข้อมูลตามรูปแบบที่ผู้ใช้ต้องการให้แสดงผลบนกราฟ

ทำการปรับขนาด ปรับสี ของ chart

chart ที่ได้จากการทดลอง

สามารถนำ chart ที่ได้ออกไปใช้ในรูปแบบของ Embed code ได้

Many eyes : http://ibm.com/software/analytics/manyeyes การสร้างกราฟใน web based ของ Many eyes นั้นสามารถทำได้ภายในสามขั้นตอนเท่านั้น นั่นคือ ใส่ข้อมูลสำหรับสร้าง chart => เลือกรูปแบบและปรับเปลี่ยน chart ตามที่ต้องการ => share!

ขั้นตอนที่ 1 ผู้ใช้ต้องทำการ add ข้อมูลลงไป เมื่อทำการใส่ข้อมูลเรียบร้อยแล้วทางเว็บจะมีการแสดงข้อมูลให้เราดูแบบเป็นตารางอีกด้วยซึ่งนั่นจะทำให้ผู้ใช้สามารถตรวจสอบข้อมูลได้ง่ายขึ้น

รูปภาพแสดง : ขั้นตอนการ add ข้อมูล

ขั้นตอนที่ 2 เป็นการเลือกรูปแบบของ chart ที่ผู้ใช่ต้องการ ซึ่งทางเว็บก็มีหลากหลายรูปแบบให้เลือกใช้

รูปภาพแสดง : chart รูปแบบต่างๆที่ทางเว็บมีให้ผู้ใช้ได้เลือก

ขั้นตอนที่ 3 ทำการ share กราฟที่สร้างได้เพื่อให้เพื่อนคนอื่นๆของคุณได้เห็น

รูปภาพแสดง : ขั้นตอนการ share ซึ่งเป็นขั้นตอนสุดท้าย

รูปภาพแสดง : กราฟที่สร้างได้จาก web based ของ Many eyes

ที่มา
1. http://social.nesdb.go.th/SocialStat/StatReport_Final.aspx?reportid=226&template=2R1C&yeartype=M&subcatid=17

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

Data Visualization Week 1

ข้อมูลที่นำมาใช้ในการทดลองในครั้งนี้นั้นเป็นข้อมูลของประเทศที่มีนักท่องเที่ยวมากที่สุด 10 อันดับ ในปี ค.ศ.2012 และ ปี ค.ศ.2013 ซึ่งข้อมูลที่ได้จากการประมวลผลนี้อาจจะเป็นตัวช่วยให้ใครหลายๆ คนตัดสินใจเป้าหมายในการเดินทางครั้งต่อไปได้ง่ายขึ้น

ตารางแสดง 10 อันดับประเทศที่มีนักท่องเทียวมากที่สุดในปี 2013-2014

Use spreadsheet

Spreadsheet เป็นโปรแกรมที่มีความสามารถในการประมวลผลทางด้านการคำนวณ การวิเคราะห์ทางสถิติ และ สามารถสรุปผลออกมาในรูปแบบของตารางและกราฟต่างๆได้ เช่น กราฟแท่ง( bar charts ), กราฟวงกลม( pie charts ), กราฟเส้น( line graph) เป็นต้น โดยในการทดลองครั้งนี้ได้เลือกใช้โปรแกรม Microsoft Excel 2007 ในการทดลอง

ผลที่ได้จากการทดลอง

Chart แสดง 10 อันดับประเทศยอดนิยมของนักท่องเที่ยว

Chart แสดงเปอร์เซ็นความเปลี่ยนแปลงของจำนวนนักท่องเที่ยวใน ปี 2012 และ ปี 2013

Use Processing.js

Processing.js คือ ภาษาที่ใช้สำหรับพัฒนาโปรแกรม ใช้ในการสร้างกราฟฟิกต่างๆ ได้ทั้งงในรูปแบบ 2 มิติ และ 3 มิติ ตัวอย่างเช่น กราฟแสดงข้อมูล animations เป็นต้น

code ที่ใช้ในการทดลอง

//ส่วนของการกำหนดตัวแปร
String city[] = {"France", "US", "Spain", "China", "Italy", "Turkey", "German", "UK",
"Russia", "Thai"};
float preple_2012[] = {83,66.7,57.5,57.7,46.4,35.7,30.4,29.3,25.7,22.4};
float preple_2013[] = {84.7,69.8,60.7,55.7,44.7,35.7,31.5,31.2,28.4,26.5};
int ScreenWidth = 720, ScreenHeight=400;
int Margin = 85;
void setup() {
//กำหนดขนาด
   size(ScreenWidth,ScreenHeight);
smooth(); }

void draw() {
   //เรียกฟังชั่นวาดกราฟ
    background(255);
textAlign(CENTER);
Axis();
PrintBars();
   Bars();
   }

     //ฟังชั่นสำหรับวาดเส้นกราฟและแบ่งสเกล
   void Axis(){
   textFont(createFont("Arial",12),24); text("International Tourist Arrivals", Margin+       (ScreenWidth-(Margin*2))/2,60);
   strokeWeight(1);
   stroke(220);
   for(float x=0;x<=10;x++){
      int bars=(ScreenHeight-Margin)-int(0.57*(ScreenHeight)*(x/10));
      line(Margin,bars,ScreenWidth-Margin,bars);
   }
   strokeWeight(1);
   stroke(180);
   for(float x=0;x<=5;x++){
      int bars=(ScreenHeight-Margin)-int(0.57*(ScreenHeight)*(x/5));
      line(Margin,bars,ScreenWidth-Margin,bars);
   }
   strokeWeight(2);
   stroke(90);
   line(Margin,ScreenHeight-Margin,ScreenWidth-Margin,ScreenHeight-Margin);
   line(Margin,ScreenHeight-Margin,Margin,Margin);
   strokeWeight(1);
     }

     //plot สเกลบนกราฟทั้งแกน X (ชื่อประเทศ) และแกน Y
     void Bars(){
   for (int i=0;i<10;i++){
   stroke(90);
   fill(0x2e,0x2a,0x2a);
   textFont(createFont("Arial",12),13);
   text(city[i], Margin+30 +(i*55), ScreenHeight-Margin+20 );
   }
   fill(0x2e,0x2a,0x2a);
   for(float x=0;x<=10;x++){
      textFont(createFont("Arial",12),12);
      text(round(x*10),Margin-23,ScreenHeight-Margin-(x*22));
   }
   rotate(radians(-90));
   text("Millio",-ScreenHeight/2,Margin-45);
     }

     //วาด Bar ลงบนกราฟ
     void PrintBars(){
   for (int i=0;i<10;i++){
   fill(72 ,61, 139);
   stroke(90);
   rect(Margin+15 +(i*55), ScreenHeight-Margin-1, 15, (-preple_2012[i])*2.3+1);
   fill(135, 206, 235);
   rect(Margin+30 +(i*55), ScreenHeight-Margin-1, 15, (-preple_2013[i])*2.3+1);    }
     }

ผลที่ได้จากการทดลอง

Chart แสดง 10 อันดับประเทศยอดนิยมของนักท่องเที่ยว จากโปรแกรม Processing.js

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

Infographic vs. Data Visualization

Infographics

Infographics หรือ Information Graphic หมายถึง การนำข้อมูล เช่น ข้อมูลสารสนเทศ สถิติ ตัวเลข ความรู้ เป็นต้น มาสรุปให้อยู่ในลักษณะของภาพหรือกราฟิก ดูแล้วเข้าใจง่ายในเวลาอันรวดเร็วและชัดเจน สามารถสื่อให้ผู้ชมเข้าใจความหมายของข้อมูลทั้งหมดได้

Data Visualization

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

Reference :

http://www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2

http://www.motioninfostudio.com/%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99%E0%B8%A1%E0%B8%B2%E0%B8%81%E0%B8%81%E0%B8%A7%E0%B9%88%E0%B8%B2%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%94%E0%B9%89%E0%B8%A7%E0%B8%A2-data-visua/

http://rungrasasmee-visualization.blogspot.com/2013/03/data-visualization-infographics.html