27 มกราคม 2558

Try dygraphs

            Dygraphs เป็นอีกทางเลือกหนึ่งสำหรับการสร้าง Data Visualization ข้อดีคือ สามารถใช้งานได้ฟรี ลักษณะการทำงานคล้ายกับ processing.js คือเขียนเป็นสคริปสั้นๆ ก็สามารถสร้างกราฟอย่างง่ายได้ทันที แต่มีข้อเสียคือ สามารถสร้างได้เพียงกราฟในลักษณะกราฟเส้น เท่านั้น และค่าของแกน x สามารถเป็นได้เพียงตัวเลข หรือวันที่ เท่านั้น
ข้อมูล จำนวนผู้เสียชีวิต 7 วันอันตรายปี 2015 (30/12/2014 – 05/01/2015)
30/12/2014 เสียชีวิต 56 คน
31/12/2014 เสียชีวิต 62 คน
01/01/2015 เสียชีวิต 60 คน
02/01/2015 เสียชีวิต 32 คน
03/01/2015 เสียชีวิต 15 คน
04/01/2015 เสียชีวิต 12 คน
05/01/2015 เสียชีวิต 32 คน
ตัวอย่าง สคริปอย่างง่าย

 <html>
<head>
<script src="http://dygraphs.com/1.1.0/dygraph-combined.js" type="text/javascript"></script>
</head>
<body>
<div id="graph">
</div>
<script type="text/javascript">
    g = new Dygraph(document.getElementById("graph"),

    // data
    "Date,The Number of Death\n" +
    "2014-12-30,56\n" +
    "2014-12-31,62\n" +
    "2015-01-01,60\n" +  
    "2015-01-02,32\n" +  
    "2015-01-03,15\n" +
    "2015-01-04,12\n" +
    "2015-01-05,32\n",
    {
    // options
      legend: 'always',
      animatedZooms: true,
      title: '7 Critical Day'
    });
</script>
</body>
</html>

Reference : 
http://rvpreport.rvpeservice.com/viewrsc.aspx?report=0626&session=16
http://dygraphs.com/index.html


เขียนโดย ที่ ไม่มีความคิดเห็น:

Try google charts

            Google charts เป็นเครื่องมือสำหรับสร้าง Data Visualization บนเว็ปตัวหนึ่งที่ใช้งานง่ายมีรูปแบบให้เลือกหลากหลายตั้งแต่ กราฟง่ายๆ จนถึง กราฟต้นไม้แบบซับซ้อน ซึ่งการนำไปใช้งานจะอยู่ในรูปแบบ JavaScript
Reference : https://developers.google.com/chart/interactive/docs/quick_start

เริ่มการใช้ Google charts อย่างง่าย
1.   ส่วนของการโหลด Libraries ของ Google มาใช้
-     Google JSAPI API
-     Google Visualization library
2.   ส่วนของการสร้างข้อมูลสามารถ สร้างในรูปแบบของตัวแปร Array หรือจะดูดข้อมูลมาจาก Spreadsheets ก็ได้ตามสะดวก
3.   ส่วนของการตั้งค่ากราฟต่างๆ เช่น ขนาด หัวข้อ รูปแบบของกราฟ

 ตัวอย่าง JavaScript อย่างง่าย

<html>
  <head>
    <script src="https://www.google.com/jsapi" type="text/javascript"></script>

     <script type="text/javascript">

       google.load('visualization', '1.0', {'packages':['corechart']});
      google.setOnLoadCallback(drawChart);

       function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Semester', 'Student'],
          ['1/2554',  286],
          ['2/2554',  281],
          ['1/2555',  254],
          ['2/2555',  231],
          ['1/2556',  193],
          ['2/2556',  175],
          ['1/2557',  174],
        ]);

         var options = {
          title: 'Engineering Student of KMUTNB Prachinburi Campus',
          'width':500,
          'height':300
        };

         var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

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

เขียนโดย ที่ ไม่มีความคิดเห็น:

