วันพุธที่ 11 กุมภาพันธ์ พ.ศ. 2558

Exercise4

Let’s Make a Bar Chart
  • Coding a Chart, Manually

4
8
15
16
23
42
Code
<!DOCTYPE html>
<style>

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

</style>
<div class="chart">
  <div style="width: 40px;">4</div>
  <div style="width: 80px;">8</div>
  <div style="width: 150px;">15</div>
  <div style="width: 160px;">16</div>
  <div style="width: 230px;">23</div>
  <div style="width: 420px;">42</div>
</div>
Code

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

วันอังคารที่ 10 กุมภาพันธ์ พ.ศ. 2558

Exercise4 - Start learning D3.js and Think about topic for your presentation


Exercise4

- Start learning D3.js
Learning 
        Web server คือเครื่องคอมพิวเตอร์ที่ให้บริการเอกสารตามข้อมูลที่ร้องขอ  Web server ที่นิยมใช้ที่สุดคือ Apache ซึ่งมันไม่จำเป็นต้องดูดี  ในขณะที่ Browser ต้องดูดีมากเช่น Chrome, Firefox, Safari ทั้งหมดนี้มีไว้สำหรับให้ Client เรียกชมหน้าเว็บไซต์ได้โดยใช้โพรโทคอล HTTP ผ่านทางเว็บเบราว์เซอร์
DOM : Document Object Model  เป็นโครงสร้างลำดับชั้น(hierarchical) ของภาษา HTML  
DOM จะแบ่งข้อมูลออกเป็นคอมโพเนนต์ต่างๆ เช่น หัวข้อ ย่อหน้า ตาราง  เพื่อให้สามารถจัดการกับเอกสารได้ง่ายขึ้น ไม่ว่าจะเพิ่มหรือลบ และแก้ไขคอมโพเนนต์ต่างๆ ซึ่งสามารถทำผ่านทาง Java หรือ JavaScript

Press Ctrl + Shift + C  บน Chrome
DOM style on google Chrome
https://developer.chrome.com/devtools/docs/dom-and-styles

Inheritance, Cascading, and Specificity
<html>
  <head>
    <title></title>
      <style type="text/css">
        div {
          background-color: red;
          font-size: 24px;
          font-weight: bold;
          color: white;
        }
      </style>
    </head>
    <body>
      <p>I am a sibling to the div.</p>
      <div>
        <p>I am a descendant and child of the div.</p>
      </div>
  </body>
</html>

ข้อความที่ถูกแทกด้วย <div> จะถูกใส่รูปแบบ CSS ที่กำหนดไว้

INTRODUCTION TO JAVASCRIPT

ศึกษา Javascript บน codecademy
  • Interactive JavaScript
confirm("I feel awesome!");
confirm("I am ready to go.");
>> show popup
  • the program needs an input. You can ask for input with a prompt.
prompt("What is your name?");
prompt("What is Ubuntu?");
  • Data Types I & II: Numbers & Strings
"What is your name?".length
>>18
  • Data Type III: Booleans
"I'm coding like a champ".length >= 23;
>>true
  • Using console.log
console.log("Hello")
console.log(2 * 5)
>> Hello
>> 10
ถูกเรียกว่าการ print
  • Comparisons
console.log(15 > 4);
console.log("Xiao Hui".length < 122);
console.log("Goody Donaldson".length > 8);
console.log(8*2 === 16);
>>true
>>true
>>true
>>true

  • Decisions, decisions
if ( "wispmyuii".length >= 7 ) {
    console.log( "You have a long name!" );
}
>> You have a long name!

- Think about topic for your presentation

Topic  Tar Sand Production Growing VS Tar Sand getting Dirty 
Tar Sand น้ำมันเหนียว
        สาเหตุที่เลือกหัวข้อนี้เพราะปัจจุบัน  ความต้องการน้ำมันสูงมาก  ทำให้ราคาน้ำมันต่อหนึ่งหน่วยจึงสูงตามไปด้วย  เมื่อมีความต้องการมากก็ย่อมทำให้ราคาดีดตัวสูงขึ้นไปอีก  จึงมีการสำรวจหาแหล่งพลังงานที่ยั่งยืน  คือ Alberta ซึ่งมีน้ำมันจำนวนกว่า 170 พันล้านบาเรล (เพิ่มอัตราการสำรองน้ำมันเท่ากับ 5 ปี)
