Data Visualization: มกราคม 2015

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

Exercise2 - try other tools(continue)

Exercise2

Try google charts

Pie chart https://developers.google.com/chart/interactive/docs/quick_start

Find/try more tools

Area Chart http://www.onlinecharttool.com/graph

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

Exercise2 - try other tools(continue)

Exercise2

Try google charts

บริการ google chart พัฒนาจาก Javascript ทำให้สำดวกในการใช้งานร่วมกับเอกสาร HTML มีรูปแบบกราฟหลากหลาย ทำงานผ่าน Visualization API โดยการส่งข้อมูลทางสถิติไปยัง google และรับ script ที่ google chart สร้างขึ้นกลับมาแสดงผล (รับ-ส่ง ข้อมูลในรูปแบบ client-server architecture)
ข้อดี - กราฟมีการตอบสนองเป็น อนิเมชัน
- หากนำไปใช้ใน E-book หรือ สื่อออนไลน์เพราะกราฟจะแสดงผลได้แบบ real time และสามารถอัพเดทข้อมูลได้เสมอ

Line chart https://developers.google.com/chart/interactive/docs/gallery/linechart

code

<html>
<head>
  <script src="https://www.google.com/jsapi" type="text/javascript"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Year');
      data.addColumn('number', 'Smart Phone');
      data.addColumn('number', 'PC');
      data.addColumn('number', 'Tablet');

      data.addRows([
        ['2009',  175,  305,  0],
        ['2010',  297,  346,  18],
        ['2011',  468,  370,  64],
        ['2012',  630,  393,  104],
        ['2013',  789,  418,  178],
        ['2014',  947,  482,  252],
        ['2015',  1105,  535,  326]
      ]);

      var options = {
        chart: {
          title: 'Sale of client devices 2009 to 2015',
          subtitle: 'millions of units'
        },
        width: 750,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="line_top_x">
</div>
</body>
</html>

Highlighter

วันอาทิตย์ที่ 25 มกราคม พ.ศ. 2558

Exercise2 - try other tools

Exercise2

Try one or more web-based tools

ตารางข้อมูล - Link Sale of client devices 2009 to 2015 (millions of units)
- Link Chart - Explore favorite color

1. Datawrapper - https://datawrapper.de/

https://datawrapper.de/chart/MUxXq/publish

2. RAW - http://raw.densitydesign.org/

เลือกรูปแบบ Circle Packing

Map your dimensions (ผนวกมุมมอง)

HIERARCHY :: ลำดับชั้น

Visualization (can custom)

การ Export file

สามารถ Download file .png .svg .json หรือ Copy Code svg

New Map your dimensions (ผนวกมุมมองใหม่)

Visualization

เลือกรูปแบบ Alluvial Diagram (Fineo-like)

3. Manyeyes - http://www-969.ibm.com/software/analytics/manyeyes/

4. Plot - https://plot.ly/

การแสดงผล เมื่อเลื่อน cursor

https://plot.ly/~wispmyuii/17/sale-of-client-devices-2009-to-2015-millions-of-units/

Database

http://thanachart.org/2013/03/30/การวางแผน-mobile-strategy-ขององค์กร/

http://helplogger.blogspot.com/2014/09/host-blogger-css-javascript-files-in-google-drive.html

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

ข้อมูลรายวิชา Data Visualization

Data Visualization
ชื่อวิชา : 010123217 Selected topic in computer - Data Visualization (2558)
ชื่อผู้เรียน : น.ส.ชนม์นิภา เย็นเป็นสุข รหัสนักศึกษา 5401012620082
อาจารย์ที่ปรึกษา : อาจารย์ โสภณ อภิรมย์วรการ
มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ วิศวกรรมคอมพิวเตอร์

Infographic คือ?

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

http://whereisthailand.info/2013/06/proved-reserves-of-oil-natural-gas/

http://izido.blogspot.com/2014/02/blog-post_13.html

* เห็นตัวอย่างได้ชัดเจนจากเจ้าปลาวาฬน้อยของกลุ่มจิตอาสา รู้สู้ Flood

Data Visualization คือ ?

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

http://www.motioninfostudio.com/เป็นมากกว่าข้อมูลด้วย-data-visua/

ระบุตัวเลขเป็นเปอร์เซนต์เพื่อแสดงปริมาณแอลกอฮอล์ พร้อมรูปของเครื่องดื่มแต่ละชนิดที่มีสีสันสวยงามประกอบ ถ้าเราลองเขียนสิ่งที่รูปนี้อธิบายเป็นตัวหนังสือมันจะดูน่าเบื่อและทำให้รู้สึกเหมือนกำลังนั่งอ่านสือสอบกันเลยทีเดียว

http://www.motioninfostudio.com/เป็นมากกว่าข้อมูลด้วย-data-visua/

Interesting

ปัจจุบัน ข้อมูลที่ผู้ให้บริการต่างๆ มีจำนวนมากจากการขยายตัวของผู้ใช้ internet เครือข่ายสังคมซึ่งเป็นผู้ให้บริการขนาดใหญ่ เช่น Facebook , Google+ ที่จำเป็นต้องเก็บข้อมูลซึ่งถือเป็นทรัพยากรที่มีมูลค่า ให้อยู่ในรูปแบบข้อมูลที่เป็นรูปภาพมากขึ้น ทำให้สามารถวิเคราะห์ข้อมูลเหล่านี้เพื่อการดำเนินการทางธุรกิจหรือการสร้างความน่าเชื่อถือของการให้บริการ ข้อมูลจำนวนมหาศาลเหล่านี้ถูกเรียกว่า Big Data (Big data ปริมาณเท่าไหร่จึงจะเรียกว่า big data ของมูลดิบที่ใช้หน่วยความจำเกินกว่า flash drive ที่มีหน่วยความจำมากสุดในปัจจุบัน) เช่น facebook ใช้การจัดการข้อมูลแบบ graph

Internet Of Everything

อ้างอิง
Infographic Link
http://www.oknation.net/blog/digitalmarketing/2013/01/01/entry-2
Data Visualization Link
http://preedadai.tumblr.com/post/8299555365/data-visualization-2
http://www.motioninfostudio.com/เป็นมากกว่าข้อมูลด้วย-data-visua/
http://thumbsup.in.th/2014/06/12-beautiful-world-cup-2014-data-visualisations/
Big Data
Big-data-with-graph-analytics
นายชาญศักดิ์ กรชัยวรกุล

Chart & Graph Generator Tool

Exercise1 - Chart & Graph Generator | Tool

ใช้ spreadsheets ซึ่งเป็น web application ของ google drive สำหรับสร้าง chart

Link Chart - Explore favorite color

ตารางข้อมูล

Bar Chart

Pie Chart

ตัวอย่าง Web Application สำหรับสร้าง chart&graph

Link http://www.onlinecharttool.com/graph

สร้าง Chart ด้วย Processing จากข้อมูลเดิม

code

String[] likecolor = {

"White",

"Purple",

"Red",

"Pink",

"Orange",

"Yellow",

"Green",

"Blue",

"Black",

};

int[] Male = {6,1,0,0,0,1,5,3,12};

int[] Female = {3,1,2,3,0,5,2,1,0};

int X1 = 80;

int Y1 = 100;

int distance_bar = 50;

int weigth_bar = 15;

PFont font1 = createFont("Arial", 20, true);

PFont font2 = createFont("Arial", 14, true);

void setup() {

size(680, 600);

//textFont(font);

}

void draw() {

background(255);

textFont(font1);

String str = "Explore favorite color";

fill(0);

text(str, 250, 60);

//BACKGROUND

fill(255);

noStroke();

rectMode(CORNERS);

rect(20, 100, width - 20, height - 100);

textFont(font2);

int Y2 =((weigth_bar*2*likecolor.length)+((distance_bar-weigth_bar)*(likecolor.length-1)))-20;

stroke(0);

text("0", (X1+(0*40)) -5, Y2+20);

text("3", (X1+(3*40)) -5, Y2+20);

text("6", (X1+(6*40)) -5, Y2+20);

text("9", (X1+(9*40)) -5, Y2+20);

text("12", (X1+(12*40)) -10, Y2+20);

stroke(200);

line(X1+(3*40), Y1, X1+(3*40), Y2);

line(X1+(6*40), Y1, X1+(6*40), Y2);

line(X1+(9*40), Y1, X1+(9*40), Y2);

line(X1+(12*40), Y1, X1+(12*40), Y2);

//drawbar

stroke(200);

for(int i=0;i < likecolor.length;i++){

drawbar(i);

}

stroke(0);

line(X1, Y1, X1, Y2);

line(X1, Y2, width - 80, Y2);

text("#number of student", 250, Y2+40);

decript();

}

void drawbar(int i) {

// BAR 1

rectMode(CORNER);

fill(10, 240, 255); //Blue Male

rect(X1, Y1+(distance_bar*i), Male[i]*40, 15);

fill(255, 5, 5); //Pink Female

rect(X1, Y1+15+(distance_bar*i), Female[i]*40, 15);

String state_1 = likecolor[i];

fill(0);

text(state_1, 20, Y1+15+(distance_bar*i));

}

void decript() {

rectMode(CORNER);

fill(10, 240, 255); //Blue Male

rect(width - 100, Y1+(distance_bar), 15, 15);

text("Male", (width - 100)+20, Y1+15+(distance_bar));

fill(255, 5, 5); //Pink Female

rect(width - 100, Y1+distance_bar+weigth_bar*2, 15, 15);

text("Female", (width - 100)+ 20, Y1+15+(distance_bar+weigth_bar*2));

}

Test code

http://processingjs.org/learning/
http://processingjs.org/learning/custom/snake/