Try web-based tools

            Web-based tools ที่เลือกมาทดลองใช้งานคือ plotly สามารถสมัครสมาชิกและใช้งานได้ฟรี การใช้งาน plotly สามารถใช้งานได้ 2 รูปแบบหลัก คือ Workspace online และ API libraries
Reference : https://plot.ly/

Workspace online

API libraries

การใช้งาน plotly แบบ workspace online
1.      ทดลองสร้างข้อมูลโดยใช้ Spreadsheets บน Google Drive
ข้อมูลจำนวนนักศึกษา คณะวิศวกรรมศาสตร์ วิทยาเขตปราจีนบุรี
Reference : http://regis.kmutnb.ac.th/data_doc/stat/sindex.html

2.      plotly รองรับการ import ไฟล์งาน Spreadsheets จาก Google Drive
แสดงฟังค์ชั่นการทำงาน import จาก Google Drive


แสดงการ import งานที่ต้องการจาก Google Drive

3.      สามารถนำข้อมูล ไปวาดกราฟในรูปแบบต่างๆ ได้
กราฟแท่งแสดงถึงนักศึกษา คณะวิศวกรรมศาสตร์ วิทยาเขตปราจีนบุรี

กราฟเส้นแสดงถึงนักศึกษา คณะวิศวกรรมศาสตร์ วิทยาเขตปราจีนบุรี

นำกราฟจาก plotly มาแสดงบน web blog ด้วยคำสั่ง

<iframe width="600" height="600" frameborder="0" seamless="seamless" scrolling="no" src=" https://plot.ly/~chansak79/128?width=600&height=600"></iframe>


เขียนโดย ที่ ไม่มีความคิดเห็น:

21 มกราคม 2558

How to fix Chrome Browser problem

            ปัญหา : เมื่อเรียกใช้สคริป https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js (ลิงค์ js จาก processingjs.org) บน Chrome Browser จะเกิดปัญหาไม่สามารถทำงานได้ เนื่องจาก js ที่เรียกเป็นไฟล์ประเภท MIME (text/plain)
            วิธีแก้ไข : ให้นำลิงค์ https://raw.githubusercontent.com/processing-js/processing-js/v1.4.8/processing.min.js ไปสร้าง URL ใหม่ด้วยเว็ปไซต์ http://rawgit.com/  จะได้ URL ใหม่คือ https://rawgit.com/processing-js/processing-js/v1.4.8/processing.min.js จากนั้นจึงนำไปใช้งานปกติ จะทำให้ Chrome Browser สามารถทำงานร่วมกับ processing js ได้ปกติ

Reference : http://geekdave.com/2013/06/19/linking-raw-github-files-from-jsfiddle/

เขียนโดย ที่ ไม่มีความคิดเห็น:

20 มกราคม 2558

Find and try other tools

            สำหรับเครื่องมือในการสร้าง Data Visualization มีหลากหลายให้เลือกใช้งาน แล้วแต่ความชอบ และลักษณะของข้อมูล
            ManyEyes เป็นโปรแกรมประเภท Online free software สร้างขึ้นโดยบริษัท IBM สำหรับการสร้าง Data Visualization ตัวหนึ่ง มีรูปแบบหลากหลาย เช่น world cound, map, chart เป็นต้น สามารถป้อนข้อมูลแบบ spreadsheet (สามารถคัดลอกจาก Google drive ได้) หรือข้อความปกติ
            ตัวอย่างด้านล่าง คือการนำข้อมูลไปสร้าง Data Visualization ด้วย Many Eyes



 Reference : http://www-969.ibm.com/software/analytics/manyeyes/#/visualizations
เขียนโดย ที่ ไม่มีความคิดเห็น:

Use Processing.js

            Processing.js คือ ภาษาที่ใช้สำหรับพัฒนาโปรแกรม ดีไซน์มาสำหรับใช้กับเว็ปไซต์ โดย Processing.js สามารถนำมาสร้าง Data visualization, Digital art, Interactive animations, graphs และอื่นๆอีกมากมาย โดยที่สามารถทำงานได้กับเว็ปทั่วไป โดยไม่ต้องลงปลั๊กอินเพิ่ม ซึ่งสามารถเขียนโค้ดเป็นภาษา Processing เพื่อนำไปทำงานร่วมกับเว็ปไซต์ได้เลย
ตัวอย่างด้านล่าง คือตัวอย่างจากเวปไซต์ Processing js ซึ่งเป็นตัวอย่างใน tutorial ซึ่งนำสคริปมาเขียนร่วมกับ blogspot ได้ทันที 



ตัวอย่างด้านล่าง คือการนำ Processing js มาประยุกต์ใช้งานอย่างง่าย



<script>
size(200, 200);
background(150);
smooth();
noStroke();

int diameter = 150;
int[] angs = {-90,90+45,90,75,60};
float lastAng = 0;
color[] cx = {0, color(204,0,0), color(204,153,0), color(51,102,0), color(102,153,255)};

for (int i=0; i<angs.length; i++){
  fill(cx[i]);
  arc(width/2, height/2, diameter, diameter, lastAng, lastAng+radians(angs[i]));
  fill(255);
  ellipse(width/2, height/2, 40, 40);
  lastAng += radians(angs[i]);
}
</script>
Reference : http://processingjs.org/learning/
เขียนโดย ที่ ไม่มีความคิดเห็น:

Use spreadsheet to create graph/chart

Spreadsheet คือ โปรแกรมที่ความสามารถในด้านคำนวณ วิเคราะห์ สรุปผลและแสดงผลในเชิงตัวเลขหรือสถิติ
ในการทดลองใช้งานครั้งนี้ได้เลือกโปรแกรม spreadsheet ของ google drive ซึ่งโปรแกรมประเภท ฟรีซอฟแวร์

ข้อมูลส่วนตัว เกรดของแต่ละเทอมที่ได้ Link : My spreadsheet - my grade



เขียนโดย ที่ ไม่มีความคิดเห็น:

Infographic vs. Data Visualization

            Infographic หรือ Information Graphic คือ ภาพที่บ่งชี้ถึงข้อมูล เช่น ข้อมูลสารสนเทศ สถิติ ตัวเลข ความรู้ ลำดับขั้นตอน เป็นต้น เป็นการแสดงข้อมูลที่ซับซ้อนหรือมีปริมาณมากๆให้เข้าใจได้ง่ายจากการมองด้วยเวลาเพียงสั้นๆ
Infofraphic แสดงถึงความแตกต่างระหว่างคนที่ถูกเรียกว่า Geek และ Nerd
Reference : http://www.creativebloq.com/graphic-design-tips/great-infographic-design-tips-1232813

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

Data Visualization แสดงถึงสิ่งที่คน 7 พันล้านคนบนโลกทำ
Refernce : http://www.coolinfographics.com/blog/2013/7/30/what-do-7-billion-people-do.html

Reference :
http://en.wikipedia.org/wiki/Infographic
http://en.wikipedia.org/wiki/Data_visualization
เขียนโดย ที่ ไม่มีความคิดเห็น:

19 มกราคม 2558

Data Visualization Example

ตัวอย่าง Data Visualization แบบต่างๆ

Example 1 : Data Visualization

Example 2 : Data Visualization World Cup 2014

Example 3 : Data Visualization Map

Example 4 : Data Visualization Blog

Example 5 : 50 Great Data Visualization


เขียนโดย ที่ ไม่มีความคิดเห็น:

16 มกราคม 2558

Data Visualization

Data Visualization - "คำพูดเป็นล้านคำ ไม่อาจเท่ากับภาพเพียงภาพเดียว"

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

วิศวกรรมคอมพิวเตอร์ มหาวิทยาลัยเทคโนโลยีพระจอมเกล้าพระนครเหนือ


เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: ความคิดเห็น (Atom)