ศักยภาพในการลงทุนเพื่อสำรวจ oil sand   ปตท.สผ. ลงทุน 68,000 ล้านบาทใช้ซื้อหุ้น 40% ในแหล่งทรายน้ำมัน (tar sands) KKD ในประเทศแคนาดา
 ที่มา : http://www.bangkokbiznews.com/blog/detail/526613
http://www.pttep.com/en/ourBusiness_EAndPprojectsDetail.aspx?ContentID=118

Impact ผลกระทบ
Giant Machine for Alberta
Alberta forest 10,000 year old VS Destroy for Tar Sand
New Alberta
        การขุด Tar Sand ถือเป็นปัญหาระดับโลกด้านจิตสำนึก  การทำลายป่าอายุกว่าหมื่นปี  เพื่อให้ได้มาพลังงาน  ป่าเหล่านี้ทำงานให้มนุษย์ทุกวันด้วยการปรับออกซิเจน  คาร์บอนได้ออกไซด์ สร้างสภาพแวดล้อม แต่ทว่าปัจจุบันมนุษย์ไม่ได้หายใจด้วยออกซิเจนอีกแล้ว  มนุษย์หายใจได้ด้วยเงิน  ป้อนทรายเข้าไปมากเท่าไร ผลกำไรยิ่งสูงเท่านั้น  การเสพติดปิโตรเลียมของคนทั้งโลก  และการแสวงหากำไรจากทรายสีดำของคนบางกลุ่ม  พลิกป่าเหล่านั้นเป็นป่าเสื่อมโทรม  
Improve การพัฒนา
        เพื่อนำกราฟ ที่ได้นำไปประยุกต์กับ Info-graphic เพื่อให้คนจำนวนมากได้เข้าใขถึงปัญหาที่ทุกคนจำเป็นต้องช่วยแก้ไข และแนวโน้มที่ทุกคนจะได้มีโอกาศใช้น้ำมันเหนียว
Inspiration แรงบันดาลใจ
        การสร้างระบบในเชิงวิศวกรรมที่เคยเรียนมาคือการป้อน input น้อย เพื่อให้ได้ output มาก  แต่การขุด tar sand ลบความคิดเชิงวิศวกรรมนี้ทั้งหมดเพื่อป้อน input (ทรายจำนวนมาก) เพื่อให้ได้ output (น้ำมันจำนวนน้อย) 
สารคดี Alberta Oil Sand พากย์ไทย
oil sand greenhouse
http://www.livescience.com/37962-tar-sands-expansion-impact.html
rgytrendsinsider.com/2013/11/11/oil-sands-and-the-environment-part-i/
http://www.oag-bvg.gc.ca/internet/English/parl_cesd_201410_02_e_39849.html
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันอังคารที่ 3 กุมภาพันธ์ พ.ศ. 2558

Exercise3 - Try one or more web-based tools

Exercise3

  • Try one or more web-based tools 
เลือกเวป - easycalculation 
มีหัวข้อเรื่องสำหรับการสร้างกราฟหลายหัวข้อ
เลือกการใช้ charts and graph เพื่อศึกษาการใช้งานเบื้องต้น
สร้าง Chart
1.Exploded Pie Chart
มีการกำหนด platform ให้ใส่ข้อมูลโดยการพิมพ์แล้วคั่นข้อมูลด้วยลูกน้ำ ","
สามารถ Download script ได้(แต่เสียเงิน) และสามารถเซฟรูปภาพได้เลย
สร้าง Graph
2.Line graph
3.Stacked Bar Graph
4.Histogram Graph
  • Find types/structures not mentioned in lecture

1.Range Bar Charts -  canvasjs
บอกช่วงอุณหภูมิสูงสุด ต่ำสุดในแต่ละเดือน
ส่งข้อมูลผ่าน API
2.Gantt Chart - smartsheet
Gantt Chart แบบ web application 
สามารถทำงานได้ใกล้เคียงกับ microsoft project ใช้งานฟรี 30 วัน




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

วันอังคารที่ 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/
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
0BlackOrange1BluePurple2GreenRed3PinkWhite5Yellow
  • เลือกรูปแบบ Alluvial Diagram (Fineo-like)
Black 0BlackBlue 1BlueGreen 2GreenOrange 0OrangePink 3PinkPurple 1PurpleRed 2RedWhite 3WhiteYellow 5Yellow0 001 212 423 635 55
200920102011201220132014201502004006008001000Sale of client devices 2009 to 2015 (millions of units)YearSmart PhonePCTablet
  • การแสดงผล เมื่อเลื่อน cursor

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

วันอังคารที่ 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 
    นายชาญศักดิ์ กรชัยวรกุล

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